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’ll be going over:
- What Are Google’s Core Web Vitals?
- Getting the Elementor Site Set-Up
- Reducing Asset Files to Make Your WordPress Site Lighter
- Optimizing Your Initial Server Response Time
- Simplifying Your Content
- Eliminating Unexpected Layout Shifts
By the time you read through this, your Elementor site’s vitals will look good with a clean bill of health from Google.
To get started, let’s check out…
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.
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
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:
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.
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:
- Lazy Load Your Images
After getting through all four areas, our asset files will be reduced, paving the way for an optimized site.
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.
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.
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.
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.
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”
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.
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.
The reason for this is it can cause unexpected layout shifts and more extended LCP elements loading time. Which leads us into…
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 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.
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.
Once you have the iframe clicked (along with the other options), your site will load quicker and help prevent layout shifts.
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.
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.
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.
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!
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.