Speed up Elementor website: 98% of my clients install Elementor, create a bunch of pages, and then find out their WordPress website is super slow!
Does this sound like you? Well, no worries, you’re not alone!
Elementor allows you to be like a 4-year-old again – super excited about discovering a new playground. But …
The BUT is BIG – if you’re not careful, you’ll spend a couple of days building your site and then WEEKS trying to speed up Elementor!
In this Elementor tutorial, I will cover Elementor page speed basics so that you shouldn’t have to spend many head-scratching days and nights trying to fix your Elementor page speed.
Out-of-the-box Elementor is fast. It’s an old myth that Elementor is slow. It’s not.
What makes Elementor slow, is HOW YOU use it to create your WordPress website.
Elementor page speed tutorial - speed up Elementor websites
In this Elementor tutorial, I dive into the top five things you can do to make sure you don’t need to spend time in the future focusing on how to speed up WordPress Elementor.
Elementor Experiments - #1 speed tutorial tip
Elementor has a great way to share the latest software updates with you that are still undergoing testing and have not gone live. They call it Experiments.
Being able to access bleeding-edge updates – especially when they are speed/performance related – gives you a great page speed advantage.
You may have noticed the Experiments tab sitting in the main admin area.
Looking at the list of Experiments you can see the Performance/speed ones at a glance from their visual label.
Elementor also details the Experiment’s status and provides an easy link to learn more.
Below you can see that Improved CSS Loading is a Performance update and is nearly ready for full release because the Status is set to Release Candidate.
Warning: Elementor Experiments are experiments!
Yes I know that’s a dumb statement – it’s just a reminder to do full testing.
Experiments while stable, may cause your site to fail.
Elementor Speed Testing - use a staging server
Testing your site using a staging site is the safest way to try out new things.
I use Cloudways to create a staging site in a couple of minutes (simple migration plugin available), costing just a few cents per hour.
I delete the staging site when testing is finished so there are no ongoing hosting charges.
Watch this video to learn more about creating a staging site for testing your Elementor page speed adjustments.
Even if your current hosting has a staging site option, you should know about this great staging site trick.
Watch on Youtube: https://youtu.be/ivC6__ueyzU
Use great hosting to speed up Elementor websites - #2 tutorial tip
Let me check your general knowledge about server hosting.
- What is Redis?
a) No idea
b) Server-side object cache (for databases) - What is Varnish?
a) No idea!
b) Server-side cache and more specifically an HTTP accelerator - What is Opcache?
a) No idea (again!)
b) Server-side cache for PHP code - What is Nginx as a Reverse Proxy For Apache?
a) No idea (again!)
b) It’s a little complicated! – Read this Kinsta article
(recommended hosting company)
This simple exercise demonstrates there is a lot to server hosting that you may not be aware of.
If you are serious about your page speed you must use good hosting.
WordPress needs a lot of server resources and so does Elementor.
Bare-bones servers will not cut the cookie dough for page speed no matter what else you do.
Great hosting does not need to be expensive!
This website currently costs me $12 per month (as of Sept 2022) to host on a fast and optimized VPS Digital Ocean server managed by Cloudways (recommended – they have a free 3-day full).
And as you can see from my page speed shown below, I’m getting a lot of bang-for-my-buck!
The report below is for the page serving my Elementor Page Speed Course details (which I recommend of course!)
Page speed as part of user experience is a MAJOR ranking signal these days.
Google’s switch to focusing on Mobile First ranking in 2021, and their launch of Core Web Vitals in 2020, and with constant updates through 2022, shows you how serious page speed is to them.
After all – what’s the point of having great content if it does not load before someone loses interest and bounces off somewhere else?
We live in a 3-second world these days, so if your web pages are not loading in less than 3 seconds (at mobile speeds) you’re losing new business to your competitors who rank higher on Google because their content loads faster.
SHAMELESS SALES PITCH:
I offer page speed optimization and consultancy services and have a number of training courses available including one specifically for Elementor page speed. Check out my shop page for full details.
Stay light on whiz-bang functions - #3 Elementor speed tutorial tip
Keep things simple!
It’s best to tighten your grip on your desire to be like a kiddy in a playground again when it comes to Elementor ‘whiz-bang’ functions.
Elementor has a huge array of amazing design tools ready for you to drag-and-drop on to your page. Avoid the urge!
The more interactive an Elementor element is, then the more likely it uses more JS (Javascript) and CSS code.
Keeping your page simple is the best advice I can give you with Elementor.
I ply the same advice for Elementor add-ons like Ultimate Addons For Elementor.
Elementor Pro has enough ‘toys’ to play with so I don’t know why you would want more!
Remember, you only have 3 seconds when someone views a page.
If you waste your 3 seconds displaying ‘distractions’ like sliders, your visitor may bounce and never return.
Keeping things simple improves page conversion rates and page load speeds.
If you do use a new Elementor element test the page speed
I have been quietly surprised with some of the Elementor elements having little or no impact on page speed. This shows the build quality.
Do remember though, that using an element above the fold, vs further down the page, will have a different speed impact.
Sliders are a great example of this page speed impact.
At the top of the page, sliders can destroy your LCP (Largest Contentful Paint) scores, but halfway down they can have little or no impact as long as the images are optimized.
Test your page speeds as you build your pages when you use new elements from the page builder, then you’re not caught out by a ‘heavy weight’.
If you want to discover what is the best page speed testing tool for 2022 read this article.
Use a fast 'lightweight' WordPress theme - #4 tutorial tip
If I were to give you my prioritized list to focus on for Elementor page speed, I would give you this :
- Hosting / Server
- Theme
- Plugins
- Content
Each layer creates the foundation for the next layer, and together they create page speed synergy.
I place WordPress theme as #2 in the list, giving it a very important position.
What is a 'lightweight' theme and how does it help speed up Elementor websites
WordPress themes provide your site with the ‘skeleton’ framework to build your site from. They contain PHP code and CSS style sheets to create a specific default look and feel
Some themes try to be everything to everyone so the developer adds a lot of functions just in case you might want to use them.
These types of themes tend to fall into the ‘heavyweight’ category because they are bulging with excess code which can slow down your WordPress site.
Designers create ‘heavy’ themes probably because 90% of WordPress site owners don’t know about page speed, and are only looking for something that looks good and seems great value for money!
‘Lightweight’ themes, on the other hand, are built for a specific function, and if you want extra functions you can create those later on by adding plugins or custom code.
‘Lightweight’ themes are often called ‘bare bone’ themes.
Elementor comes with a free lightweight theme
You can use Elementors free theme : Hello Theme.
You can also use a Child theme for the Hello parent theme.
Download a copy of the child theme for Hello from GitHub.
GeneratePress is a recommend 'lightweight' and super fast theme perfect for Elementor sites
Elementor has been recommending GeneratePress as a partner theme since 2016.
Read this blog post from Elementor to learn more about the benefits of using this amazing theme on your Elementor WordPress sites so they run lightning fast.
Learn more and download GeneratePress here. [ Paid theme ]