In November 2020, Google announced the addition of three new page experience signals that make up what they call the Core Web Vitals. The Core Web Vitals, which just started rolling out mid-June after being postponed from May 2021, are not expected to roll out fully before the end of August.
What are Core Web Vitals?
The page experience update, which is different from the core update, uses Core Web Vitals as a signal. The two updates are completely unrelated and do not influence each other. Core Web Vitals are a standardized set of metrics that helps to understand the user’s web page experience. While these vitals were created for developers, they can be used by all site owners. Core Web Vitals are a group of factors that are part of Google’s page experience score, which is how Google measures your page’s overall UX. You can check your page’s score in the “enhancements” section of Google Search Console.
The new page experience score will be a combination of factors that Google considers important for a good UX, including:
- Lack of interstitials (pop-ups)
Core Web Vitals identify user experience issues by generating a score for page loading performance, ease of interaction, and visual stability of a page. While there may be noticeable differences in ranking, a good page experience score won’t push you to the top of the SERPs. Google was quick to point out that page experience is only one of the approximately 200 ranking factors and that good page experience doesn’t override having great, relevant content. So, let’s go through all the factors that make up Core Web Vitals and discuss how you can improve your web page’s user experience.
When should I check my Core Web Vitals?
- Highly competitive industry: You can gain an edge while competing against highly optimized websites by improving the Core Web Vitals if your business is heavily dependent on search traffic.
- Slower loading websites than competitors: Your search engine rankings will dip if your website doesn’t meet Google’s standards for page experience, but all of your competitors’ websites do.
- Poor experience for potential customers: A slow website can cause visitors to leave before they even see your content.
- Largest Contentful Paint
LCP is an important metric for measuring user-perceived load speed since it marks when the page’s main content (that covers the entirety of the user’s screen) has likely loaded. Older metrics don’t necessarily express the user’s view on their screens. More recent metrics, on the other hand, only capture the very beginning of the loading experience. If a page shows a loading indicator, it is not a relevant moment for the user.
What is LCP?
The Largest Contentful Paint, or LCP, is how long it takes for a page to load from the user’s perspective. It’s the time between clicking a link to the page to seeing the majority of the content on-screen. It reports the render time of the largest content block visible within the viewport.
What is a good LCP score?
Sites should aim to have an LCP of 2.5 seconds or less, to provide a good user experience. Measure 75% of page loads, divided across mobile and desktop devices, to ensure you’re hitting this target for most of the users.
What are the factors that affect LCP?
- Slow Server Response Time: If the server takes too long to send the content requested by the browser, load time will be more. Since the browser doesn’t receive the content quickly enough, it takes some time for the content to load on your screen.
These scripts and stylesheets are the render-blocking resources that delay the parsing. So the content you requested takes a bit more time before being loaded, which affects the LCP. You can resolve this by removing any unused JS files.
- Slow Resource Load Times: Other files like images, videos, and block-level elements, can also cause poor performance and a bad user experience. LCP is related to the elements at the top of the page, and when the files take too long to load, it causes issues. Optimize images, minify and compress CSS, JS, HTML files, and preload critical assets to manage resource loading time.
- First Input Delay
First Input Delay is an important metric that measures load responsiveness since it quantifies the user’s experience when they try to interact with unresponsive pages. It is hard to measure what impression you make on the users through your site in terms of the site’s visual and design appeal from a user’s perspective. Speed and responsiveness, however, can be measured. The First Input Delay helps measure the user’s first impression of the site’s responsiveness and interactivity.
What is FID?
First Input Delay, or FID, measures the time it takes for a user to interact with your page. Google considers this important because it accounts for how a real-life user interacts with sites. Examples of these interactions include:
- Choosing an option from a menu
- Clicking a link on the navigation bar
- Entering your email or other details into a field
- Opening up accordion content on mobile devices
FID technically measures how long it takes for something to happen on a web page and gives a page speed score. But it also measures the time it takes for users to do something on your page.
What is a good FID score?
Sites should aim to have a First Input Delay of 100 milliseconds or less for a good user experience. Measure 75% of page loads, divided across mobile and desktop devices to ensure you’re hitting this target for most of your users.
What are the factors that affect FID?
Why only consider the first input?
While a delay from any input can lead to a bad user experience, measuring the first input delay is primarily recommended for these reasons:
- The first input delay is the user’s first impression of your site’s responsiveness. It is critical in shaping the site’s overall impression in terms of quality and reliability.
- The biggest interactivity issues occur during page load. So, improving a site’s first user interaction can have a great impact on the overall interactivity of the web.
- The recommended solutions for fixing high first input delays may not necessarily be the same solutions for fixing slow input delays after page load.
What if a user doesn’t interact with your site?
Every user may not interact with your site every time they visit, and not all interactions will be relevant to FID. Some user’s first interactions will occur when the main thread is still busy, and some user’s first interactions will occur when the main thread is completely idle. This means a few users will have no FID values, some will have low values, and others will have high values.
- Cumulative Layout Shift
Cumulative Layout Shift is an important user-centric standard for measuring visual stability, and it helps quantify the frequency of unexpected layout shifts that users experience. A low CLS score indicates a delightful user experience in terms of layout.
While reading an article, you may have noticed something suddenly changing on the page. Sometimes the text moves without warning, and you lose your place. Or worse, you’re about to click a link, but the link shifts, and you end up clicking something else. Mostly, these kinds of situations are just annoying, but they can cause some real damage in some cases.
What is CLS?
Cumulative Shift Layout, or CLS, measures the visual stability of a page while loading. If the elements of a page move around too much as it loads, it indicates high CLs, which is bad. A user maps the layout of a page pretty quickly, and if you have fairly stable elements, they won’t have to re-familiarize themselves on the position of links, images and fields. It also avoids any unintended clicks on buttons or links due to unexpected layout shifts.
A burst of layout shifts is when one or more layout shifts occur in quick succession with a gap of less than one second between each shift and not more than 5 seconds for the total window duration. The Cumulative Layout Shift is a highly relevant metric for user experience; it accounts for 15% of the PageSpeed grade, and as the new ranking factor, it could also affect your SEO performance.
What is a good CLS score?
Sites should aim to have a CLS score of 0.1 or less to provide a good user experience. Measure 75% of page loads, divided across mobile and desktop devices, to ensure you’re hitting this target for most of your users.
What are the factors that affect CLS?
CLS has the most significant impact on mobile devices, which is the most important yet challenging device for performance optimization. Smaller viewport, challenging network and a weaker CPU are some reasons why. The most common factors for poor CLS include:
- Images and videos without dimensions: If you don’t specify the width and height size attributes, the browser will not know how much space it has to allocate while loading these elements. Most likely, the space reserved won’t be enough, and once these elements are fully loaded, they will take more space than expected which results in the shift of the content that has already been displayed. This can be resolved by including image dimensions on images and video elements.
- Ads, embeds and iframes without dimensions: The same dimension issue mentioned above applies to ads, embeds, and iframes as well. Not reserving enough space makes them push down the already displayed content, shifting the page layout. You can avoid this by assigning fixed dimensions to the ads and managing the size reserved for such elements.
- Web Fonts causing FOUT or FOIT: Web fonts can cause layout shifts and result in an unpleasant user experience while rendering the page. You might be facing two different issues: Flash of Unstyled Text (FOUT) or Flash of invisible text (FOIT). If you see the text on the page in an unappealing style, It’s because the custom font takes time to load. Until the custom font is ready, users see the fallback font, which is later replaced. Users can see the font changing on the page and the inevitable shift of the content.
On the other hand, if you have to wait a bit before any text is displayed, it’s because the custom font is still in the process of loading. Users see the content on the page only after the custom fonts have been rendered, which might cause a layout shift.
- Network response delay before DOM update: Sudden loading of resources or addition of DOM elements over the existing content causes unexpected movement of page elements on your site. Websites that are still in the development phase are most prone to problems as everything functions differently, and due to browser cache and local API calls, developers sometimes aren’t able to see the problems yet. However, the end user’s experience might be completely different, and they might even face problems that the developers never experienced during testing.
- Dynamically injected content: Dynamically injected content, such as banners, ads, or Instagram feeds, should never appear above content that’s already loaded. The change caused by user interaction is the only exception to the rule.
Expected and Unexpected Layout Shifts
Many dynamic web applications frequently change the start position of elements on the web page.
- User-initiated layout shifts
A layout shift is bad when the user is not expecting it. On the other hand, layout shifts that occur in response to user interactions, such as clicking a link or pressing a button, are fine when the shift occurs close to the interaction so that the relationship is clear to the user.
For example, suppose a network request is triggered by user interaction and requires a while to complete. In that case, it’s best to show a loading indicator in a created space to avoid an unpleasant layout shift when the request is completed. Also, if the user doesn’t realize when something is loading or doesn’t know when the resource will be ready, they may click something else that could move out from under them while waiting.
- Animations and transitions
Animations and transitions are a great way to update content on the page without surprising the user. Content shifting abruptly and unexpectedly can create a bad user experience. However, gradual and natural movement of content can help the user better understand what’s going on and guide them between changes.
That’s all about the Core Web Vitals. We’ve covered the different metrics that make up the page experience score, factors of grading and suggested solutions to potential issues that may have resulted in a bad score. If you are looking for a digital marketing agency to help you make these changes and optimize your website, you can contact us.