It’s time to check your vitals — and no, we’re not talking about a trip to your physician. These vitals come courtesy of your Google Search Console report, though the results might still make you want to reach for the blood pressure cuff.
When it comes to hot topics surrounding SEO in 2021, Core Web Vitals lead the charge. According to Google, these page experience metrics will become a ranking signal in May 2021, but that doesn’t mean you should wait until the last possible moment to worry about them.
In fact, since optimizing your Core Web Vitals will likely require a collaborative effort between your SEO team and your web developer, it’s best to begin the process of improving them as soon as possible. Before you can do so though, it’ll probably help to know what they are, since this term isn’t as self-explanatory as much SEO etymology tends to be.
The Core of Core Web Vitals
At first glance, the four web page experience metrics that make up a Core Web Vitals report do not seem intuitive at all. However, once you delve into their explanations, they’re sure to make you go “Oh!” because you’ve likely experienced the very annoying website characteristics they describe.
To check your Core Web vitals, a good place to start is your Google Search Console, where you’ll find a Core Web Vitals report in the sidebar. To get a more specific sense of how these metrics apply to the overall context of load times, however, you’ll want to copy your website URL into a PageSpeed Insights report.
This tool conveniently breaks down the three components of Core Web Vitals — along with one bonus component, known as First Contentful Paint — and how your website ranks for each load time factor. It also provides suggestions on how to fix them, but before we can understand those, we’ll need to understand what these four components mean.
-
- First Contentful Paint (FCP): The amount of time it takes for a website to load the first element on-screen, providing confirmation to the user that the page is in the process of loading.
- Largest Contentful Paint (LCP): The amount of time it takes for a website to load the largest element on-screen, whether it be a graphic, video, or other visual element. This only applies to content “above the fold”, or in other words, before scrolling.
- First Input Delay (FID): The amount of time it takes from when a user first interacts with a web page to when the page actually responds to their request — whether it’s the click of a link, tap of a button, or other custom JavaScript interaction.
- Cumulative Layout Shift (CLS): We’ve all cursed this little feature at one point or another. This measures visual stability, or how much a visual element changes position upon page loading.
Source: https://web.dev/cls/
Basically, Core Web Vitals come down to three user experience evaluations: loading, interactivity, and visual stability. Though all four of these components are critical to assessing the overall page experience, we find that LCP is one of the more critical (and easily fixable) factors.
Optimizing LCP Metrics
According to Google’s PageSpeed Insights reports, in order for LCP metrics to be considered favorable, the load time for this element should be no more than two seconds. We zero in on LCP because it tends to have the biggest impact on overall load times.
Source: https://web.dev/lcp/
That said, there are three actionable solutions to addressing poor LCP metrics, which we’ll cover.
Contacting Server Administrator
Whether you’re working with an SEO agency or addressing these issues on your own, the first thing you’ll want to look into is whether or not the website has the resources it needs from its server.
By getting in touch with the hosting administrator, you can ascertain whether or not the server has the capacity to support your website during the busiest time of the day. If your website is hosted on a shared server, or there is not enough bandwidth on the server for any reason, that’s when it can become restrained.
Server capacity can be determined through tests run by the hosting administrator.
Optimizing Onsite Images
Large image files can wreak havoc on the LCP metrics for your website, and we’re not just talking about the image’s physical dimensions, but the quantity of images and file size of each image.
Particularly where product images are concerned on e-commerce sites, it’s important to use smaller image files (not just CSS to make them appear smaller on the front end). Most e-commerce platforms — whether it’s WooCommerce, BigCommerce, or Shopify — will offer plug-ins that specialize in optimizing on-site image file sizes.
Shopify in particular will automatically take the image you upload and generate different file sizes. The smaller image file sizes will optimize the load speed of Collections and Category pages, which are populated with rows of products.
Removing Render-Blocking JavaScript or CSS
This is where things get a little bit more complicated, but it tends to be one of the more impactful fixes for LCP issues. Each time a page loads, it uses a queue of scripts, but not all of these scripts are used to load the visible page elements.
Fortunately, there are a number of apps, plugins, and extensions that can help filter out unnecessary CSS. Tools like Minify CSS remove unnecessary white space and comments in the code.
While minifying the script is one option, concatenation is another, which can be achieved through apps like WP Rocket Concatenate for WordPress. This essentially means to combine JavaScript and CSS into the same script.
Scripts that don’t apply to the loading of visual elements on the site can be delayed to load after, so that they don’t slow down the overall load time of the site. Where there are pages with a lot of images, such as category pages featuring products, there are two CSS solutions:
- Pagination: Breaking up the product list into separate pages, so that users click to the next page to see more products.
- Lazy Load: Products load as the user scrolls down the page.
Diagnosing the Problem
Once you understand which Core Web Vitals exactly are impacting your page load times, and what onsite elements are instigating those poor scores, the solution can be reached with the help of some handy plugins, your SEO team, and your web developer.
And, fortunately, Google does equip you with all the tools you need to diagnose the problem. Scrolling through your PageSpeed Insights report, you’ll come across a section labeled “Opportunities”, which lists the specific areas of improvement for your website.
You can also access the Core Web Vitals section in your Google Search Console, where there are two sets of Core Web Vitals performance reports: desktop and mobile. With Google’s mobile-first index, it’s the mobile report you’ll really want to pay attention to first. Prioritize getting any “poor URLs” out of the red and you’ll be on the right track to getting ahead of this upcoming ranking signal.
Don’t just make these changes for Google’s sake, though. Remember that improving these metrics is just as crucial to the user experience. After all, one accidental order placed because of pesky Cumulative Layout Shift, and you might find yourself out of a return customer.
UPDATE: Metric Boundaries Changed
Since the original release of this blog post, Google has updated the boundaries for its Core Web Vital metrics. Specifically, the boundaries that used to be designated as “less than” a specific score are now designated as “less than or equal to.”
The chart below defines the new boundaries:
Source: Search Engine Land
If you’ve noticed more green scores on your Core Web Vitals report as of late, this would be the reason why.
Still a bit confused about what FCP & LCP mean? CEO & Founder Peter Dulay breaks it down (with examples!) in this 10-minute video.
