Table of Contents
People will tell you Elementor is slow. They say it is heavy, it is bloated, it drags your whole site down. I build on WordPress and Elementor every day, on my own sites and my clients’, and I can tell you it does not have to be any of those things.
Here is what is really going on. Elementor can be slow, but it is almost never Elementor that made it slow. It is how the site was built. And that goes for many different themes.
But if you sort a few settings before you start and avoid a couple of habits while you build, Elementor is perfectly fast.
This one is for you if you built your own site, and now it’s slower than you’d like. And it’s for you if someone talked you out of Elementor before you even started, because they heard it was ‘the slow one’.
Why Elementor gets the blame
Elementor is not the only one with this reputation. Divi got the same blame at one point, and no matter which builder you pick, someone will tell you it is the slow one. Nearly every page builder gets called slow at some point or another, usually by someone who once saw a slow site built with it.
For some of them, the reputation is fair. A page builder gives you freedom, and freedom means you can put far more on a page than the page needs. Every widget loads something. Every container you wrap around another container is another layer for the browser to work through. Every full-size image you drop in straight from your camera roll is weight you added yourself. If a builder loads everything on every page and gives you no way to switch any of it off, careful building only gets you so far. You can tidy around the edges, but the weight is built in.
Elementor is not one of those. It has the settings to make it lean; it just doesn’t switch them all on for you. So yes, the reputation is partly earned, because Elementor can be heavy if you let it be. And it would be better if it would have some settings different by default. But then again, we can do that ourselves too.
Most of those decisions are best made before you build. Let me show you the ones I set up on every site.
The settings to sort before you build
Elementor's own performance settings
Elementor has its own performance settings, and a couple of them make a real difference. Elementor likes to move these around between versions, so rather than send you down a menu path that may have changed by the time you read this, look in Elementor’s settings for the Performance tab, and check the Features tab while you are there.
- CSS Print Method, set to External File. Your styling then loads as a proper file the browser can keep, instead of being printed into every page again.
- Optimized Image Loading, switched on. This tells the browser to fetch your hero image first and only lazy loads the images further down the page. More on why that matters below.
Host your fonts locally
By default, Google Fonts load from Google’s servers, which means every page on your site makes an extra request out to someone else’s server before your text can settle. Host the fonts on your own site instead. In Elementor you can switch the default Google Fonts off and load your fonts as local files, and set the font display to swap so your text shows straight away while the font loads.
Tell WordPress to stop copying every image
This one is small and specific and it surprises people. Go to Settings, then Media, and set all the image size fields to 0.
Out of the gate, WordPress makes several extra copies of every single image you upload, at sizes it thinks you might need. Multiply that across a whole site full of images and you have a pile of files you never use. Set those fields to 0 and it stops making them.
Don’t have a website yet, but want to have it built correctly?
Hit me up!
Turn off the wrong lazy loading
The standard advice everywhere is to lazy load your images, so they only load as the visitor scrolls to them. I switch it off in my speed plugins. Here is why. Lazy loading holds back your hero image too, the big one at the top of the page. So the first thing a visitor should see arrives last, the page looks like it isn’t loading, and Google reads that as a slow page.
What I use instead is Elementor’s own Optimized Image Loading setting, the one from the Performance tab above. It fetches your hero image first and only lazy loads the images further down the page, which is the one version of lazy loading that helps. So turn off the blanket version, and let Elementor do the smart one.
Upload your images as WebP
WebP is a modern image format that is much smaller than a JPEG or a PNG at the same quality, and WordPress has supported it for years now. Convert your images to WebP before you upload them, so the file that lands on your site is already light. It is the simplest habit on this list and it pays off on every image you ever add. PhastPress (more on it below) will also optimise your images as it serves them, but give it a small file to start with and it has far less work to do.
The two speed plugins I add
I keep the plugin list short on purpose, but there are two I add for speed.
PhastPress tidies up your site’s files behind the scenes. It makes your images, styling and code smaller and quicker to send, and you barely have to set anything up.
WP Meteor gets the page on screen first and makes the extras wait. Things like tracking code or a chat widget only start once someone scrolls, taps or moves their mouse.
The habits to watch while you build
So while the settings above are set once, these next ones are choices you keep making as you build each page.
Right-size your images as you go. Make sure each image is the right size for the slot it is going into, small in file size and small in actual dimensions. Do not drop a 3000-pixel-wide image into a space that is 600 pixels wide. The browser still has to load the whole thing.Â
Do not over-nest your containers. It is easy to end up with a container, inside a container, inside another container. Each layer is more for the browser to build. Keep your structure as flat as it needs to be and no deeper.
Do not stack widgets you do not need. Every widget loads something. If a plain text block does the job, you do not need the fancy animated one. A page does not have to be busy to be good!
Do not add unnecessary plugins. And while we are at it, don’t add too many plugins. It always baffles me when I see websites that have Elementor header and footer plugins while Elementor can do that itself. Same goes for like elements or social icons. Don’t add plugins for what your other plugins can already do.
It’s also a great reason to use Surecart instead of WooCommerce on your website though. Read more about that here.
Already got a slow website?
If you are reading this with a site that is already dragging, this list still helps, but start with two other things first. Check your plugins, because a bloated plugin list carries a lot of the weight (I wrote a whole plugin audit post on exactly that), and check your hosting, because cheap hosting will slow a site down no matter how well it is built. Both of those are a different job from this one.
And if you would rather just hand the slow site to someone who does this all day, Tech Hours are there for exactly that. You send me the task, I sort it, and you get on with your actual work.
Let’s make sure your website isn’t one of those slow ones!
