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.
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.
You can see the time for each vital, too.
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.
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:
67. We can do better.
98 is a great score!
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.
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:
After getting through all four areas, our asset files will be reduced, paving the way for an optimized site.
You can do this individually or in bulk.
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.
One-click is all it takes to activate lazy load.
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.
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
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.
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…
Eliminating Unexpected Layout Shifts
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:
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.
Choose a duration and delay for animation.
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.
Select multiple media types at once.
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.
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.
Example of where you can adjust Google Fonts Load in Elementor.
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.
At Marketing Solution Australia we strive to deliverer elegant responsive websites for your business integrated with our personal SEO Optimization package to bring your pages on the first page of Google.