Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score

Table of Contents

Get your Elementor website loading faster with this very practical tutorial!

This is essentially the same strategy I used to get this website (element.how) over  90 on Google PageSpeed Insights. For mobile.

Essentially, the goal is to get rid of everything that's loading, that we don't need.

As you are following through this tutorial, test your website after every change you make, to validate that nothing has been broken. Not every suggestion here will work for everyone.

WP Rocket is the most important part of this optimization process, so I cover it in its own tutorial: How to optimize your Elementor website with WP Rocket. (And it's on sale right now @ 30% OFF)

Here, I cover everything else you can and should do (or at least try) to improve your Elementor websites performance.

I kept the plugin recommendations to a minimum: Code Snippets (not required, you could also use a child theme's functions.php file) and ShortPixel AI. (repo link)

Let's get started!

Why optimizing your Elementor website is important

In a study done by Google, they found that the slower the page, the greater the bounce rate.

People just don't like to sit there waiting for the page to load. They just saw there was loads of results for their search query, they will just go back and click on another link, if yours doesn't load swiftly. We have all done this.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 1
Results of the Google Study

Another (lesser though still important) reason is that page speed is now a SEO ranking factor. It's a minor ranking factor, but still, it's definitely something to consider in competitive markets.

Stack everything in your favor with a fast website, as well as great content and on page / off page SEO.

The Right Elementor Settings for Performance

First, we will be adjusting the Elementor options for optimal performance and Google pagespeed insight score.

Go to Elementor > Settings > Experiments.

Note that by the time you read this, a few experiments might have moved, or be called slightly differently. You should still be able to find them easily.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 2

Essentially, you will want to activate all of these you see in the screenshot. Active them one by one, and verify that your website is still working as intended after each one of them.

Some of these settings might break some websites, mostly older Elementor sites, and those with many addons.

Then, let's go to the Advanced tab

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 3

6. Set the CSS Print method to External File.

7. You can try changing this to 'Swap' to improve your LCP.

8. Disable Font Awesome 4 Support. If you have font awesome 4 icons on your website though, you will need to replace them in order to keep this disabled.

Dequeue Useless CSS and JS files

In this part of the tutorial we will be removing useless CSS and JS files by creating a few Code Snippets.

Important: These code snippets won't work in the Elementor Custom Code feature, as it accepts HTML only, and the code snippets are PHP. You need the Code Snippets plugin, or you can also paste the code in your child theme's functions.php file.

Learn more about how to properly use the Code Snippets plugin.

Disable jQuery Migrate

jQuery migrate should no longer be needed, yet it often is still loading. After disabling it, validate that everything still works. Some older plugin that haven't been updated in quite a while might still rely on it. For most users, this should work just fine.

Add this code in a new Code Snippet, as follow:

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 4

function remove_jquery_migrate($scripts)
{
    if (!is_admin() && isset($scripts->registered['jquery'])) {
        $script = $scripts->registered['jquery'];
        
        if ($script->deps) { // Check whether the script has any dependencies
            $script->deps = array_diff($script->deps, array(
                'jquery-migrate'
            ));
        }
    }
}

add_action('wp_default_scripts', 'remove_jquery_migrate');

Disable WP Emojis

WP Emojis is what automatically converts texts into emojis. Most websites don't use this. If yours is one of them, get rid of it!

Add this code in a new Code Snippet, as follow:

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 5

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

Disable WP Embed

Don't disable WP  Embed if:

  • You expect others to embed your posts on their site.
  • You are embeddings other's posts on your own site.

Otherwise, add the code below to disable it.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 6

function remove_wp_embed(){
 wp_dequeue_script( 'wp-embed' );
}
add_action( 'wp_footer', 'remove_wp_embed' );

Get rid of the blocks editor CSS files

This is ONLY applicable if you are not using Gutenberg. I personally can't stand it, so I always install the Classic Editor plugin.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 7

If you have the Classic Editor plugin installed and active, your website is probably still loading the block editor CSS files, for no good reason. Create a new code snippet and add the code below to get rid of it.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 8

function remove_wp_block_library_css(){
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'wc-block-style' ); // Remove WooCommerce block CSS
} 
add_action( 'wp_enqueue_scripts', 'remove_wp_block_library_css', 100 );

Results so far

From following the steps above only, on a fresh Elementor install test website with Hello theme, I was able to decrease the requests from 41 to 25, and make the website significantly faster.

Here is before:

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 9

And here is after:

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 10

Optimize Images with ShortPixel AI

Now, let's optimize the images!

My plugin of choice for this is ShortPixel AI, which takes care of everything for  you.

It will dynamically deliver AVIF & WebP version of the images to the browsers that supports it, and PNGs & JPEGs to those that don't. So every visitor will see your images.

It also dynamically compresses, crop, and resizes the images, depending on the users viewport size.

It even delivers the images from it's own CDN!

In short, it takes care of pretty much everything. That's why it's widely regarded as one of the greatest image optimization plugin out there.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 11

You will want ShortPixel AI.

Be aware that it's not free though, after your 500 free credits are spent. It's pretty cheap however, for the convenience and peace of mind it brings. Unless you have some crazy amount of traffic, you are looking at a few dollars a month, or less!

You can purchase credits here.

After installing and activating, let's adjust the settings. Most of them are fine as they are. You can keep the defaults. Here are the few that I recommend changing:

Change the compression level to either Lossy or Glossy. Glossy is a good middle ground for quality and compression.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 12

After this, just below, enable WebP and AVIF.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 13

 

Then, in the 'Behaviour' tab, enable Smart crop.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 14

A bit lower , you will see the lazy-load threshold. Lower that to 300px.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 15

And at the bottom, still in the 'Behaviour' tab, enable New AI engine.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 16

Finally, in the Exclusions tab, you will want to exclude your logo image there, as well as all images that are in the hero sections of your websites (except background images, you don't have to worry about these).

The easiest way to accomplish this is to add the selector 'img.no-lazy-load'.

And then, give your images the class name 'no-lazy-load'.

As Elementor doesn't have any native option to add a class name directly to the IMG element though, you will need to install this very small helper plugin. Use the new field it will add to your IMG element to add the class name 'no-lazy-load'.

Yes, that part is pretty annoying, however it's crucial to have a good LCP (Largest Contentful Paint, a core web vital) score. If your images in the hero aren't excluded from lazy loading, it will invariably lead to poor LCP results.

Get Your Elementor Sites a 90+ Mobile Google PageSpeed Insights Score 17

Finetune WP Rocket for Optimal Performance

As I wrote in the introduction, WP Rocket is the most important part of this optimization process, so I cover it in its own tutorial: How to optimize your Elementor website with WP Rocket.

And here is why WP Rocket is the greatest optimization plugin.

Conclusion

Hopefully this tutorial helped you improve your sites performance! Let me know the results you are getting!

Fancy an awesome full screen navigation?

Elementor premium full screen navigation templates
Comments

12 Responses

  1. As always, thanks for useful tips!

    One thing: Is it necessary to install the "Add class to Elementor Image"-plugin or is it just for convenience? I mean, it's possible to set a class on the elementor-widget, so you can just define a longer selector.

    1. Great question Aske!

      Unfortunately, yes it is necessary. And here is why: If you use a compound selector, like '.no-lazy-load img', where we would have given the 'no-lazy-load' class to the container element of the image, in other words, what happens by default when we add a class under Advanced > CSS Classes, then instead of rendering it on page load, first the JavaScript from ShortPixel would need to run, find out that this image is excluded from lazy loading, and load it.

      So the image would load only after the JS has run, instead of when it's encountered in the HTML. That would be really troublesome for the LCP.

      When the class is directly to the image, it is rendered normally, when encountered, load much earlier.

  2. Hi Maxime, a very helpful guide, but I'm also having an issue with lazy load (I'm using SPAI and WPRocket). The class name plugin you mention only seems to help with the image widget of Elementor. However, I'm seeing lazy load above the fold for blog posts, Author box and Call to action. The class name field doesn't appear here. Whyt can I do to avoid lazy loading there? It's especially prevalent on mobile, as all images only get loaded fully when I scroll the page.
    this is the page in question: https://www.neumann.digital/blog/

    Thanks a lot in advance for your help.

    1. Hey David!

      Yes, this is a problem. Ideally Elementor would add the option to add classes directly to the img in every element.

      However, the only option I see for now is to use a compound selector, and to exclude the shortpixel JS from Delay JS in WP Rocket. Enter this to exclude it : 'spaiCalculateBgClipResize' , without the '.

      So in the excluded selectors for lazy loading, also add this : '.no-lazy-load img'. And then give your element the class 'no-lazy-load', under Advanced > CSS Classes.

      Let me know if that all works! Cheers!

      1. Hi Maxime, I did as you described, but I'm not seeing any change on mobile. I will ask ShortPixel if they have any idea. On the plus side, I managed to get the Lighthous perdomance up quite a bit.
        I'm still having an issue with this page on desktop:
        https://www.neumann.digital/newsletter/
        upon first load on desktop, all the styles are gone. When I reload, they appear. What could be the reason for this behaviour? I'm not observing it on mobile (only the lazy load issue persists).

      2. Hey David!

        It's not properly excluded from the delay JS... I can see the file isn't loading on page load, and only after user interaction. Try to exclude it by adding the file name then: spai-lib-bg.1.0.min.js , or just spai-lib-bg . So that future version will be excluded as well.

    1. Hey Ben!

      When I refer to adding these as Code Snippets, I'm specifically referring to the Code Snippets plugin, as it accepts PHP.

      Elementor Custom Code won't work, as it accepts HTML only.

  3. Hi Maxime, your article was amazingly helpful for my site! I experienced tremendous improvement and my score went to 96. Thank you. However, I am now experiencing a problem in that my Showcase-IDX plugin is not working on the home page at texaspropertysisters.com. I'm pretty much a novice at all of this so I'm wondering if you can point me in the right direction toward a fix?

    Thanks for your help!

    1. Hey Julie!

      The first thing I would try is to disable 'Minify JS'. Now, you are getting an error in the console, and it suggests it might be due to minification.

      If that doesn't work, then you might have ato exclude your IDX javascript file from being delayed. It will defiintely slow your site though as that file is quite large. But, better a working website that's not as fast than the alternative...

      You can send me a message at maxime@element.how for further support!

Leave a Reply

Social Media

Recent Articles