{"id":9224,"date":"2021-06-08T16:38:00","date_gmt":"2021-06-08T13:38:00","guid":{"rendered":"https:\/\/www.webceo.com\/blog\/?p=9224"},"modified":"2024-02-05T15:39:00","modified_gmt":"2024-02-05T12:39:00","slug":"core-web-vitals-update","status":"publish","type":"post","link":"https:\/\/www.webceo.com\/blog\/core-web-vitals-update\/","title":{"rendered":"Core Web Vitals: Test Your Site for a New Google Update"},"content":{"rendered":"\n

The new Core Web Vitals update was finally released! Earlier this year, Google released a product review update that targets only (you guessed it) product review pages, but Core Web Vitals are going to affect every website<\/i>. This new update is much wider in scope, and no website will be left untouched. So you’d best be ready.<\/p>\n\n\n\n

You’ve most likely already heard about Core Web Vitals over the past few months – indeed, they have been a major topic since the last year. If you have already prepared your site for it, great work! If you haven’t, or if you are worried you might still be missing something, then you have come to the right place. Let’s look into what exactly Core Web Vitals are, what makes them so global and how to optimize your website for this new Google update.<\/p>\n\n\n\n

<\/span>What are the Core Web Vitals?<\/span><\/h3>\n\n\n\n

It’s simple: Core Web Vitals are signals which measure the quality of the user experience on a page. There are three of them:<\/p>\n\n\n\n

    \n
  1. Cumulative Layout Shift.<\/strong> It’s responsible for a page’s visual stability.<\/li>\n\n\n\n
  2. Largest Contentful Paint.<\/strong> It’s tied to a page’s loading speed.<\/li>\n\n\n\n
  3. First Input Delay.<\/strong> It shows the quality of your pages’ interactivity, how responsive they are.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Let’s explore each of the three.<\/p>\n\n\n\n

    <\/span>1. Cumulative Layout Shift (CLS)<\/span><\/h2>\n\n\n\n

    First, let\u2019s define CLS: it\u2019s the sum of all layout shifts<\/strong> that occur while a web page is opened in your browser. And what is a layout shift? It means that a visible element changes its position on a page from one rendered frame to the next.<\/p>\n\n\n\n

    The browser calculates CLS by looking at the viewport size and the movement of unstable elements in the viewport between two rendered frames. The layout shift score<\/strong> is a product of two measures of that movement: the impact fraction and the distance fraction.<\/p>\n\n\n\n

    So, Layout shift score = impact fraction * distance fraction.<\/i><\/p>\n\n\n\n

    Ideally, CLS should be under 0.1. Of course, perfect readings on websites are hard to achieve, so you should still be fine in the orange zone, which is under 0.25. If your CLS is any higher than that number, it’s time to start worrying.<\/p>\n\n\n\n

    Simply put:<\/p>\n\n\n\n

    \n

    Your CLS < 0.1: <\/i><\/strong>perfect<\/i><\/p>\n\n\n\n

    0.1 < your CLS < 0.25: <\/i><\/strong>optimal, but could be improved<\/i><\/p>\n\n\n\n

    Your CLS > 0.25: <\/i><\/strong>needs fixing<\/i><\/p>\n<\/blockquote>\n\n\n\n

    There are a few ways to check your CLS and the other Core Web Vitals metrics. One is to open the developer’s tools in your browser. In Chrome, for example, you need to press F12 or Ctrl-Shift-I and open the Performance tab. Reload the page, and you will see something like this:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    If it took you a while to find CLS there, you are not the only one. It doesn’t look any more appealing in other browsers either. There’s an easier way to find this information: with SEO tools.<\/p>\n\n\n\n

    Open the Desktop Speed report<\/a> in WebCEO and you will see this:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Much better and straight to the point.<\/p>\n\n\n\n

    If you check the list of found issues in the report, you may find the types of issues which lower the quality of your CLS:<\/p>\n\n\n\n