Google’s desire is to optimize and improve the results that are shown to its users. In line with this effort, Google announced that Core Web Vitals metrics will be a ranking signal from May 2021.
Recommended: We can help you grow your organic traffic with SEO services focused on your revenue.
In this article we will explain what they are, how to measure them, and how to optimize your website according to best practices. We’ll include our experience of optimizing this website getting the following results:
Desktop results:
Mobile results:
What are Core Web Vitals?
Core Web Vitals are a set of metrics that evaluate the experience a user has when loading a webpage on a desktop or mobile device.
By this point everyone knows that the performance of a website matters. The faster the better, but hitting a good number on Google PageSpeed Insights or GTMetrix is not enough.
These metrics are created to focus on what matters the most: loading the page (LCP), time to interactivity (FID), and visual stability (CLS).
- Largest Contentful Paint (LCP): measures the perceived loading time it takes for the main element of the page to appear. The ideal value for LCP is less than 2.5 seconds.
- First Input Delay (FID): measures the time it takes for the page to become interactive. This means how long it takes until a user can scroll or click on an element, such as a button. The ideal value for FID is less than 100 milliseconds or 0.1 seconds.
- Cumulative Layout Shift (CLS): measures the visual stability or shifting changes. Pages where ads are loaded and move the content around can be annoying for users when they’re reading or try to click a link. This can also be affected by loading fonts that change their size, or images without defined dimensions. The ideal value for CLS is less than 0.1 seconds.
How to measure Core Web Vitals
The easiest way to measure these metrics is by using PageSpeed Insights or a Chrome extension. But if you have a bigger site and want to measure across different types of pages, you can create a CrUX dashboard; use Sistrix, a website crawler that renders the website as a user; or use Google Analytics.
Understanding the metrics
The PageSpeed Insights tool from Google shows an entire table dedicated to these metrics, which is very intuitive to understand as it uses colors (red for bad, green for good).
Once you start analyzing your webpage it will give you suggestions on how to optimize that specific page. For example, in our case it says “remove unused CSS” – this is because we use Elementor to create our pages and that adds a bunch of styles from all our page templates.
New Chrome Extension
This extension will measure and highlight the three key metrics of Core Web Vitals, and give you an understanding of what elements contribute to the scores and how to fix them. It will also log the HTML elements that shifted the layout. Get the extension here.
Creating a CrUX dashboard
We encourage you to read Sam Underwood’s article on how to create a CrUX dashboard to track your projects and your clients’ websites in Data Studio here.
This is the result when creating a copy of the template for Key Content’s site:
Measuring with Sistrix
Add your domain, go to Structure > Core Web Vitals, and you’ll find the recent results:
Then you can see the evolution trend of your site, with different colors used to identify easily when something is wrong or what optimization is working well.
You can also find the performance by country:
With all this information it would be easy to create your own dashboard to follow the results for:
- Your clients’ websites
- Your projects
- Your competitors’ websites
This shows the competitors in the beauty industry:
Using Google Analytics
Matteo Zambon from TagManagerItalia has written a great guide on how to track Core Web Vitals with Google Analytics using Google Tag Manager here.
In six steps, you or your developer can implement the code needed to collect the data from your users. Once you start to collect all the information, you can take action and begin optimizing your site.
How to improve your Google Core Web Vitals scores
The following recommendations will help improve your page speed as well as the final user’s experience with your site:
Improving LCP metrics:
- Improve server response time
- Eliminate JavaScript and CSS blocking features
- Decrease resource loading time
- Optimize the rendering of front-end elements
Optimize FID metrics:
- Reduce JavaScript elements and runtime
- Minimize the work of the main element of the page
Reduce CLS metrics:
- Always include exact dimensions for the images
- If your site uses lazy load for images, ensure that the exchange will not change the position of the elements
- If your site uses custom fonts, consider switching font-display:swap for block
- If your site uses ads, ensure a fixed-size area for them until they are loaded
Learn more about how to improve your Core Web Vitals score from Techbeatly.
Improve your WordPress site with one plugin
I worked with WordPress for more than a decade, and improving the page speed is really hard. I tried many cache plugins (WP Fastest Cache, WP Rocket, WP Super Cache, W3 Total Cache and many more), as well as CDN services (StackPath, Fast.io, KeyCDN, CloudFront . . .) and a long list of image plugin optimizers.
Recommended: We offer WordPress SEO services to help you grow your organic traffic.
And then I tried NitroPack – it’s a mix of advanced caching, CDN, image and HTML optimizer that just works. We are not affiliated with NitroPack; the following is our honest opinion.
Before NitroPack our results were bad. We use Elementor for the design, which adds lots of assets to make the website pretty but comes at a high cost in terms of loading. We were using five plugins to improve the speed of the site, but now we’ve deleted all of them and only use Nitropack. It’s free and it works blazing fast.
Conclusion
Do your homework – don’t wait until May 2021 to optimize your site. Start small, measure, test, and prioritize things that can get you the bigger results.
Reducing JavaScript elements and optimizing images can help you boost your speed by a few seconds and reduce the overall size of the page. Switching to a better server, transitioning to static content with technologies like Jamstack or implementing a Content Delivery Network (CDN) can all help as well.
