Google has announced a major new update. And because Google only does something like this very rarely - and certainly not with so much advance notice - one thing is clear: it must be damn important.
Web Vital Metrics: the new be-all and end-all for page speed
The Page Experience Update for 2021 was first announced back in spring 2020. Now it has become more concrete: The major update relating to Google Web Vitals will be rolled out in May 2021. Website operators and developers should now use the long preparation time to familiarise themselves with the new metrics. Because from May 2021 at the latest, the new ranking factor will recognise poor performance with corresponding losses in visibility.
The key areas surrounding the update include mobile-friendliness, safe browsing, HTTPS, the elimination of annoying interstitials and the new measurement of loading times. In future, only the new Google Core Web Vitals will be used to determine these. That's why we're presenting the 3 new Google Core Web Vitals metrics in detail today and showing you what you need to bear in mind to avoid losing rankings.
User experience (UX) is becoming the new ranking factor
The basis of good rankings is and remains good content. For some time now, the requirement for mobile friendliness and good page speed has been added to this. With the Core Web Vitals and the associated new metrics LCP, FIC and CLS, Google is making it clear which discipline will now also have a strong influence on the rankings of websites: User Experience (UX).
Google has repeatedly pointed out in the past that the page experience - or UX - is a decisive factor in whether visitors like a page. You don't need to be an expert to understand this. For example, if content on a smartphone is not responsive and therefore far too small, many users will leave. The situation is similar if it takes several seconds before the page load is complete enough for users to be able to do anything with the page.
However, UX as a web discipline is more than just speed and mobile optimisation. Layout and interactivity also play a major role in the user experience. This means that we need to understand this discipline better in order to respond to the new ranking metrics. But to build this understanding, let's first look at how Google currently ranks the user experience of a site.
Google's previous metrics: imprecise and complicated
The search giant from California has developed detailed scores for the initial loading of content, the loading of relevant content and the interactivity of websites. Until now, the metrics could be divided into the following areas:
How quickly is content loaded?
Time to First Byte
First Paint
First Contentful Paint
Is the content relevant or meaningful?
First Meaningful Paint
Speed Index
Visually Complete
Is the content interactive?
Time to Interactive
Total Blocking Time
Does the interaction run smoothly?
Frame Rate
However, there were often problems explaining exactly what was behind certain metrics. The First Meaningful Paint in particular was always difficult to track and could be heavily influenced by fluctuations in rendering. The new Core Web Vitals are intended to put an end to these metrics problems. But what exactly is behind them?
First new metric: Largest Contentful Paint (LCP)
This new value replaces the rather nebulous concept of First Meaningful Paint (FMP). This was set in the middle of the loading process, was often subject to strong fluctuations and was therefore almost impossible to optimise.
Google was therefore looking for a new metric that, in addition to the First Contentful Paint and the Time to Interactive, would make it possible to measure what happens in this time period. And this is where the LCP comes into play.
What is the Largest Contentful Paint?
The Largest Contentful Paint (LCP) is the duration for rendering the largest visible element in the viewport.
Google uses Contentful to refer to images, videos and texts. All images are included, regardless of whether they are loaded in the foreground or background. Videos, their thumbnails and all types of text are also included.
The largest element is determined based on size and width, but margin, padding and border are not taken into account. The smaller value is used for reduced images, the smaller value is used for enlarged images and the visible part is calculated for images that are only partially visible in the viewport.
The duration of the rendering is calculated differently for texts than for images and videos. For text elements, the drawing of the first font applies here. This also applies if fonts are loaded later and the text is drawn again.
For images and videos, it depends on where they are loaded from. If images and videos have the same origin, the time at which the image or video is drawn after the onload event is used for the calculation. If the origin is different, the so-called Timing-Allow-Origin header applies. If this is not available, the process is the same as if the elements have the same origin.
LCP loading times of up to 2.5 seconds are OK
Each loaded element is continuously re-evaluated. However, as soon as a user interacts with the page, e.g. clicks, the evaluation of the LCP is stopped. The stop after clicking or scrolling is necessary because only the first impression within the user experience should be evaluated. Elements that are removed from the Document Object Model (DOM) of the HTML or XML documents on dynamic websites are not included in the measurement. However, it is still unclear what will happen to elements within a carousel, for example.
According to Google, site operators need to take action if LCP loading times exceed 4 seconds. LCP values of up to 2.5 seconds, on the other hand, are appropriate and can be regarded as a guideline. It is important to note that Google currently refers to study values that show when users leave pages or do not carry out any further interactions.
Second new metric: First Input Delay (FID)
One thing is at the centre of modern websites: the interaction of the user with the page itself. Google therefore not only wants to measure the loading time of a page, but also its ability to interact. The two other new metrics are dedicated to precisely these properties. But let's first look at the First Input Delay (FID), as this addresses a common problem that regularly causes many users to leave websites as quickly as possible.
You think you are clicking or pushing an interaction, but the page simply doesn't respond. This behaviour has a huge impact on the user experience. Actually, everything that comes into view should intuitively drive the customer journey and not be an obstacle. With the FID, Google tries to capture the impression that a user gets in this initial phase of the page experience.
FID values below 100ms are good
Google itself states that values below 100ms are considered positive. However, in order to achieve this, the evaluation must not be distorted. Google therefore recommends
„While choice of percentile for all Core Web Vitals thresholds is the 75th, for FID in particular we still strongly recommend looking at the 95th-99th percentiles, as those will correspond to the particularly bad first experiences users are having with your site. And it will show you the areas that need the most improvement.“
Third new metric: Cumulative Layout Shift (CLS)
For many users, a negative page experience also occurs when elements of a website shift during the loading process. While a button is still in one position one moment, it jumps to another the next. The result is that users end up on unwanted pages or involuntarily click on advertising banners. From the user's perspective, this is an incredibly frustrating experience that often has a very negative impact on the perception of an entire domain or brand.
This problem is particularly widespread on mobile devices. Due to the different display sizes and reloaded content, there are often unexpected shifts on the website. The Cumulative Layout Shift (CLS) metric is designed to counteract precisely this problem.
What exactly is the CLS?
The Cumulative Layout Shift (CLS) is a metric that evaluates the layout stability of a website. Only layout movements that are unexpected for the user are measured.
In order to make such movements measurable, different parts within the viewport are set in relation to each other and a so-called layout shift score is calculated on this basis. What is interesting for developers is the fact that CSS image carousels can lead to repeated shifts in the layout. This significantly increases the CLS. However, as long as a carousel is implemented with the transform animations, the CLS value should - according to Google - not inflate. In addition, interaction via input - for example, a click that loads further information by unfolding - should be permitted with a time window of 0.5 seconds.
Measured values for pagespeed significantly lower in Lighthouse 6.0
Lighthouse version 6.0, in which the new metrics are already integrated, has been available for some time. In comparison with Lighthouse 5.0, however, the Web Vital metrics relevant for pagespeed are often different, usually significantly worse. However, as already mentioned, the values are based on simulated laboratory values. Real field data therefore often lead to completely different, usually lower values. Nevertheless, they serve an important purpose: to make weak points more comprehensible for website operators, developers and SEOs and to enable a more reliable evaluation and comparison between competitor sites.
Tools for checking the core web vital metrics
Lighthouse 6.0(Link)
The new version enables the measurement of LCP and CLS directly in the Chrome browser. However, the FID is missing, as Lighthouse only simulates and no real, active input comes from the user themselves. Therefore, the Total Blocking Time value must be used as a lab value.
Google Search Console(Link)
A new tab has been introduced here, which displays the 3 metrics for the linked project. However, these values in the GSC are relatively superficial and only serve as an initial rough orientation.
Webpagetest.org(Link)
The old acquaintance webpagetest.org offers the possibility of automatically analysing several values via JSON for a large number of URLs at once.
PageSpeed Insights(Link)
The test tool provided by Google is also ideal for analysing the values. Our developers also use this tool for pagespeed analyses at TOWA in order to identify optimisation potential. Incidentally, the anonymised data is taken from the Chrome User Experience Report (CrUX) and is also used in a generalised form in the Google Search Console.
Screaming Frog SEO Spider(Link)
With this established SEO tool, the values for each individual URL of a website can be retrieved relatively easily. The only requirement is a valid API key to Google's Pagespeed Insights API. LCP, FID and CLS can then be queried under the menu item "Lighthouse Metrics". The Screaming Frog not only outputs laboratory values from Google PageSpeed Insights, but also returns real user data from the Chrome User Experience Report.
Of course, more complex query methods are also offered via scripts and APIs, which can be found in Google's Web Dev Forum. The Chrome browser extension Web Vital Extension is also suitable for quick queries of individual pages.
Tips for optimisation
The current values for the CLS and the LCP are best viewed with the Chrome Developer Tools. The CLS can be visualised via "More Tools" -> "Rendering" -> "Layout Shift Box". If the checkbox is ticked, changes to the layout are displayed.
To start the actual optimisation after the analysis, it is advisable to consult Google's info pages from the Web Developer Forum:
- Tips for CLS optimisation: (Link)
Outlook
For website operators, SEOs and developers, these new metrics should represent central KPIs and their values should be checked regularly. Because if a domain has many URLs that are in negative territory for one of the three metrics, there is an urgent need for action. It remains to be seen how the ranking losses or gains from May 2021 will materialise in reality. It is difficult to make predictions here. However, you should keep an eye on the values of your direct competitors and the competitive environment in order to be able to estimate a benchmark.
No worries, we will make it.
Senden Sie mir eine E-Mail und ich melde mich bei Ihnen!