Core Web Vitals for better user experience
- What’s Core Web Vitals?
- How to measure Core Web Vitals for my website
- Workflow to improve your user-experience with Core Web Vitals
- Optimize Largest Contentful Paint (LCP)
- Optimize First Input Delay (FID)
- Optimize Cumulative Layout Shift (CLS)
- Additional notes
It is a fact that users prefer websites with a great page experience.
Over the years, Google has added UX factors as criteria for its search engine to build the ranking results. Some of these are the performance and mobile friendliness of websites.
Earlier this year, Google announced that the search engine is now including Core Web Vitals as the foundation for evaluating page experience. Therefore, optimizing for quality of user experience is key to the long-term success of any website.
What’s Core Web Vitals?
Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
Core Web Vitals are the subset of Web Vitals that apply to all web pages. They are metrics related to speed, responsiveness and visual stability, to help site owners measure user experience on the web.
According to Google:
“Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience. They measure dimensions of web usability such as load time, interactivity, and the stability of content as it loads (so you don’t accidentally tap that button when it shifts under your finger – how annoying!).”
The metrics used by the Core Web Vital signal will evolve over time. But as of 2020 they are:
Largest Contentful Paint (LCP)
It measures perceived load speed and marks the point in the page load timeline when the page’s main content has likely loaded. A fast LCP helps reassure the user that the page is useful.
To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
First Input Delay (FID)
It measures responsiveness and quantifies the experience users feel when trying to first interact with the page. A low FID helps ensure that the page is usable.
To provide a good user experience, pages should have a FID of less than 100 milliseconds.
Cumulative Layout Shift (CLS)
It measures visual stability and quantifies the amount of unexpected layout shift of visible page content. A low CLS helps ensure that the page is delightful.
To provide a good user experience, pages should maintain a CLS of less than 0.1.
How to measure Core Web Vitals for my website
All of Google’s popular tools for web developers now support measurement of Core Web Vitals, helping you more easily diagnose and fix user experience issues. This includes Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, web.dev’s measure tool, the Web Vitals Chrome extension and a new Chrome UX Report API.
Workflow to improve your user-experience with Core Web Vitals
- On your Google Search Console (GSC) go to the Core Web Vitals report to identify groups of pages that require attention for improvement.
- For each page that needs attention, use Google PageSpeed Insights (PSI) to identify issues around the metrics “Largest Contentful Paint”, “Total Blocking Time” (it correlates with FID) and “Cumulative Layout Shift”.
- Work locally on the recommendations provided by PSI using the Lighthouse dev tool to measure Core Web Vitals and get actionable guidance on exactly what to fix.
- To access Lighthouse, click F12 on your Chrome browser and you will see the tool as a tab of the developer tools.
- You can then run a performance report.
- You can also install the Web Vitals Chrome extension to get a real-time view of metrics on desktop.
- Deploy your changes and analyse the improvements with PSI then enjoy the better metrics reported by GSC.
Optimize Largest Contentful Paint (LCP)
LCP measures when the largest content element in the viewport becomes visible.
This is usually associated with the hero image of the page, but there are other factors involved, both from your website and externally.
Things to look at:
- Your hosting: a faster server response will improve LCP. If you run your website on WordPress we recommend using Pantheon as your hosting provider. They provide a fast hosting infrastructure, alongside effective cache mechanisms, a CDN and SSL certificate.
- Website cache: adding a cache mechanism to your website will help you serve your content from its cached version, minimising the number of times your web server needs to get the data from your database server. Autoptimize is a great WordPress cache plugin that will help you compress and optimise your assets and pages, as well as preconnect some external domains for faster rendering. Pantheon maintains the WP Redis plugin, which is seamlessly integrated with their Redis cache system.
- Website code: CSS and JS should be minified and deferred if not critical. Commercial themes usually take care of this if they follow good practices. If you are creating a custom theme, make sure you use the best practices recommended by WordPress.
- Images: Optimize and compress images. If you don’t have any image optimization tool at your disposal, you can use the online tool Iloveimg to convert your images to the right format and size, and compress them to an optimal resolution. Additionally use an image CDN like Cloudimage for even better performance.
More information: https://web.dev/optimize-lcp/
Optimize First Input Delay (FID)
FID measures the time from when a user first interacts with a page (actions like clicks, key presses and entering text in fields) to the time when the browser is actually able to respond to that interaction.
FID requires a real user interaction in order to measure the response delay, so it cannot be simulated at the lab. Google recommends to look at the Total Blocking Time (TBT), a metric that, when improved, has a direct impact in the improvement of the FID.
Things to look at:
- Review the 3rd party scripts that you are using and make sure that they are coming from a CDN and are minified.
- Review 3rd party widgets that you are using (social media widgets for example) and try to include as few as possible.
More information: https://web.dev/optimize-fid/
Optimize Cumulative Layout Shift (CLS)
CLS measures how much content on the page moves about during the load.
This is usually caused by unstructured images, dynamic ads, embeds, and web fonts.
Things to look at:
- Add width and height attributes to your images and video elements.
- If you have 3rd party ADS on your page, you are probably setting their placeholders dynamically to allow these slots to expand or collapse depending on the AD. You could try to predefine the AD slot area or move them down the middle or the bottom of the page, so they shift less elements than if they were at the very top of the page.
- Review embeddable widgets and iframes that can cause content shifting when loading (maps, social media posts, etc). Try to define the height of your embeds to minimize the amount of content that will be shifted down when the page loads.
- If you use a custom web font, use the preload attribute to get the browser to load the font early in the page lifecycle. This will increase performance and will reduce CLS.
More information: https://web.dev/optimize-cls/
To test the mobile-friendliness of your website you can use Google Mobile-Friendly Test tool.
As a Leading London User Experience Agency, we’ll be very pleased to help you put all this into practice to help you optimise your website.