{"id":4649,"date":"2022-02-25T14:00:33","date_gmt":"2022-02-25T14:00:33","guid":{"rendered":"https:\/\/wpmudev.whitespark.ca\/core-web-vitals\/"},"modified":"2024-10-28T16:03:29","modified_gmt":"2024-10-28T22:03:29","slug":"core-web-vitals","status":"publish","type":"post","link":"https:\/\/whitespark.ca\/blog\/core-web-vitals\/","title":{"rendered":"Guide to Core Web Vitals"},"content":{"rendered":"

In 2021 Google rolled out the Page Experience update<\/a> and announced that these signals would be included as ranking factors. This initiative was designed to help improve user experience across the web and encourage website owners to create and deliver a better user experience. As a result Google launched new metrics known as Core Web Vitals in addition to their existing search signals (mobile-friendliness, HTTPS-security, intrusive interstitials) to help measure the overall quality of a website experience.\u00a0 \u00a0\u00a0<\/span><\/p>\n

What Are Core Web Vitals?<\/span><\/h2>\n

The Core Web Vitals metrics measure speed, responsiveness, and visual stability of your content when a person visits your website. There are three Core Web Vital metrics you\u2019ll need to be aware of: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.<\/span><\/p>\n

Mobile friendliness, safe browsing, HTTPs, and no intrusive interstitials (e.g. advertisements, pop-ups) are also important to consider when wanting to provide a good page experience for visitors.<\/span>\"\"What kind of experience are your customers having on your website? Make user experience a priority and enhance your local SEO strategy with help from Whitespark. Learn more about our local search services<\/strong><\/a>.<\/p>\n

The 3 Core Web Vital Metrics<\/span><\/h2>\n

\"\"<\/p>\n

Largest Contentful Paint (LCP)<\/span><\/h3>\n

Largest Contentful Paint measures how quickly the main content of the page loads (banner\u00a0 images\/videos, headers, etc.). <\/span>The faster the LCP<\/span><\/a>, the faster the page can be accessed by the visitor. <\/span>A good LCP load time would be 2.5 seconds or less. Anything above 2.5 seconds should be improved in order to keep people hitting the back button.<\/span>
\n<\/span>
\n<\/span>How do you improve your LCP load time?<\/strong><\/p>\n

    \n
  1. Reduce server response time<\/span><\/li>\n
  2. Eliminate render-blocking behaviour<\/span><\/li>\n
  3. Optimize images and videos<\/span><\/li>\n<\/ol>\n

    First Input Delay (FID)<\/span><\/h3>\n

    First Input Delay<\/span><\/a> measures how long it takes for your page to become interactive.<\/span><\/p>\n

    This is especially important when you want someone to take action on your page (and when do you not?)<\/span>\u00a0You want to aim for 100ms or less to not frustrate site visitors<\/span><\/a>. Anything between 100ms and 300ms could be improved and anything above 300ms is asking for trouble.<\/span>
    \n<\/span>
    \n<\/span>How do you improve First Input Delay?<\/strong>
    \n<\/span><\/p>\n

      \n
    1. Reduce Javascript execution time<\/span><\/li>\n
    2. Minimize main thread work<\/span><\/li>\n
    3. Remove unused Javascript<\/span><\/li>\n
    4. Reduce the impact of third-party code<\/span><\/li>\n
    5. Replace large Javascript libraries with smaller alternatives<\/span><\/li>\n<\/ol>\n

      Cumulative Layout Shift (CLS)<\/span><\/h3>\n

      Cumulative Layout Shift<\/span><\/a> is a score given to a page for unexpected shifts that happen to the layout. The higher the score, the more unexpected layout shifts, and the more frustrating it is to interact with your website. <\/span>Have you ever tried to click a button or a link only to have it move, making you click another that takes you somewhere you didn\u2019t intend? Frustrating, right? This is CLS in action.<\/span><\/p>\n

      If you want to avoid annoying people and keep them on your site, you\u2019ll want to maintain a score of 0.1 or less. Anything above 0.25 will be an issue.<\/span><\/p>\n

      How do you improve Cumulative Layout Shift?<\/strong>
      \n<\/span><\/p>\n

        \n
      1. Specify image dimensions<\/span><\/li>\n
      2. Rescue layout shifts caused by ads, embeds, and iframes<\/span><\/li>\n
      3. Avoid inserting new content above existing content<\/span><\/li>\n
      4. Prevent the Flash of Invisible Text (FOIT)<\/span><\/li>\n
      5. Avoid non-composited animations<\/span><\/li>\n<\/ol>\n

        Mobile Friendliness, HTTPs & Intrusive Interstitials<\/span><\/h2>\n

        These are also used as page experience signals. Google wants your site to be secure and easily accessible on any device without intrusive interstitials (e.g. annoying pop ups or ads) that get in the way of what users want to do.\u00a0<\/span><\/p>\n

        Why are Core Web Vitals Important?<\/span><\/h3>\n

        Website speed and Core Web Vitals have always been important. Just like an in-person interaction with your customers, you want an interaction with your website to be pleasant, with as little friction as possible.<\/span><\/p>\n

        When your website takes a long time to load, shifts unexpectedly, delays interactions, or bombards visitors with annoying advertisements and popups, this makes for a bad user experience. It can frustrate visitors to the point where they leave – and never come back.<\/span><\/p>\n

        This is one of the reasons why Google rolled out the mobile page experience update and is<\/span> now also bringing it to desktop<\/span><\/a>.\u00a0<\/span>As we move into a digital-first world, Google is continuing to place greater importance on page experience. It is important to start making changes now as Google shifts, rather than trying to play catch up later.<\/span>What kind of experience is your website providing customers? Make user experience a priority and enhance your local SEO strategy with help from Whitespark. Learn more about our local search services<\/strong><\/a>.<\/p>\n

        How Do You Test Core Web Vitals For Your Site?<\/span><\/h3>\n

        There are multiple ways to test your site\u2019s Core Web Vitals, but we like<\/span>\u00a0<\/span>GTmetrix<\/span><\/a> or Google\u2019s <\/span>Pagespeed Insights<\/span><\/a>. <\/span>Both give you scores and improvement suggestions that you can implement yourself or hand off to a developer.<\/span><\/p>\n

        Local Business Websites Are Performing Poorly<\/span><\/h3>\n

        We recently studied thousands of Google Business Profile Landing pages to see if local business websites met Google\u2019s page experience standards.\u00a0We found that only 3% of local businesses received good mobile performance scores<\/strong><\/a>. While our findings indicate that Core Web Vitals\u00a0do not<\/em>\u00a0currently impact ranking in local search results, this could change once Google fully implements page experience ranking factors.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

        In 2021 Google rolled out the Page Experience update and announced that these signals would be included as ranking factors. This initiative was designed to help improve user experience across the web and encourage website owners to create and deliver a better user experience. As a result Google launched new metrics known as Core Web […]<\/p>\n","protected":false},"author":1,"featured_media":4651,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"Google is on a mission to help bring better website experiences to searchers, which is why they are incorporating page experience as a ranking factor. Learn more about the metrics that Google wants you to improve.","_seopress_robots_index":"","footnotes":""},"categories":[1],"tags":[],"classification":[],"class_list":["post-4649","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/posts\/4649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/comments?post=4649"}],"version-history":[{"count":2,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/posts\/4649\/revisions"}],"predecessor-version":[{"id":5092,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/posts\/4649\/revisions\/5092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/media\/4651"}],"wp:attachment":[{"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/media?parent=4649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/categories?post=4649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/tags?post=4649"},{"taxonomy":"classification","embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/classification?post=4649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}