What are Google Core Web Vitals
Remember when Google only took into account your page’s content for SEO rankings? Those days are long since gone. Your site’s performance and speed now play a key role in how Google and other search engines view as well as rank your site for SEO. The metrics Google relies on are what is known as Core Web Vitals.
When the world was enamored with the launch of the Apple iPhone in 2007, the web started to see a large shift in how visitors saw and got to websites. Websites were being viewed more and more on mobile devices with limited power compared to traditional desktops or laptops. Phones were less powerful and had fewer resources than their computer counterparts.
With the rise in Mobile use and less powerful devices, interactive websites can take a lot of resources to load, leading to less than stellar experiences for your visitors on mobile. With Google being the leader in the search space and, let’s be honest, the web as a whole, they recognized this and released guidance on how to measure your site’s speed and performance. Enter Google’s Core Web Vitals and their 3 main pillars designed to help you enhance your site’s speed and performance. These enhancements are meant to provide a better overall user experience.
What are Google Core Web Vitals?
By definition, Core Web Vitals as of July 2024 are:
Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.
The metrics that make up Core Web Vitals will evolve over time. The current set for 2020 focuses on three aspects of the user experience—loading, interactivity, and visual stability—and includes the following metrics (and their respective thresholds):
– Source: https://web.dev/articles/vitals
One of the keys here is that Google just doesn’t scan your site to determine these values. They use real-world data from users who have visited your site. They do this by incorporating data captured via the Chrome web browser as well as data from Google Analytics. This makes these metrics not arbitrary but results based on real data.
With this data, we, as website owners, as well as search engines like Google, can now measure not just how your site performs but also how it impacts your visitors and their engagement. Engagement is not just important to views on your site but also a key value in Search Engine Optimization (SEO), which is how Google ranks your site in their search results.
Simply put, better user engagement is better for your site and better for your SEO.
The Three Core Web Vitals
Now that we have covered the basics of Core Web Vitals let’s look at the three pillars used to score your site.
Largest Contentful Paint (LCP)
By definition, the Largest Contentful Paint (LCP) measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of the page first starting to load.
LCP reports the render time of the largest image or text block visible in the viewport relative to when the user first navigates to the page.
To put this even more simply, LCP measures the time between when the user hits go in their browser and the time it takes the largest image or block of text to appear. By Google’s standards, this should happen in less than 2.5 seconds.
Several factors play a part in LCP, with 2 being the most common.
Server response time is one of the top things that can impact your LCP. This mainly has to do with your host. It is the time it takes from when someone tries to go to your site and your host to respond.
The second most common is resource load times, with images in particular. Images are a key part of websites, but a common mistake people make is putting large images in a spot meant for a small image.
The other less common but still important parts are render-blocking JavaScript and CSS, along with client-side rendering.
Interaction Next Paint (INP)
Interaction Next Paint (INP) measures interactivity. To provide a good user experience, pages should have an INP of 200 milliseconds or less.
INP is a metric that assesses a page’s overall responsiveness to user interactions by observing the latency of all clicks, taps, and keyboard interactions that occur throughout the lifespan of a user’s visit to a page. The final INP value is the longest interaction observed, ignoring outliers.
It should also be noted that INP replaced the metric First Input Delay (FID) in early 2024. Although INP is different they are very similar as well.
An easier way to look at INP is that it measures how quickly or easily someone can interact on your site, mainly by looking at clicking. The ability to click or interact should be less than 100 milliseconds.
Common things that can impact your INP include heavy use of JavaScript, Long Task Duration, Third Party Scripts, and excessive Main-thread work.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.
CLS measures the largest burst of layout shift scores for every unexpected layout shift that occurs during a page’s entire lifecycle.
A layout shift occurs when a visible element changes its position from one rendered frame to the next. (This guide covers Details on how individual layout shift scores are calculated later.)
A good CLS score should be 0.1 or less.
Some key factors that impact your CLS score are improperly sized images, ads, embedded objects like videos, and iframes without proper dimensions. Dynamically injected content and web fonts that cause FOIT/FOUT can also have a large impact.
How to Optimize Each Metric
Improving LCP
There are a few ways you can improve your LCP times. The first is improving your server response time or Time to First Byte (TTFB). This may seem overwhelming to read, but your hosting company will be happy to help you with it. Also making use of CloudFlare with page caching can have a large impact. Again something your host or the right IT Person like those of us at Phynite can help you set up.
As we mentioned above, one of the big things you can do is use the proper image in the right spot. We commonly think that Google wants 1200 x 1200 images. That is true for featured images in a single blog post. But on your home page, you do not need that large of an image everywhere. Scale it down to fit the size you need, and make sure your images are exported and optimized for the web. Plugins like ShortPixel and Smush can help with this.
Another way to improve is to use a performance plugin like WP Rocket or PerfMatters. While these plugins aren’t free, they go a long way to optimizing your site and making it faster. They can load images only when needed, delay JavaScript to speed up your site and optimize CSS for you all within a single plugin.
Improving INP
Improving your INP can be a little overwhelming. The good thing is that plugins like WP-Rocket and PerfMatters can also help out here. Again, using their defer JavaScript (to delay it) and Lazy Loading (only loading images when needed) features can have a large impact on your FID.
On top of that, be smart with your blog. Limit the number of plugins you have. Get rid of the ones you are not actively using. This can reduce the amount of JavaScript on your site.
Also, limit the amount of 3rd party scripts that your site has. There are some core ones like Google Analytics that you need, but evaluate which ones you have and decide if you need all of them or not.
Improving CLS
Taking steps to improve your CLS can be easy. The first is to make sure you are defining the size of your images. Do not simply let the browser do the work of determining size by setting the height and width attributes of an image.
If you are running ads on your site, predefine an empty block that is the right size where your ads will be loaded, eliminating the need for your ad network to dynamically draw that blow.
Avoid dynamically adding content above existing content. Doing this will shift your content and negatively impact your CLS score.
Also, make use of CSS for animations, not JavaScript.
Tools for Measuring and Monitoring Core Web Vitals
There is a lot to Core Web Vitals, but there are a lot of tools available to help you understand them. Make use of these tools, whether from Google or 3rd parties, to help improve your Core Web Vitals.
Google Tools
Third-Party Tools
Core Web Vitals are Important
We covered a lot about Core Web Vitals, what they are, and why they are important. To summarize, on the modern internet, it is more than just the content on your page; it is also how that content is viewed and how easy it is for your visitors to view your content. Things like image size in LCP, deferring JavaScript in INP, and finally, adding size attributes to your images for CLS can make a large impact on improving yours.
Because of this, Google Introduced Core Web Vitals as a way to measure your website’s performance and actively incorporates those results into how it calculates your SEO score.
Get started today by checking out where your Core Web Vitals stand by running a free report on Google’s Page Speed Insights page. Or reach out to support@phynitesolutions.com to talk about ways Phynite can help you improve your Core Web Vitals.