{"id":119093,"date":"2020-10-27T16:12:11","date_gmt":"2020-10-27T08:12:11","guid":{"rendered":"https:\/\/seo-hacker.com\/?p=19093"},"modified":"2023-06-01T16:22:09","modified_gmt":"2023-06-01T08:22:09","slug":"core-web-vitals-optimization-guide","status":"publish","type":"post","link":"https:\/\/seo-hacker.com\/core-web-vitals-optimization-guide\/","title":{"rendered":"Complete Core Web Vitals Guide"},"content":{"rendered":"

\"Complete<\/a><\/p>\n

Page experience<\/a> will officially be a <\/span>ranking factor<\/span><\/a> this 2021. This means that optimizing page experience is a necessity for webmasters and SEOs if they want to be successful in the long-run. Page experience used to be a vague topic where the only quantifiable and measurable aspect of it is on how fast a page or site loads. But with Core Web Vitals, specific page elements that affect a user\u2019s experience in your page are quantified and this gives you different opportunities to improve your site\u2019s page experience. Core Web Vitals is split into three major aspects (with minor ones), so with research and enough experimentation, and to be ready for 2021, here\u2019s how you can optimize for Core Web Vitals:<\/span><\/p>\n

<\/p>\n

How to Optimize for LCP<\/a> – Largest Contentful Paint<\/span><\/h2>\n

\"largest-contentful-paint\"<\/p>\n

LCP deals with a page\u2019s loading performance – how fast a page loads. The standard loading time for your LCP to be in the green is for it to load in 2.5 seconds. This is the core web vital closes to site speed which means a lot of webmasters and SEOs already have experience optimizing for this. But there are specifics for this core web vital that you need to know and optimize for.<\/span><\/p>\n

How to Optimize for FID<\/a> – First Input Delay<\/span><\/h2>\n

\"first-input-delay\"<\/p>\n

FID deals with the speed at which the page responds to the first interaction a user makes. This means that FID is related to the clickability of the buttons, your drop-down menu, or forms that users need to fill up, etc. Basically, the first action-related aspect of the user on your website deals with FID.\u00a0\u00a0<\/span><\/p>\n

How to Optimize for CLS<\/a> – Cumulative Layout Shift<\/span><\/h2>\n

\"cumulative-layout-shift\"<\/p>\n

CLS deals with the visual aspect of your page wherein the speed of how visible page elements change its position from one frame to the next is measured. This is given more weight on mobile view where movement on the page is more apparent. An important thing to note is that CLS measures the <\/span>sum total<\/b> of individual layout shift scores that happened while the page was open.<\/span><\/p>\n

Tools to Use for Core Web Vitals<\/span><\/h2>\n

Since Core Web Vitals will be an integral part of the Page Experience update, it\u2019s only right for Google to use these metrics in the tools commonly used by webmasters and SEOs. So, which tools should you use to measure the success (or the aspects that need improvement) of your site\u2019s Core Web Vitals?<\/span><\/p>\n

PageSpeed Insights<\/span><\/h3>\n

One of the most commonly used tools to measure pagespeed is Google\u2019s PageSpeed insights. Aside from showing your page\u2019s score, they now also include the Core Web Vitals metrics to help users understand how good a page is based on these metrics. Here\u2019s how it looks:<\/span><\/p>\n

\"Pagespeed<\/p>\n

It\u2019s a great tool to use if you want to measure the success of your optimization efforts, but if you use this as the foundation of your efforts to optimize your site\u2019s core web vitals, you\u2019ll notice that there are a lot of important details missing in this tool. Such as, which pages need improvement on which specific core web vital. For that, we head on over to our website\u2019s Google Search Console.<\/span><\/p>\n

Google Search Console<\/span><\/h3>\n

To get into the specifics of core web vital a particular page needs improvement on, go to your website\u2019s Google Search Console and click on the <\/span>Core Web Vitals<\/b> button on the sidebar and you\u2019ll be able to see the report.\u00a0<\/span><\/p>\n

\"google<\/p>\n

Just click on the <\/span>Type <\/b>that you want to check and GSC will show you the pages that are performing poorly, needing improvement, or are already performing greatly. After finding the pages you want to optimize for Core Web Vitals, you can then use PageSpeed insights to check on suggestions for these specific pages.<\/span><\/p>\n

Web.dev\u00a0<\/span><\/h3>\n

Web.dev has a <\/span>free measurement tool<\/span><\/a> that uses Lighthouse to run an audit on your page and display the necessary improvements you can do to improve your page\/site\u2019s performance, Progressive Web App status, Accessibility, Use of Best Practices, and SEO. Here\u2019s what it looks like when you run an audit on their tool:<\/span><\/p>\n

\"webdev<\/p>\n

But the best thing about using web.dev\u2019s measurement tool is that they categorize the tasks you need to do to improve performance, accessibility, or SEO by weighing on how impactful it is to your site\u2019s overall improvement. They even provide guides on how you can do the task properly to ensure success.<\/span><\/p>\n

\"webdev<\/p>\n

Web Vital Chrome Extension<\/span><\/h3>\n

Lastly, a nifty tool you can use to check a page\u2019s <\/span>real-time<\/b> core web vitals metrics while you\u2019re on the page itself is the <\/span>Web Vitals Chrome Extension<\/span><\/a>. It not only helps you diagnose your own pages on-the-go, but it also helps you measure the performance of competing pages that you want to beat. Using this extension helps you save time, adapt faster, and be more efficient. Here\u2019s how it looks:<\/span><\/p>\n

\"web<\/p>\n

Minor Web Vitals<\/span><\/h2>\n

Although the LCP, FID, and CLS are considered as the <\/span>CORE <\/b>web vitals, there are other metrics you can use to measure and deliver a great page experience to your users otherwise known as Minor web vitals or simply, web vitals.\u00a0<\/span><\/p>\n

These metrics are often used as a substitute or supplement to the core web vitals largely due to the fact that most of these web vitals are in some way, related to the core web vital. Here are some of them:<\/span><\/p>\n

Time to First Byte – TTFB<\/span><\/h3>\n

Simply enough, TTFB is the time it took for a browser to receive the first byte of the page content. This, in turn, is directly related to FCP since they both deal with a page\u2019s loading aspect.\u00a0<\/span><\/p>\n

Time to Interactive – TTI<\/span><\/h3>\n

A web vital that can impact FID, TTI is simply the speed that the page takes to load its main sub-resources and be able to reliably respond to user input. Since this mostly deals with a page\u2019s interactivity, it\u2019s more related to FID than FCP.\u00a0<\/span><\/p>\n

Total Blocking Time – TBT<\/span><\/h3>\n

TBT is the metric that deals with the amount of time between FCP and TTI where there was a block in the thread that prevented the page to respond to an input by the user. For a more technical and comprehensive description, here\u2019s a snippet from web.dev:<\/span><\/p>\n

\u201c<\/span>The main thread is considered “blocked” any time there’s a Long Task\u2014a task that runs on the main thread for more than 50 milliseconds (ms). We say the main thread is “blocked” because the browser cannot interrupt a task that’s in progress. So in the event that a user does interact with the page in the middle of a long task, the browser must wait for the task to finish before it can respond.<\/span><\/i>\u201d<\/span><\/p>\n

Much like TTI, TBT deals with interactivity issues which is why it\u2019s more related to FID than FCP.\u00a0<\/span><\/p>\n

Key Takeaway<\/b><\/p>\n

Optimizing for Core Web Vitals is a must if you want to be successful in the SERPs for the years to come. Core web vitals are technical in essence, so there might be webmasters and SEOs that are less knowledgeable in this aspect but there are a lot of developers and skilled technical SEO specialists that can help you in this regard. How are you optimizing for the core web vitals? Let me know in the comments below!<\/span><\/p>\n