{"id":7735,"date":"2023-01-17T12:46:56","date_gmt":"2023-01-17T12:46:56","guid":{"rendered":"https:\/\/craighordlow.com\/index.php\/2023\/01\/17\/how-to-optimize-core-web-vitals-in-2023-by-debugbear\/"},"modified":"2023-01-17T12:46:56","modified_gmt":"2023-01-17T12:46:56","slug":"how-to-optimize-core-web-vitals-in-2023-by-debugbear","status":"publish","type":"post","link":"https:\/\/craighordlow.com\/index.php\/2023\/01\/17\/how-to-optimize-core-web-vitals-in-2023-by-debugbear\/","title":{"rendered":"How to optimize Core Web Vitals in 2023 by DebugBear"},"content":{"rendered":"<div class=\"wp-block-image\">\n<\/div>\n<p>Google\u2019s <a href=\"https:\/\/www.debugbear.com\/docs\/metrics\/core-web-vitals?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">Core Web Vitals<\/a> first became a <a href=\"https:\/\/www.debugbear.com\/docs\/core-web-vitals-ranking-factor?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">ranking factor<\/a> back in 2021. In February 2022, the change was fully rolled out to all mobile and desktop searches.<\/p>\n<p>Since then, Google has also worked on delivering new technologies to optimize web performance as well as experimenting with a potential new performance metric.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/craighordlow.com\/index.php\/2023\/01\/17\/how-to-optimize-core-web-vitals-in-2023-by-debugbear\/#What_are_the_Core_Web_Vitals_and_what_do_they_mean_for_rankings\" >What are the Core Web Vitals, and what do they mean for rankings?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/craighordlow.com\/index.php\/2023\/01\/17\/how-to-optimize-core-web-vitals-in-2023-by-debugbear\/#Use_priority_hints_to_speed_up_your_website\" >Use priority hints to speed up your website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/craighordlow.com\/index.php\/2023\/01\/17\/how-to-optimize-core-web-vitals-in-2023-by-debugbear\/#Run_high-quality_site_speed_tests\" >Run high-quality site speed tests<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/craighordlow.com\/index.php\/2023\/01\/17\/how-to-optimize-core-web-vitals-in-2023-by-debugbear\/#The_new_Interaction_to_Next_Paint_INP_metric\" >The new Interaction to Next Paint (INP) metric<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/craighordlow.com\/index.php\/2023\/01\/17\/how-to-optimize-core-web-vitals-in-2023-by-debugbear\/#Take_advantage_of_better_image_support_in_Safari\" >Take advantage of better image support in Safari<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/craighordlow.com\/index.php\/2023\/01\/17\/how-to-optimize-core-web-vitals-in-2023-by-debugbear\/#Identify_and_eliminate_render-blocking_resources\" >Identify and eliminate render-blocking resources<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/craighordlow.com\/index.php\/2023\/01\/17\/how-to-optimize-core-web-vitals-in-2023-by-debugbear\/#Monitor_Core_Web_Vitals_over_time\" >Monitor Core Web Vitals over time<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_are_the_Core_Web_Vitals_and_what_do_they_mean_for_rankings\"><\/span><a><\/a>What are the Core Web Vitals, and what do they mean for rankings?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The Core Web Vitals are a set of three user experience metrics:<\/p>\n<p><a href=\"https:\/\/www.debugbear.com\/docs\/metrics\/largest-contentful-paint?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Largest Contentful Paint<\/strong><\/a>: how quickly did the largest image or piece of text show up?<\/p>\n<p><a href=\"https:\/\/www.debugbear.com\/docs\/metrics\/first-input-delay?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>First Input Delay<\/strong><\/a>: how quickly does the site respond to user input?<\/p>\n<p><a href=\"https:\/\/www.debugbear.com\/docs\/metrics\/cumulative-layout-shift?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Cumulative Layout Shift<\/strong><\/a>: is the page stable after rendering, or does content move around?<\/p>\n<p>Google collects data for these metrics from real users as part of the <a href=\"https:\/\/www.debugbear.com\/blog\/chrome-user-experience-report?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">Chrome User Experience Report<\/a>. Pages that do well on these metrics rank higher in search results.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Use_priority_hints_to_speed_up_your_website\"><\/span><a><\/a>Use priority hints to speed up your website<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Last April, Chrome released <a href=\"https:\/\/www.debugbear.com\/blog\/priority-hints?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">Priority Hints<\/a>, a new HTML feature that gives website owners a way to mark the most important resources on a page. This is especially useful for images that cause the Largest Contentful Paint.<\/p>\n<p><strong>By default, all images on a page are loaded with low priority.<\/strong> That\u2019s because before the initial render of the page, the browser can\u2019t tell whether an image element will end up as the hero image or as a small icon in the website footer.<\/p>\n<p>Therefore it\u2019s common for LCP images to be loaded with low priority at first and then switch to high priority later on. That means the browser will wait longer before starting to download the image.<\/p>\n<p>This <a href=\"https:\/\/www.debugbear.com\/docs\/waterfall?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">request waterfall<\/a> shows an example of that. Note the long gray line where the browser knows about the image but decides it doesn\u2019t need to start loading it yet.<\/p>\n<div class=\"wp-block-image\">\n<\/div>\n<p>Adding the fetchpriority=&#8221;high&#8221; attribute fixes this problem. The browser starts loading the LCP image as soon as it\u2019s discovered, causing the Largest Contentful paint to happen much sooner.<\/p>\n<div class=\"wp-block-image\">\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Run_high-quality_site_speed_tests\"><\/span><a><\/a>Run high-quality site speed tests<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are many free site speed tools available across the web. However, many that are based on Google\u2019s Lighthouse tool use something called <a href=\"https:\/\/www.debugbear.com\/blog\/simulated-throttling?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">simulated throttling<\/a>, which can lead to inaccurate metrics being reported. This also applies to Google\u2019s <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">PageSpeed Insights<\/a> tool.<\/p>\n<p>You can use the <a href=\"https:\/\/www.debugbear.com\/test\/website-speed?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">free DebugBear website speed test<\/a> to get accurate performance data for your website. The reports include both detailed lab test results and real user data from the <a href=\"https:\/\/www.debugbear.com\/blog\/chrome-user-experience-report?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">Chrome User Experience Report (CrUX)<\/a>.<\/p>\n<div class=\"wp-block-image\">\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"The_new_Interaction_to_Next_Paint_INP_metric\"><\/span><a><\/a>The new Interaction to Next Paint (INP) metric<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Core Web Vitals will evolve, and in 2022 Google released an experimental new metric called <a href=\"https:\/\/www.debugbear.com\/docs\/metrics\/interaction-to-next-paint?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">Interaction to Next Paint<\/a>. It measures how long it takes for the user to update after a user interacts with the page.<\/p>\n<p>A user interaction often triggers JavaScript to run on the page, which updates the page\u2019s HTML. Then those page changes need to be rendered by the browser to display the updated content to the user.<\/p>\n<div class=\"wp-block-image\">\n<\/div>\n<p>Interaction to next paint seeks to address two limitations of the First Input Delay metric:<\/p>\n<p>FID does not include time spent processing user input<\/p>\n<p>FID only looks at the first user interaction<\/p>\n<p>More than <a href=\"https:\/\/httparchive.org\/reports\/chrome-ux-report#cruxFastFid\" target=\"_blank\" rel=\"noopener noreferrer\">90% of sites<\/a> currently do well on the First Input Delay metric, far more than is the case for the two other Core Web Vitals. INP may therefore replace First Input Delay in the future, as it provides a better assessment of how good the user experience of a website is.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Take_advantage_of_better_image_support_in_Safari\"><\/span><a><\/a>Take advantage of better image support in Safari<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Downloading images takes up a lot of bandwidth, so browser makers are constantly working on new image formats and platform features. Unfortunately, it takes a while for these features to be fully supported in all major browsers.<\/p>\n<p>Luckily there has been some progress in Safari last year. Safari was the last major browser to start supporting the new, more compact <a href=\"https:\/\/www.debugbear.com\/blog\/2022-in-web-performance?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1#avif-support-in-safari\" target=\"_blank\" rel=\"noopener noreferrer\">AVIF image format<\/a>. Safari now supports <a href=\"https:\/\/www.debugbear.com\/blog\/image-lazy-loading?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">native image lazy loading<\/a> using the loading=&#8221;lazy&#8221; attribute.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Identify_and_eliminate_render-blocking_resources\"><\/span><a><\/a>Identify and eliminate render-blocking resources<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/www.debugbear.com\/blog\/render-blocking-resources?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">Render-blocking resources<\/a> can have a big impact on the speed of your website. Many CSS stylesheets and JavaScript requests block rendering, which means no content will show on your website until these files have been downloaded.<\/p>\n<p>To help website owners optimize page load time Google has started on better tooling to report render-blocking resources. For example, <a href=\"https:\/\/www.debugbear.com\/blog\/2022-in-web-performance#better-data-on-what-requests-are-render-blocking?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">the new Performance Insights tab<\/a> in Chrome DevTools indicates which requests are render-blocking.<\/p>\n<div class=\"wp-block-image\">\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Monitor_Core_Web_Vitals_over_time\"><\/span><a><\/a>Monitor Core Web Vitals over time<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ready to put some of these tips into practice?<\/p>\n<p>Using a tool to continuously monitor your website lets you verify that your performance optimizations are really working and ensures you get alerted when performance gets worse. You can also look back at past test results to understand what changed.<\/p>\n<p><a href=\"https:\/\/www.debugbear.com\/?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">DebugBear<\/a> can monitor the Core Web Vitals of your website and those of your competitors over time and provides the in-depth reports you need to optimize your website. The reports also let you demonstrate the impact you\u2019ve had on clients and the rest of your team.<\/p>\n<div class=\"wp-block-image\">\n<\/div>\n<p>DebugBear also <a href=\"https:\/\/www.debugbear.com\/lighthouse?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">keeps track of the Lighthouse scores<\/a> for performance, SEO and accessibility. You get a detailed breakdown of what audits you need to improve. Start your <a href=\"https:\/\/www.debugbear.com\/signup?utm_source=article&amp;utm_medium=sponsored&amp;utm_campaign=sel1\" target=\"_blank\" rel=\"noopener noreferrer\">free 14-day trial<\/a> today and meet the Core Web Vitals this year.<\/p>\n<p>The post <a href=\"https:\/\/searchengineland.com\/how-to-optimize-core-web-vitals-in-2023-391050\" target=\"_blank\" rel=\"noopener\">How to optimize Core Web Vitals in 2023<\/a> appeared first on <a href=\"https:\/\/searchengineland.com\/\" target=\"_blank\" rel=\"noopener\">Search Engine Land<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Google\u2019s Core Web Vitals first became a ranking factor back in 2021. In February 2022, the change was fully rolled out to all mobile and desktop searches. Since then, Google has also worked on delivering new technologies to optimize web performance as well as experimenting with a potential new performance metric. What are the Core Web Vitals, and what do they mean for rankings? The Core Web Vitals are a set of three user experience metrics: Largest Contentful Paint: how quickly did the largest image or [&hellip;]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"h5ap_radio_sources":[],"cybocfi_hide_featured_image":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-7735","post","type-post","status-publish","format-standard","hentry","category-best-seo-blogs"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":false,"author_link":"https:\/\/craighordlow.com\/author\/"},"_links":{"self":[{"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/posts\/7735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/comments?post=7735"}],"version-history":[{"count":0,"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/posts\/7735\/revisions"}],"wp:attachment":[{"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/media?parent=7735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/categories?post=7735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/tags?post=7735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}