An intro to web accessibility: building a digital world for everyone
Discover accessible web design, its impact on users and its business benefits. From WCAG 2.2 to key accessibility features, here’s an intro to inclusive sites.Read More »
Craig Greenup 21/12/22, 11:36
User experience is a critical component of any website. By providing a smooth user experience to website visitors, users can quickly find what they are looking for and avoid confusion.
Google’s Web Vitals provides guidance to help website managers, developers, and marketers identify specific areas where they can improve user experience. This article will focus on Core Web Vitals; these are the key metrics developers can use to enhance the user experience of every website. Google’s Core web vitals measure actual website usability, making them powerful metrics for identifying real-world user experience issues.
There are three Core Web Vitals;
Largest Contentful Paint (LCP) is the time it takes to load the largest piece of content on the web page. Website speed is critical; we live in a fast-paced society where immediacy is highly valued. Slow websites frustrate users and lead to high bounce rates. When a website loads quickly and the user has immediate access to the content they’re expecting, the experience provided is much more positive, which reflects on a user’s view of the company and or brand. The largest piece of content in this measurement refers to an image or block of text; LCP measures the time it takes for the largest element to load fully. Other aspects of the page may load before or after the largest piece of content; the LCP time is determined by the largest piece of content only. LCP may change and recalculate as the page loads, adding more elements.
LCP is reported as poor, needs improvement or good, depending on the speed at which the largest element of the page is loaded. A good score can be achieved if the largest element is loaded in under 2.5 seconds. A needs improvement score spans from 2.5 seconds to 4.0 seconds. Anything above 4.0 seconds is considered a poor score. The final website score is based on 75% of the individual page scores. If 75% of the scores are rated as good the whole website will get an overall score of good in the LCP factor. Mobile and desktop are separated into two different scores for every website.
First input delay is an important measurement that quantifies how easy it is to interact with a website. FID is a measure of how quickly your website reacts to the user’s action; this could be clicking on a button, a dropdown or a link on the webpage. The FID measures the delay between the action of the user and the website responding to the action. It doesn’t measure the time it takes to complete the action; this is to avoid developers creating workarounds that may impair user experience but would improve the score. First input delay only focuses on the user’s initial action on the site; this is the key point where a user assesses the website experience and forms their initial impression of the website. Any latency between the user’s action and the site response can harm the visitor’s view of your company. Additionally, the first input often happens at a time when the server is busy loading other elements of the page. Measuring and improving this delay is a more critical and better indicator of a website’s performance compared to interactions later in the user journey.
Input delay varies considerably between users, depending on a multitude of factors. It is, therefore, vital to look at the majority of users’ FID. First input delay is also reported as poor, needs improvement or good, and scores are split for mobile and desktop. A good score is a FID of 100ms or less. A needs improvement score is between 100ms and 300ms. A poor score is a time of 300ms or more. The overall score for the website is based on 75% of the user’s experience. However, Google recommends looking at a much higher percentile of 90-95% for FID to consider variances.
Cumulative Layout Shift (CLS) measures the unexpected movement of elements on a page. When this occurs, it can be annoying and confusing for users on the website. In some cases, it can also cause mistakes in ordering products or cancelling items. Unexpected movement happens because elements are continuously loading on the page, which can shift other elements. Cumulative Layout Shift measures how frequently this happens during real users’ experience, so the website managers and developers can understand issues website visitors face when using the site.
A layout shift occurs when an element moves position on the page between one rendered frame to the next rendered frame. CLS measures unexpected layout shifts. On some occasions, elements need to move between rendered frames; these are considered expected layout shifts. An example would be when a user clicks a button on the site; there is an expectation that the layout will change; this isn’t considered in the CLS score. Only unexpected shifts in elements are counted. One example is when the content on a page shifts because the ad frame size changes.
Cumulative Layout Shift (CLS) is scored based on the same three scores as LCP and FID. A website scores poorly if the CLS is 0.1 or less. A needs improvement score is between 0.1 and 0.25. A poor score is 0.25 or more. Google scores the whole website by looking at 75% of the total scores. The CLS score is calculated by looking at how far elements move on the page and how much they impact the area that is in view, also referred to as the viewpoint. Google calculated the CLS score based on these two factors combined.
You can find details of your website’s Core Web Vitals scores in Google Search Console within the experience section. Google Search Console provides a graph that shows how many of your web pages fall into each scoring category and how this has changed over the last three months. You can click to see the full report, where you can dive into the details and find examples of the URLs in each category and the exact scores for each element. If you can’t find the data within Google Search Console, it might be an issue with the data threshold. Google won’t display scores for your website if it doesn’t have enough data; in this case, you can use one of the tools mentioned below to run a detailed manual report on a single webpage.
Google Search Console is an excellent way to get an overview of your Core Web Vitals scores, but it doesn’t provide full details of precisely what needs to be fixed. To get the full details of each element and Google’s recommendations of what to fix, you can use Google Lighthouse or Page Speed Insights. Google Lighthouse is a developer tool which provides a full report on performance, accessibility, best practices and SEO for your website. Page Speed Insights is a similar tool which provides an overall Core Web Vitals assessment of a particular page on your website and details of what you can do to improve the scores.
As with all of Google’s metrics, Core Web Vitals will continuously evolve to consider new developments and practices. Keeping on top of any changes to Google’s measurements is essential for managing a website or several websites. If you use an agency or developers to manage your website, they should be aware and inform you of any changes that need to be made to improve your website based on new standards. However, every marketer and business owner should have some basic knowledge of Google updates and how they might impact their business.
Google’s web vitals are an important way to measure a website’s usability. A website that scores highly in the Core Web Vitals metrics is more likely to see visitors spend more time on the website and a higher conversion rate. Poor user experience is a common reason why people leave websites; they become frustrated or confused and try another website instead. In addition to this, Google has confirmed that the Core Web Vitals metric is a ranking factor. Page experience is one of the many signals Google uses to determine where a website ranks, but it is not the most critical factor. Relevancy is one of the most critical ranking factors for all websites. However, suppose you’re competing with several other companies for the top position. In that case, the Core Web Vitals metrics become more important and can help your site achieve and remain at position one. By making sure you optimise your website for LCP, FID and CLS, you can help to improve your rankings in the SERPs, and users are less likely to exit your website because they become frustrated or confused.