As you may have already known, Google announced late last year that they are unveiling a brand-new ranking factor for Google Search in May of this year. The new ranking factor, Core Web Vitals, is being combined with existing page experience ranking signals like mobile friendliness and HTTPS security.
We’re announcing that page experience ranking signals for Google Search will launch in May 2021. This will combine Core Web Vitals and previous UX-related signals.
Learn more: https://t.co/OrrR8LDl1a
— Google Search Central (@googlesearchc) November 10, 2020
If you weren’t aware of this upcoming change be sure to check out fellow emfluencer Evan Yule’s blog covering the Google page experience update announcement! He does a great job of providing historical context to and explaining the ins and outs of Core Web Vitals.
How are Core Web Vitals Measured?
Now that we’re all on the same page about what exactly Core Web Vitals are, here is a brief recap of the metrics used to determine your site’s scores:
Cumulative Layout Shift (CLS)
Cumulative Layout Shift measures visual stability. More specifically, it is the sum of every unexpected layout shift that occurs on a given page. A layout shift is when a visual element changes its position from one rendered frame to the next. Websites should aim to have a CLS score of less than 0.1.
For more information on CLS, check out this page.
First Input Delay (FID)
First Input Delay measures interactivity. To put it simply, FID keeps track of the time it takes from when a user first interacts with a page to when the browser can actually begin to process said interaction. A good First Input Delay is anything less than 100 milliseconds.
For more information on FID, check out this page.
Largest Contentful Paint (LCP)
Largest Contentful Paint measures loading performance. In particular, it measures how long it takes the largest content element on a given page to render in. A page’s LCP is considered good if it occurs within 2.5 seconds of when the page first starts loading.
For more information on LCP, check out this page.
How to Optimize Core Web Vitals
We now know what Core Web Vitals are and how they are measured, which leads us to the final question I need to address in this article: how the heck do you optimize your site for the various Core Web Vitals metrics listed above? Unfortunately, a lot of the specifics of this question can only be answered on a site-by-site or page-by-page basis, but in general, here are some of the most frequent causes of poor Core Web Vitals scores and some of the common solutions:
How to Optimize Cumulative Layout Shift (CLS)
Optimizing Cumulative Layout Shift involves reducing the number of layout shifts that occur on a given page. These layout shifts often happen when visual elements have to move because another element was suddenly resized or added to the page.
Common CLS Issues
Some of the most common CLS issues are:
- Images without dimensions
- Advertisements, embedded content, and iframes without dimensions
- Web fonts causing problems like Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT)
- Actions waiting for a network response before updating the Document Object Model (DOM)
Recommended CLS Optimizations
The following is a list of some of the established best practices when it comes to optimizing Cumulative Layout Shift on your website or webpage.
- Always include width and height attributes on your images and video elements OR reserve the required space with CSS aspect ratio boxes.
- When working with responsive images, be sure each image uses the same aspect ratio.
- Statically reserve space for advertisements.
- Be careful when placing non-sticky ads near the top of a webpage.
- Always try to avoid inserting new content above existing content. An exception is new content that is inserted as a result of a user interaction.
- Use font-display or the Font Loading API to minimize FOUT and FOIT issues
- Utilize transform animations over animations that trigger layout changes.
How to Optimize First Input Delay (FID)
Optimizing First Input Delay involves addressing the most common cause of poor FID scores: heavy JavaScript execution. This entails examining and improving how JavaScript on your or site parses, compiles, and executes.
Common FID Issues
Some of the most common FID issues are:
- JavaScript code that blocks the main thread for 50 milliseconds or more
- Inefficient first-party script execution
- Reliance on cascading data fetches
- Inefficient third-party script execution
Recommended FID Optimizations
Here are some of the ways that you can work to combat heavy JavaScript execution errors on your website or webpage.
- Break up long tasks into smaller, asynchronous tasks.
- Optimize your page for interaction readiness.
- Use a Web Worker to run JavaScript on a background thread.
- Reduce JavaScript execution time by either:
- Deferring unused JavaScript
or
- Minimizing unused polyfills
How to Optimize Largest Contentful Paint (LCP)
Optimizing Largest Contentful Paint involves shoring up the way your servers deliver content and resources, cache assets, and establish connections.
Common LCP Issues
Some of the most common LCP issues are:
- Slow server response times
- Render-blocking JavaScript and CSS
- Slow resource load times
- Client-side rendering
Recommended LCP Optimizations
Here are some of the ways that you can optimize your sever to improve your website or webpage’s LCP score. These recommendations are especially relevant for sites that are rendered mainly on the client side.
- Use a Content Delivery Network to host your content so that users never have to wait for it to be delivered.
- If your HTML is static, consider caching it on the server-side.
- Use a Service Worker to serve HTML pages cache-first and to cache static resources.
- Establish third-party connections ahead of time.
- Preload important resources.
- Reduce CSS blocking time by:
- Minifying CSS
- Deferring non-critical CSS
- Inline critical CSS
- Reduce JavaScript blocking time by:
- Minifying and compressing JavaScript files.
- Deferring unused JavaScript
- Minimizing unused polyfills
- Optimize and compress images and text files.
Resources for Measuring and Improving Core Web Vitals
As I mentioned earlier in this article, Core Web Vitals can be tough to optimize for since problems and solutions can vary so much on a site-by-site and page-by-page basis. This means that ultimately, the first step in optimizing for any aspect of Google’s Core Web Vitals is identifying the issues and areas of improvement specific to your website.
There are a couple resources that can help with that. First and foremost, I recommend taking a look at Google Search Console’s Core Web Vitals Report. The Core Web Vitals Report shows how your webpages perform based on real-world data, which provides you with valuable insights regarding your site’s CLS, FID, and LCP scores.
Similar to Google Search Console’s Core Web Vitals Report is Google’s Page Speed Insights tool – a tool that uses Lighthouse to audit webpages and provide specific feedback on how to make the page faster. Within the same vein of the Page Speed Insights tool is Google’s Mobile-Friendly Test. This tool allows you to visualize and quantify how easily a user can access your website or one of your webpages from a mobile device. This is especially important to consider given that the internet is being accessed more and more by mobile devices and less by desktops.
If you lack Google Search Console access for a certain site but still want to pull Core Web Vitals data at a sitewide level, Screaming Frog SEO Spider is the tool for you. Their latest update gives users the ability to connect Screaming Frog with the Page Speed Insights API. Doing so adds a new column to your Screaming Frog crawl titled “Core Web Vitals Assessment,” within this column every page that has been crawled is labeled either Pass or Fail based on the combination of all three of their Core Web Vitals scores.
If all of this seems too daunting or complicated to handle on your own, have no fear, here at emfluence we are experts! Please contact us to discuss how we can help you optimize your site’s Core Web Vitals.
