Published 1 Jun, 2021 6 minutes of reading
Like you, Google wants to provide the best experience for its users. This is why they are constantly updating their algorithms to determine which websites offer the best experiences for their users. While content and keywords are important to a page’s rankings, Google also takes a website’s technical performance into consideration—speed, mobile optimization, and the presence of a sitemap.
Last November, Google announced that, starting May 2021, Core Web Vitals would be an additional positioning factor when ranking for search results. Core Web Vitals are now being included among the indicators of a page’s experience for the user. May has already arrived and now these indicators will start to become more relevant for pages to appear in Google results.
In this article, we’ll review exactly what Core Web Vitals are, how to measure them, and finally what you can do in your digital channels to improve your core web vital metrics.
What are Core Web Vitals?
Core Web Vitals are metrics that indicate the time it takes for a user to interact with a website. Specifically, the speed, responsiveness and visual stability of a page. These metrics are one of the factors that Google evaluates to measure the user experience on a site and, as of May 2021, are critical for positioning on Google, which directly impacts SEO strategies.
Specifically, there are three Core Web Vitals:
- LCP (Largest Contentful Paint): the time it takes for a page to load and render the main and largest content of the graphic window, which will determine the loading speed perceived by the user. It is recommended that the LCP should not exceed 2.5 seconds.
- FID (First Input Delay): the time it takes for a page to become interactive. The faster this occurs, the better the user experience will be. In this case, the ideal time is less than 100 milliseconds.
- CLS (Cumulative Layout Shift): the total time in which unexpected visual changes can occur in the site design, and is expected to be less than 0.1.
Below are the numbers used by Core Web Vitals to assess the page's quality from good to poor.
Now, LCP, FID and CLS become part of the user experience metrics along with mobile optimization, secure browsing, HTTPS protocol and intrusive interstitial ad guidelines.
How to measure Core Web Vitals
Almost more important than knowing what Core Web Vitals are, is knowing how to measure them to find out if your site is in the right threshold, as well as the improvements you can make to get closer to the recommended values.
Google talks about 6 tools and extensions that can help measure Core Web Vitals:
Of these, Search Console and the Lighthouse extension are the ones we have the most experience with at Modyo. The rest of the tools offer more specific details for those who need to work on performance-related site improvements.
Search Console
Last year a specific section was added to Search Console where you can review the Core Web Vitals of a site, get details of the performance of all of a site's pages, and know which groups to pay attention to.
Lighthouse
This tool is deployed when inspecting a page and allows you to audit it in terms of Performance, Accessibility, Best Practices and SEO. The Performance report will reflect the Core Web Vitals metrics and will generate warnings and alerts about them. It's important to pay attention to the red and orange numbers as we don't want these indicators to worsen the site's the user experience.
How can we improve Core Web Vitals using a Digital Experience Platform?
At Modyo, we know how important Core Web Vitals are for positioning a website in search engines, which is why we apply several practices so that the SEO performance of our pages meet Google’s new requirements.
Page Loading Optimization
Quickly load default fonts
With the JavaScript Web Font Loader library, we load fonts asynchronously. This improves Core Web Vitals because when a page loads, the default fonts are used, which prevents a delay during the first load and improves the FID (First Input Delay). Quickly after, the font switches to the downloaded font.
Load images asynchronously
Image loading is done asynchronously with Google's recommended library, lazySizes, which loads resources on a needs basis rather than in advance. This frees up resources during the initial page load and avoids loading elements that will never be required.
Render content on the server side
By using Liquid as a templating language, rendering content loaded in Modyo occurs at the server level and not at the browser level, which improves performance and positively impacts the SEO of the site.
Platform-enabled best practices
Make your pages accessible
Make your pages accessible We make sure that sites comply with the accessibility principles from the World Wide Web Consortium (W3C), the main international organization that generates standards that ensure the long-term growth of the World Wide Web.
Use modern image formats
The platform supports state-of-the-art image formats such as JPEG 2000, JPEG XR and WebP, and we optimize and always load them at the size they will be used.
Avoid loading unnecessary libraries
We avoid calling JavaScript libraries that are not being used on the site's pages by creating layouts, JavaScript sheets and CSS style sheets that avoid loading all the code on the entire site. This allows us to optimize and prioritize some sheets.
Avoid pop-ups & layout-shifting elements
We do not usually promote the use of pop-ups or external elements that alter the user experience and affect the CLS (Cumulative Layout Shift).
Architecture & Delivery Optimization
Use Progressive Web Applications
We develop Progressive Web Applications (PWAs), that is, when you have already visited a site from your cell phone, you can save it and it behaves as a native application with its own icon. In addition, you can install the application on your computer desktop or on your mobile as an app and increase the browsing speed as the site is stored in the device's caché memory, as well as use your phone’s native APIs to check if you have a signal or not.
Choose when to load elements asynchronously
We work with Micro Frontends that load asynchronously once the page has loaded. Likewise, we can make the loading synchronous when widgets have little weight, thus improving the CLS (Cumulative Layout Shift), or when their asynchronous loading could affect the visualization of the site.
Cache your pages
We implement multiple cache layers, which reduce the number of requests that reach the application servers, improving performance and reducing response times.
Stick to HTTPS, not HTTP
We protect sites with HTTPS (Hypertext Transfer Protocol Secure) protocol, since Google only indexes pages that use it, arguing that it protects the integrity and confidentiality of user data between their computers and the website.
Summary
In short, it is now more important than ever for sites to consider user experience indicators, because these indicators set the new standard for what Google and other search engines will ultimately display on page one of user search results. You must pay attention to any and all aspects of your site performance that will help reduce load times, allow users to interact quickly, and avoid shifting the page layout. Ultimately, there is now even more focus on the fundamental elements of what constitutes a good user experience, and we all need to rise to meet this new standard.
If this is something that you’re interested in exploring further, we have a platform dedicated to solving challenges like this, and much more. If you’d like to get in touch with us directly, we’d be happy to learn more about your ideas and what types of experiences you’re looking to provide your users.
Photo by Gustavo Campos on Unsplash
