05-28-2021

The Core Web Vitals – UX becomes even more important for SEO

Foto Martin Stadelmann @ Webrepublic AG)

Martin Stadelmann

From June to August, Google is rolling out the Core Web Vitals. This extensive change will have a big impact on website rankings – but not overnight. However, those who optimize their website will win in the longer term. We show how you can discover optimization potential and exploit it successfully. 

What are the new Core Web Vitals?

The Core Web Vitals are a subset of factors that go into Google's "Page Experience Score." Google essentially uses these to evaluate the overall user experience (UX) of your site. Currently, Page Experience is measured bythe Web Vitals. For example, the use of HTTPS, mobile friendliness, and the absence of malware and annoying interstitials like pop-ups all play a role. In the future, Core Web Vitals will complement these as factors. So the usability of a page will still be the focus and have an influence on the ranking.

    Web Vitals are completed with Core Web Vitals

    Fig 1: The Web Vitals will be supplemented by the Core Web Vitals in the future.

    The new Core Web Vitals: 

    • Largest Contentful Paint (LCP)
    • First Input Delay (FID)
    • Cumulative Layout Shift (CLS)
    Impact of the Core Web Vitals

    Fig. 2: The three Core Web Vitals and their impact on performance.

     

     

     

    The impact of the Core Web Vitals

    Figure two explains the measurement criteria of the three most important Core Web Vitals. The numbers at the bottom explain the impact on performance. For example, the first possible interaction on a website should be enabled within 100 milliseconds (FID) to provide a good user experience.

    Possible optimization potential and tips for improving the user experience 

     

    1. Largest Contentful Paint (Responsible for long page load times)

    Largest Contentful Paint measures the time to load the largest content element on a website. If this takes over 2.5 seconds, there is already room for improvement: 

    • Optimize JavaScript files: Streamline the files by removing unnecessary code parts and ensure that the rendering path is not blocked
    • Compress image files
    • Consider switching to contemporary image formats, such as WebP

     

    2. First Input Delay (Responsible for interactivity)

     

    First Input Delay indicates the duration until users can perform an action on the website for the first time. In the best case, less than 100 milliseconds are required. Longer functions, which are executed sequentially, and less optimized interactivity increase the loading time. Often JavaScript blocks important interactions due to long execution times. You can remedy this situation: Split JavaScript files into smaller files and load them asynchronously.

     

    3. Cumulative Layout Shift (Responsible for visual stability)

    Cumulative Layout Shift provides information about the visual stability of the layout on a website. If there is a layout change when the website loads, it affects the user experience. The browser is surprised by the dimension of the elements and shifts the layout on it. This happens when, for example, the dimensions of images, ads, or iFrames are not specified. Our tips:

    • Specify width and height attributes for image and video elements
    • Ensure enough space for dynamic content
    • Do not insert new content in front of existing content


    Google will implement the Core Web Vitals update between June and August 2021. However, the Core Web Vitals will initially be measured only on a page-by-page basis and will only affect mobile search queries. For you, this means that the factors will not affect your organic ranking overnight. In the longer term, however, they will have an influence, because Google continuously removes websites from the rankings if the overall page experience is rated as poor or in need of improvement compared to the competition. So it's definitely worth optimizing your website in terms of page load times, interactivity, and visual stability. Also, consider Google Search Console and subject your website to one of the available tests to learn about the status quo and discover any optimization opportunities.