Understanding Core Web Vitals

What seemed to be almost inevitable, Google has made the recent announcement of a new ranking signal based around page experience in the next six months. With Google’s continual emphasis on usability over the past couple of years and the subsequent updates that have pushed that message forward (mobile-first indexing, page speed as a ranking factor, etc) sites can no longer rely solely on domain strength and quality content alone. With only a short period between announcement and implementation, SEOs should be preparing their sites (along with their own skill sets) to embrace the change. The first step in preparing, jumping right into Google Search Console in the newly-out-of-beta Core Web Vitals.

What are Core Web Vitals?

Core Web Vitals, as described by Google, is an offshoot of their large Web Vitals initiative that highlights the page metrics that matter most. Where Google has continued to provide toolsets and documentation on web performance optimization, many in the development, tech, and SEO community have had trouble keeping up (and really, can you blame them?).

Core Web Vitals make up into three distinct metrics:

LCP (Largest Contentful Paint)

Typical speed metrics to determine page loads such as Speed Index (a more formulaic way of determining overall site speed) or First Contentful Paint (first appearance of any part of a page’s content being loaded in) have since been proven as not the most viable means of highlighting speed. Google, in response, has taken a more in-depth view of the amount of time used to render the largest element in a viewport. The load in of large resources such as images or video signals that once the waterfall hit these elements that a URL is loading.

FID (First Input Delay)

Similar to First Contentful Paint, First Input Delay is a measurement of activity to respond. So for example what is the time between clicking an icon on a page to when the site responds to that click.

CLS (Cumulative Layout Shift)

Often experienced but rarely measured, Cumulative Layout Shift is the measurement of site layout movement in response to unexpected shifts that occur on a page. So, if you are interacting with an element on a page (let’s say, a survey) and you misclick an answer due to a banner floating in and moving elements around. The measurement of movement in unstable elements in an unexpected fashion is CLS.

How do I Understand My Own Web Vitals?

Jumping into your own Google Search Console (or pulling Web Vitals via API), you’ll see a series of red, yellow and green lines for both mobile and desktop. You’re probably thinking to yourself “what do I do with all this information? What’s even the difference from good, bad or in between?” Which is a totally understandable response.

Let’s jump into a couple of different questions you can ask yourself for each of these measurements.

For LCP issues Detected:

• “What does my current resource load look like on my site? Are there a lot of redundant elements that are being loaded in?”
• “Are there render blocking elements on my site which can be optimized?”
• “Where can I provide streamline load-in, whether that be through code minification or compression?”

For FID issues detected:

• “How does JavaScript execute within my site? Are there serious issues between input action, execution and response for important user interactions?”
• “Similar to LCP, what areas within the JavaScript of my site can be improved using minification, compression or deferment?”

For CLS issues detected:

• “What is the nature of movement on my site? What triggers unnatural movement of elements on my site”
• (If you host ads on your site) “Are there intrusive ad units which dynamically alter content on my site?”
• “What are the dimensions of my images on site? Do I have control of image assets sizing on site / have they been determined via the CSS?”
• “How responsive are fonts on my site? Do they cause issues in load-in or displaying to users?”

Core Web Vitals often points to issues which are broader, more sitewide issues, though you can find nuances in how different pages across your site. Make sure you are asking questions constantly across your organization. Often for SEOs solving these issues, you will be working alongside developers, UX and creatives to find the most optimal solution.

Okay, but How do I Analyze my Competition?

With around six months worth of time to prepare, I would hope SEOs are looking to their SERP competitors to see where they stand in comparison. With updates PageSpeed Insights and Chrome UX Report to highlight specific vitals imperative to page experience, we can create automated means of competitive analysis. Using a framework for site speed analysis I’ve used in the past (leveraging the PageSpeed Insights API), the SEMRush API for competitive landscape data from the SERP, and Plotly for data visualization, we can build quick vitals readouts on competitors based on your relevant keywords.

In this example view, we can see that for the majority “best summer shoes” ranking URLs, Largest Contentful Paint have under 2.5s loads on mobile over 55% of the time. We can use this methodology across multiple web vital elements and essentially create full measurements of competing URLs against your own site, understanding the baseline landscape prior to the updates. To run the script yourself and experiment with these views, see the source code here.

If you wanted to take this process further and create competitive forecasts leading up to the update in 2021, you could run this script on a regular basis against your competitive URLs and store results in a database to track progression of how other SEOs/dev teams are preparing for the update. That way, you always have a birds eye view on the competitive set and the shifts they are making, creating a roadmap to prioritization for technical updates.

Final Thoughts

Google’s inclusion of page experience as a ranking factor is a turn in the right direction for a better internet. SEOs who want to stay vigilant in their abilities to optimize their sites will have to take more reigns on the technical side than they ever have before. For many, this means taking more time building up their programming skill sets. For others, it means building their relationships further with development, tech and UX teammates. No matter which way you go, having a grasp on Core Web Vitals early gives you a proactive advantage to your SEO competitors.

Thoughts on page experience and preparing your site for the newest update? Tell me about them! Feel free to reach out to me directly!