Elementor and Google Page Speed

  • 21 July 2021
  • 4 replies
  • 132 views

Hi! My web speed drops a lot when implementing elementor. What can I do to solve this? 

What plugins and themes do you use to speed up effectively?

4 replies

Userlevel 1

I recently decided to tryout a new combination of plugins that have really helped improve my speed tests across multiple testing sites including Lighthouse.

My server is running HTTP/2 & PHP 7.4. I have Elementor Pro with the Hello theme.

I am not affiliated with any plugin. These are just what I currently find work best for me. 

I switched my caching plugin from a few different ones I’ve used to WP Rocket. I always try to avoid paid plugins, but the time it saves by importing my settings for every new site makes it worth it right there. The results before installation and after settings were applied was quite amazing. It also replaced other added plugins like Autoptimize, etc...

I switched my Image plugin from a few different ones I’ve used to Imagify. It not only compresses the images that I haven’t compressed enough before upload, but it also has the option to serve them as WebP format.

I also use Jetpack, Yoast, Schema, and Google Site Kit.

I agree with Mark. I use almost the same plugins, except that I use Rank Math instead of Yoast plugin. It's free and works perfectly.

Also, I think this is enough for your site to be fast.

And if your site is still slow, change the hosting.

Userlevel 4
Badge +1

The Hello theme is really fast. As mentioned above, there are caching plugins or optimization plugins that are helpful, as you’ll want to minify things, etc.

That said, I suspect some of the speed issues you are running into may have to do with using Elementor without keeping in minded how bloated things can get pretty quickly.

Elementor makes it really easy to add lots of sections, columns and widgets. All of this comes at a price due to a Document Object Model that is inflated with all the wrappers Elementor needs to put in to do its’ magic. A few rules I try to follow:

  • Try to look for ways to reduce columns. Sometimes a single column can be used to mimic having multiple columns. You can use inline blocks (advanced > positioning) and margins the layout your elements within the space.
  • If there is a widget with multiple sub-elements (like Call to Action)  that work for you, try using that rather than independent widgets for header, icon, text, etc. Less wrappers in the DOM = more speed.
  • Weigh the use of heavy, more intensive widgets to make sure that they justify the cost in speed. I like to develop a site with “plan features” (for example a hero graphic) before adding something more complex (a slider) to make sure the load time is justifiable.
  • Use SVGs where you can instead of Favicons. Once you are loading favicons you are taking a big performance hit. They are super convenient, but come at a price.

If you are not using an image plugin, you can also run your PNG files through a site like this:

https://tinypng.com/

It always improves upon what Illustrator produces as an export. Also, make sure that the dimensions of your images are not too large. I find that I get a little more lax at determining the best dimensions because images are so easy to resize in Elementor.

Also, make sure you have these performance settings turned on in “Settings > Experiments” 

If you are working with a live site use these in a staging environment as they can break things. Start with them on for any new sites.

Hope this helps!

What Mark K said.  [I use EWWW Image Optimizer, but I tried Imagify on one of my sites and was never motivated to switch -- works fine.]
 
Google Page Speed Insights tells you what needs to be improved.  Usually I just mess w/ whatever it complains about until I get to green.  Very rarely I'll have to go in to Chrome Developer Tools and use Lighthouse to find a problem. 
 
Sliders will kill you, as will anything complex above the fold.  If you keep it simple w/ WP Rocket, optimized images and putting complex stuff below the fold, you'll be 95 and over for everything on mobile and 99-100 on desktop. 
 
WP Rocket has a beta "Remove unused CSS" feature that I'll try once it's officially released.  But, you may want to give it a shot now if your site is new and doesn't get a lot of traffic yet?  
 
 

Reply