User Experience and SEO have been engaged for a few years now. In May 2021 they’re officially getting married, when the Core Web Vitals become ranking signals.
This article was originally published in 2020.
30 Seconds Summary
- In May 2021 Core Web Vitals are becoming ranking signals for search results.
- Core Web Vitals (CWV) consist of (for now) Largest Contentful Paint, First Input Delay and Cumulative Layout Shift.
- CWV are Google’s way of operationalizing User Experience.
- I analyzed 100 Startup websites, of which many don’t pass the CWV test.
- There are a few fairly easy optimizations that have a potentially massive impact on page speed and visual stability.
Google initiated the Web Vitals in order “to provide unified guidance for quality signals that are essential to delivering a great user experience on the web”.
Apparently, there has been a paradigm shift. Instead of mainly relying on user signals (inductive) as the most important influencing factors for measuring UX, Google introduces a more regulatory approach (deductive). Of course, Core Web Vitals are not a holistic, qualitative UX measurement method, but they represent “how Google quantifies user experience with an impact on rank”, as Kevin Indig writes.
Google itself communicates possible limitations concerning these metrics: “Web Vitals and Core Web Vitals represent the best available signals developers have today to measure quality of experience across the web, but these signals are not perfect and future improvements or additions should be expected”.
And of course, it makes sense to do the most important stuff first. When building a house, you don’t start with the doorbell 🤓. So, create great content before you optimize how fast it will be loaded.
Or as John Mueller puts it:
I’m going to go out on a limb, even before we have PX as a ranking signal, nothing that you do with CWV there will make a difference in search until the website has significantly better content. I don’t say that lightly; almost all sites have incremental gains to pick up there.
— 🍌 John 🍌 (@JohnMu) January 21, 2021
Site performance a.k.a. speed has been around as a factor for a long time. What’s new: CWV are now more nuanced, easier to attribute, and by introducing the Cumulative Layout Shift they include a variable that measures visual stability – not speed.
Will the Core Web Vitals have a significant impact on the web? We don’t know yet. In Aleyda Solis’ opinion, avoiding bad user Web experience will be one key activity for 2021 SEO success, though. Passing the Core Web Vitals assessment can be one step towards that goal.
This is my prediction: We will see website owners trying to comply with Google’s new demands, especially those who heavily depend on search traffic. In high-competitive industries that focus on online content, optimizing for CWV will be a competitive advantage. If CWV were active tomorrow, a lot of media sites would struggle (i.e. intrusive interstitials).
This particular new ranking signal might result in a centripetal effect, in which all websites on the web have a more streamlined appearance, because the ways to comply with CWV are not unlimited. Showing a huge hero image above the fold in highest quality while falling below the LCP threshold might become impossible.
It will be interesting to see the trade-offs webmasters make in order to provide the look and feel they intend while still following Google’s recommendations. Or as John Mueller put it: “You could imagine the fastest page you can think of is probably an empty page, right”.
What are Core Web Vitals?
In this article, I will focus on Core Web Vitals, although my analysis also included other Web Vitals like FCP.
As for now, the CVWs consist of 3 metrics that can be measured on a website. Each of the metrics represents one dimension of the user experience. Google states that CWV will evolve over time (i.e. by adding new metrics).
By May 2021, the following CVWs will function as quality signals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These are all user centric metrics. Google states: “A page passes the Core Web Vitals assessment if the 75th percentiles of all three metrics are good”.
There’s a difference between Web Vitals and Core Web Vitals. Sometimes, marketers use these terms synonymously, which is technically not correct.
Web Vitals:
- Time to First Byte (TTFB)
- First Contentful Paint (FCP)
- Total Blocking Time (TBT)
- Time to Interactive (TTI)
Core Web Vitals:
- LCL (Largest Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
Largest Contentful Paint (LCP)
LCP measures perceived load speed. It refers to the loading time of the biggest element in the viewport. According to Google, “it marks the point in the page load timeline when the page’s main content has likely loaded”. In many cases this will be an image.
First Input Delay (FID)
FID measures interactivity – when is the site ready to interact? Or as Google states: “We all know how important it is to make a good first impression” (this wording kind of represents the top-down – almost paternal – approach Google chooses for CWV. They care whether Webmasters know how to behave towards users).
Cumulative Layout Shift (CLS)
CLS measures visual stability – will elements shift around in a bad way while the page is loading (or ready to interact)? In my opinion, this is the most interesting signal, since LCP and FID are correlating with total page speed, which has been a signal for a long time. CLS challenges websites to not use interstitials and to make sure images are loaded and displayed correctly instead.
Results: Analysis of 100 Startup Core Web Vitals
Originally, I just wanted to use the UX Report API to take a look at two domains I manage and to bulk analyze different pages. At some point, I began wondering how other companies are doing in terms of Core Web Vitals – so I started to analyze some Startup websites I like to use as a benchmark.
As it turned out, some of these pages were in fact underperforming – not passing the CWVs Test. I thought this was interesting. So I hand picked 100 Startups and analyzed their CWV (constraint: I only analyzed the homepage, it would be interesting to replicate this for blog posts).
Whenever available, I used field metrics in this analysis (≈ 90%). Lab metrics have certain constraints compared to field metrics, because they don’t contain user data, but standardized emulated traffic. When measuring FID based on lab data, you would use TBT (Total Blocking Time) which is supposed to work as a proxy.
Sample Average
Overall, the sample doesn’t pass the Web Vitals Test. High variances (for all three metrics) are indicating that there are big differences between the sample values in terms of Web Vitals optimization.
As expected, there is a significant correlation between LCP and FID (r = 0.61). Interestingly, no significant correlation was observed between LCP and CLS, underlining the uniqueness of CLS. Optimizing for page speed ≠ optimizing for visual stability.
Sample Percentages
Page Size, CMS, Scores
LCP Histogram
CLS Histogram
3 Low Hanging Fruits for Optimization
A more qualitative analysis reveals that quite a few of the investigated 100 companies miss at least one of the following 3 quick wins in order to drastically improve Web Core Vitals.
1 | Optimize Images
The 500-900 kb hero image is still a thing. In many cases, LCP can be improved significantly by scaling and compressing these images. To be honest, I was surprised how many sites didn’t seem to optimize images at all (e.g., 8 mb product pictures).
You could:
- Reduce the dimensions of background images
- Compress images by using a tool (for example this one)
- Completely get rid of images (instead use a pattern or a background-color)
- Replace images for mobile (above the fold) or at least define breakpoints and use responsive images
- Use lazy loading
- Use size attributes (width and height) so the browser knows how the image will appear
2 | Font Optimization
This may seem negligible, but in many cases it’s not. Font loading has precedence, and rendering the rest of the code gets back in the queue until the font is ready (similar to scripts). Also, font settings can produce layout shifts. This can really have an impact on your user’s experience. You find a great in-depth article about font optimization (CLS) here.
Quick wins:
- Preload fonts. This will also prevent a cascade of unstyled font loading and then getting replaced with styled font. I use a WordPress Plugin for this.
- Get rid of fonts you don’t need.
3 | CSS and JavaScript Optimization
While I’m definitely not an expert on this, there are many things you can do in WordPress without the help of a front-end specialist.
There are great plugins and tools for this.
You could:
- Use inline critical CSS, so that basic chunks of your CSS don’t have to be loaded from an external CSS file. This reduces the number of calls your browser has to make to the server in order to load the core website.
- Minify CSS. This removes unnecessary data from the CSS without compromising how the file is processed by the browser.
- Optimize CSS delivery. For example, you can preload CSS and load all the other CSS files asynchronously, avoiding render-blocking. This can improve the perceived loading time of the site.
- Defer Scripts. This can “eliminate render-blocking resources” (PageSpeed recommendation by Google) by using the defer attribute when loading JS. Effectively, JS files can block the downloading of other assets because the browser will have to process through the script.
How do I Measure (Core) Web Vitals?
There are great tools/websites like:
- PageSpeed Insights
- GTmetrix
- Pingdom (you can choose a server location)
- Webpagetest (it looks a bit old fashioned, but really detailed results)
- Chrome UX Report API (only field data)
With Chrome Version 88 there’s a new feature under the performance tab where you can analyze CWV in-depth.
Conclusion
It remains to be seen whether companies – that are dependent on search traffic delivering a great UX to their website users – will be incentivized to adjust to CWV, since it’s only one ranking signal out of many. If they do so, the (C)WV might very well change the online environment, because in that case, getting rid of HD hero images becomes a necessary condition.
However, agencies and marketers should probably brace themselves for March and April, when clients and managing directors will urge them to “fiX tHe cOrE wEb viTals, pLEase”! 😉
