Optimize Elementor for Core Web Vitals Using R.O.S.E.

Core Web Vitals is a standard used by Google to measure overall page web experience. If you’re using Elementor, there’s a lot you can do to optimize your site for high performance.

This article will show you how to turn a poorly configured Elementor site into one that scores big with Google based on a 4-step process called the R.O.S.E. Mechanism (Reduce, Optimize, Simplify, Eliminate). Our member, Nathan Onn, has a whole series on it here.

Core Web Vitals will soon be an SEO ranking factor, so it’s important that you know what they are, how they work and adjust your WordPress site accordingly.

We’re going to break it down and summarize this method based on using our plugins, Smush and Hummingbird — and our managed WordPress hosting.

We’ll be going over:

By the time you read through this, your Elementor site’s vitals will look good with a clean bill of health from Google.

Vitals are looking good! This site is cleared for release.

To get started, let’s check out…

What Are Google’s Core Web Vitals?

Google’s Core Web Vitals focus on the metrics that matter most when it comes to optimization. It’s an initiative by Google that provides guidance for delivering a quality user experience on the web and is a new standard to measure overall page experience.

It’s applied to all web pages and should be measured by all site owners.

Though the vitals evolve and change, currently, the core vitals can help WordPress sites by allowing them to focus on three things:

Loading (LCP – Largest Contentful Paint): This measures loading performance. A good user experience means that LCP should occur within 2.5 seconds when the initial page starts loading.
Interactivity (FID – First Input Delay): This measures interactivity. Good user experience means that pages should have an FID of less than 100 milliseconds.
Visual Stability (CLS – Cumulative Layout Shift): This measures visual stability. Pages should have and maintain a CLS of less than 0.1.

To get a good idea of where your site stands, Google offers a Core Web Vitals report that you can perform. It shows how your pages perform based on real-world usage data.

And for another perspective, you can get a good look at what Google’s Core Web Vitals are in this quick overview video:

As you can see, it’s easy to understand once you know what they are.

Now that we know what Google’s Core Web Vitals consists of, let’s get them implemented! We’re going to set up an Elementor site first and go from there.

Getting the Elementor Site Set-Up

A good example to use for this is going to be a site with some good content on it (e.g., images and text), so I will use the Elementor Product – App page.

Here’s what I’ll be using for the site:

Server: WPMU DEV Hosting Bronze Plan, U.S. West Coast region

Theme: Hello Elementor

Elementor Theme Homepage: Product – App Page

Plugins: Elementor, Smush, Hummingbird, and WPMU DEV Dashboard

PHP: 7.4

The site was created from scratch. None of the designs on the Elementor page has been adjusted or altered. The only thing I have done with it is set it as my homepage.

We’re going to take it from this:

To this:

All of this will be done using the R.O.S.E. method.

If you have an Elementor site, Hummingbird, and Smush installed — follow along and get your site optimized with Core Web Vitals.

It’s always best to start by configuring the theme’s own optimization settings. This will vary, however, depending on which theme you’re using. I set up this Elementor’s theme the same way I stated in this article.

Let’s begin!

Reducing Asset Files to Make Your WordPress Site Much Lighter

We’re going to start by reducing asset files to help make our WordPress site lighter. After all, the more asset files your WordPress site has, the longer it’ll take to load.

To achieve this, we’ll be covering two things:

Combine JavaScript files
Lazy Load Your Images

After getting through all four areas, our asset files will be reduced, paving the way for an optimized site.

Combine JavaScript Files

Combining JavaScript files is easy to do with Hummingbird in the Asset Optimization area.

Set it up to Automatically compress and organize your JavaScript files, or combine them manually by clicking on the Combine icon.

Where you combine javascript files in Hummingbird.

Test them one by one to improve your score. For more information on combining JavaScript files, be sure to read our documentation.

Lazy Load Your Images

Lazy loading your images stops offscreen images from loading until a visitor scrolls to them. This helps your pages load quicker by using less bandwidth and by deferring offscreen images.

You can activate it in one click with Smush in the Lazy Load area.

Once activated, you have additional options, such as choosing what media types to lazy load, including/excluding post types, activating native lazy load, and more (I’ll talk a bit about specific lazy load features in a bit). Find out additional information here.

There are several additional steps you can take as well, such as not using a font library, preloading font files, and removing WP emoji.

More detailed information about these steps and the steps we just covered can be found here.

Optimizing Your Initial Server Response Time

The server response is when you enter a URL into a browser. Once that’s done, the browser sends a request to the server that hosts the site. The server generates a response that’s sent back to the browser. Then, you’ll get a visual of the website.

A few factors that can lead to a slow response include server configuration, code execution, the number of simultaneous connections, and location of the server.

It’s vital to have a fast response time, and when it comes to optimizing your initial server response time, and as you’ll see, there’s a lot you can do. They include:

Use good hosting with HTTP/2 support
Remove plugins you don’t need
Use a Good Caching Plugin like Hummingbird

Let’s check these optimization methods more closely.

Use Good Hosting with HTTP/2 Support

HTTP/2 is a version of HTTP (HyperText Transfer Protocol), which is optimized to make your website load a ton faster, without any extra boost needed from your end of things.

HTTP/2 has a goal of decreasing the latency to improve page load speed in web browsers. It includes improvements, such as binary vs. textual, fully multiplexed, header compression, and more.

If you want to optimize your server response time, you need a good host.

Our very own WPMU DEV dedicated hosting has HTTP/2 TLS (transport layer security) 1.3 by default. It will provide you with an optimized server configuration, which results in much faster response times.

To learn more about our hosting, you can see what it includes here.

Remove Plugins You Don’t Need

This is a self-explanatory task that is easy to do and can help optimize your WordPress site. All you need to do is remove any unused plugins that aren’t necessary.

Unnecessary plugins can bog down your site and cause performance issues. If you’re not using them — get rid of them. You can always reinstall them later if required.

Use a Good Caching Plugin Like Hummingbird

Hummingbird has been brought up several times in this article, and here again, we have to mention her for caching.

Caching improves performance by making pages load fast. Hummingbird offers many types of caching, including page caching, Gravatar caching, browser caching, and RSS caching.

Plus, it’s easy to activate. It just takes one click.

Read more about Hummingbird’s caching skills in this article.

Simplifying Your Content

By now, if you’ve followed along, your Core Web Vitals are well on the way to improving. However, there’s more you can do — especially when it comes to “Above the Fold” content. This refers to the content on your screen that is visible without scrolling or clicking.

We’ll look at how to simplify things by:

Compressing Your Images with Smush
Limiting Your Images “Above the Fold”
Not Putting JavaScript-driven Content In the “Above the Fold” Section

Compressing Your Images with Smush

You’ll want to compress your images for faster loading times.

Like Hummingbird, Smush surfaces again as the perfect solution to compressing images on your WordPress site. Smush makes it easy to do with her Bulk Smush powers that optimizes your images in one click.

Afterward, she’ll let you know how much savings you have in MB.

There are a lot of other optimization options when it comes to your images. Be sure to read more about them here.

Limiting Your Images “Above the Fold”

You should stick with only two images in your “above the fold” section in a perfect world. That consists of your website logo and your hero image. If you have a background image, that’s included in the count as well.

Sure, it’s tempting to add many bells and whistles, but it can really affect your site.

Adding additional images will increase your load time. Having just two images will increase your LCP score. Try to keep it to the minimum.

Do Not Put JavaScript-driven Content In the “Above the Fold” Section

To sum it up, it’s best to keep the “Above the Fold” section clutter-free. This includes anything that has JavaScript-driven content, such as sliders, carousels, animations, etc.

The reason for this is it can cause unexpected layout shifts and more extended LCP elements loading time. Which leads us into…

Eliminating Unexpected Layout Shifts

Above where I mention not putting JavaScript-driven content above the fold, I also touch on unexpected layout shifts. This can happen with, for example, sliders.

Unexpected layout shifts are changes in the placement of features on a webpage. They’re an issue because they can create jumps and pops with animations, making content more difficult to read.

There are different ways that they can happen. They include:

Layout shifts caused by images
Layout shift caused by iframes
Layout shift caused by JavaScript-driven content (e.g. carousel)
Layout shift caused by Google Fonts

It may take some testing to determine the right element that causes a layout shift. However, if you keep looking, you’re bound to find the culprit and fix the issue.

Let’s take a look at each one.

Layout Shifts Caused by Images

If images are causing layout shifts, you can take care of the issue by adding a fixed height and width. By doing this, the size will stay the same and eliminate any shift.

Also, the Lazy Load setting of Smush can help with this issue. This feature stops images from loading until a user scrolls to them.

Layout Shift Caused by iframes

Like with images, you can ensure Lazy Load is enabled for iframes. This helps prevent any layout shifts with videos.

In Smush, it’s one of the options that you can select in the Media Types area.

Where you select multiple media types in smush.

Once you have the iframe clicked (along with the other options), your site will load quicker and help prevent layout shifts.

Layout Shift Caused by JavaScript-driven Content

One layout shift issue you can fix in Elementor itself is one caused by JavaScript-driven content. That includes things like sliders, carousels, and masonry grids.

You can fix this if you’re using the slider widget or carousel widget by adding a fixed height to all different viewports in the Elementor dashboard.

If using a plugin, you can often have an adaptive height option. Make sure you disable this, or a carousel jumps and pops as the image height changes.

For masonry grid plugins, ensure that you have a fixed height to the grid container. By doing that, your grid will no longer fluctuate as a user scrolls down a page.

Layout shift caused by Google Fonts

You can remove Google fonts and use system fonts instead.

There are some issues with preloading Google fonts and more in Elementor, but it won’t fix the issue entirely. You’ll still see some layout shift.

The google fonts load in elementor dashboard.

Hummingbird is soon coming out with a release to optimize Google Fonts. You can check it out in our Test Center (scheduled to be released in a few days).

Passing the Test

After configuring all that I went through, the scores speak for themselves! On Google PageSpeed Insights, my Elementor site scored a 98 (as seen at the beginning of this article). Not too shabby.

One thing to note is that not every technique will work with every site, and you may or may not have to include every step in your optimization process. However, it’s worth testing all the methods mentioned and view what it looks like on your site.

The main goal is to eliminate as many assets as possible, leading to a better Google PageSpeed Insights score.

Have You R.O.S.E to the Challenge of Optimizing Your WordPress?

This was tested with an Elementor site; however, this method can also be used for other themes and site builders.

For a full summary of these methods using our plugins and other options, our member, Nathan, has it covered completely in his article Optimize Your WordPress Site for Core Web Vitals Using R.O.S.E Mechanism.

Be sure to give it a read to get an even better understanding of the R.O.S.E method and optimizing sites like Elementor.

And for more tips to optimize Elementor, be sure to read our article, How to Optimize Elementor for Free Using Our Smush and Hummingbird Plugins.

Your WordPress site’s optimization will be healthy and R.O.S.E.-y in no time!

Contributors

This article was written in collaboration with:

Nathan Onn: WordPress Developer with over 13 years of experience. Nathan is obsessed with building WordPress products, as well as sharing his knowledge with other WordPress enthusiasts.

***

Note: We do not accept articles from external sources. WPMU DEV members, however, may contribute ideas and suggestions for tutorials and articles on our blog via the Blog XChange.