Core Web Vitals: the parameters that are changing the rules of ranking
The new parameters introduced in the Google Page Experience update principally deal with Core Web Vitals and aim to measure the key elements which influence the real user experience during a browsing session (they are not based on simulations but on real data generated from website use by real users). If one, or worse still, none of these parameters are optimized, the consequences can be dire for a website’s ranking position and consequently, will negatively impact not only ecommerce businesses, but all businesses.
Introducing Core Web Vitals: Largest Contentful Paint
There are three new Core Web Vitals, the first being Largest Contentful Paint. However, before going into more detail on advice for optimization for a user’s better UX, let’s run-through them quickly.
The main new parameters introduced by Google are as follows:
- Largest Contentful Paint (LCP): it measures the render time of the largest image or text block visible within the viewport, relative to when the page first starts loading. We are going to investigate the most challenging element of our section, the one that will cause us the most problems in loading the desired resource.
- First Input Delay (FID): it measures how quicky a site responds to a user’s first interaction. It considers the time taken between when a user first interacts with a page in any way (i.e. when they click on a link, tap on a button etc.) to the time it takes the browser to be able to begin processing event handlers in response to that interaction. We are therefore dealing with a more generic metric that captures the loading experience as we are going to analyse the time that passes from when the page starts to load until the content is displayed on the screen.
- Cumulative Layout Shifts (CLS): is the sum of all the individual movement of visible elements on the viewport during loading. By catching every movement of the graphic structure, this factor basically measures a page’s visual stability while loading content, be it text, images or videos.
Google considers each one of these factors as of equal and fundamental importance in its evaluation of the user experience. Ultimately, this means providing a correct, fluid and pleasant use of site content to achieve a good score for ranking purposes. But it is no accident that Largest Content Paint, which essentially analyzes and measures a page’s loading speed, comes first on the list. While they are all vital, LCP is perhaps the parameter which has the greatest impact on website visitors as, from a chronological point of view, it is the first feature they experience when they land on the page.
Largest contentful paint: what is it and how is it measured?
In fact, the shorter the waiting time and thus the quicker the loading time, the better the user’s page experience. Inversely, the longer the times, the more likely users are to abandon the site regardless of the quality of page contents, whether they be text or images. Unfortunately, this is something we can all relate to in our daily lives. Loading speed is thus the entry factor: neglecting it or choosing not to optimize it will have a devastating effect on any marketing strategy.
From a technical point of view, it can be said that LCP analyzes and evaluates the time needed to render the biggest element on a user’s display be it on a mobile device or desktop. This obviously refers to visible content because this is what determines a user’s perception of how quickly a website or single page they have visited loads.
But what is meant by visible element? They are outlined in the following category:
- Elements with background images loaded with CSS
- Elements which contain text nodes
- Images
- Videos
The metrics introduced by Google for classifying loading times, thus LCP, are as follows:
- Good – excellent user experience when loading time is less than or equal to 2.5 seconds for at least 75% of page loads.
- Needs improvement– above 2.5 seconds but less than or equal to 4 seconds for at least 75% or more of page loads.
- Poor user experience– when it takes more than 4 seconds for a page load.
In addition, there are other metrics which are measured during page loading and must be taken into consideration: They are as follows:
- First Paint (FP) refers to the point when the browser renders the first bit of content, including those pages without visible content.
- First Contentful Paint (FCP) refers to the point when the browser visualizes text or images for the first time, thus measuring the time it takes a browser to receive its first byte of a visible element of the web page.
Now let’s see what factors slow down the LCP and what can be done about it.
Largest contentful paint: how to optimize it and fight slowing factors
There are various field and lab tools available for measuring these factors such as Chrome User Experience Report, PageSpeed Insights, Search Console (essential web signals report) and JavaScript web vitals for field. Instead, Chrome DevTools, Lighthouse, WebPage Test can be used for the lab.
But what slows down Largest Contentful Paint? And to the point, more importantly, how can it be sped up? Google experts outline that simplifying load speed of page content boils down to four main factors. These factors, which can work separately or in combination with each other are:
- Slow Server response times: A slow server response time negatively affects all load speed metrics and is a cause of a high LCP. Slow response times often reflect problems with the back-end infrastructure, non-optimized database queries or API responses that take a long time to resolve. All this happens in the background of your site. Ensuring that you host a good quality, well-configured server is one of the first steps towards improving this value.
- Render-blocking Java Script and CSS: Although customizing your website is a great thing to do to make it stand out, adding CSS and JavaScript to make your site and its content more appealing, when not done with a focus on performance as well, it will negatively impact load times. Often settle for a less impactful design and fewer plug-ins for the sake of your LCP.
- Slow resource load times: Large resources or visually striking content on a page often take a long time to load: having many images and text boxes that have not been optimized properly will contribute to an increase in your LCP.
- Client-side rendering: Client-side rendering (i.e., the rendering of Web pages directly in the browser with JavaScript): this is a very popular development method today, due to several advantages that we won’t go into here. Unfortunately, if this practice is carried out without regard to performance, it also makes the site considerably heavier. Having to collect and load the JavaScript several times before displaying the main content will increase users’ waiting times. So, take this into account when working to optimize your LCP.
Largest contentful paint: optimization with web caching
Without going into too much detail, it is evident that these factors require important interventions on HTML codes, JavaScript and CSS, or image optimization at the very least. Such interventions are slow, expensive and invasive, and can be hard to implement without working on website resources and content.
A very effective solution is web caching. Web caching can be done at browser level or at server level. In the first case, instructions are implemented whereby browsers save resources locally and then use them without having to load them again. Much more significant is server-side caching: by means of a cache layer operating between the user’s server and browser, minimizing site problems, and maximizing the user experience. This enables LCP to meet the parameters set by Google.
Largest contentful paint: impact on UX and SEO
On a closer look, they are not so stringent if you consider the huge impact they have. In fact, the same Mountain Valley researchers on thinkwithgoogle.com calculate the there is a +123% increase in bounce risk on mobile if loading time increases from 1 to 10 seconds and a 95% drop in conversions if there is an increase in the number of elements on a page.
In short, clients may not be so clued-up on the technical aspects of Core Web Vitals and how they impact on organic traffic performance and conversions for search engine ranking for UX. But they do know how to distinguish between a satisfactory user experience to be repeated and a bad user experience to immediately escape from and avoid in the future. Once again, the effects on web traffic and revenue are blatantly obvious.
Largest contentful paint: impact on customer journey
The customer journey now begins for almost every type of product on the web, regardless of whether it ends online or offline. This is a trend in purchasing habits that numerous studies have shown to be on the rise and which the pandemic has only increased even more. Optimizing the user experience is therefore vital to the success of any marketing campaign. But there is no need to panic: there are easy-to-implement solutions that solve and prevent problems at the root without touching the