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.
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.
Elementor Product – App page.
Here’s a view of my example site.
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:
67. We can do better.
To this:
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.
Let’s begin!
read our documentation.
additional information here.can be found here.
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.
in this article.
read more about them here.
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.
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.
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.
