No one is willing to wait a long time for your website to load or put up with a poor experience in today’s day and age. Your visitor will simply hit the back button and move onto the next site as if yours never existed.
To give their users the best experience possible, Google has released Core Web Vitals.
Sections:
- Why It’s Important
- What Are Core Web Vitals?
- Improving CWV
- Fixing Your CWV Scores
- When Is The CWV Update Rolling Out?
As the owner of a website, by taking a look into these metrics, you’ll be able to see how speed, visual movements, and responsiveness play a part in user experience and soon-to-be website rankings.
With a Core Web Vitals report, you’ll gain insight into the specific performance of each page on your website so that you can improve the overall experience for your visitors.
It will also let Google’s crawlers know that your site complies with their new ranking factors and deem your website worthy of a high ranking in the search results.
Why Is Page Experience and Speed Important?
There are some shocking statistics about page experience and speed and how it can relate to your website’s revenue.
According to Google, if a page’s load time increases from 1-3 seconds, the bounce rate increases a whopping 32%.
If the same metric increases from 1-6 seconds, you can expect to see your bounce rate increase by 106%.
These aren’t small numbers by any means and can severely impact your business if you’re not paying attention to them.
A visitor will be unforgiving if these metrics aren’t lightning fast. They will leave your site and never look back.
So, now it’s important to make sure your metrics are in tune with what Google is looking for so they can reward you with higher rankings than your competition.
What Are The Core Web Vitals Metrics?
To the untrained eye, it looks like a web page loads all at once, but what happens is it is loading pieces one after the other until it’s all complete.
Everything on the page, in theory, will load at a different time. Everything from tracking scripts, to images, to content has a place in the loading time and contributes to how your pages perform.
Let’s dig into the metrics Google will be looking at when it comes to Core Web Vitals and the thresholds you’ll want to achieve for each of the 3 main metrics.
Largest Contentful Paint
Largest Contentful Paint (LCP) will measure how a page loads. It looks at the time taken to load the largest part of the content on the page when the URL is requested from a user.
The recommended threshold for LCP is to keep it under 2.5 seconds.
First Input Delay
First Input Delay (FID) will measure the interactivity of a web page. This metric looks at the time someone takes an action on your site, like clicking a link or button to how long the browser will respond to that action taken by the user.
Whatever action is taken by the user first will turn your website from a static page to an interactive one.
This metric is crucial because it makes a good impression on your website visitors if your website is running smoothly when they try to navigate it. The recommended threshold for this metric is under 100 milliseconds.
Cumulative Layout Shift
Cumulative Layout Shift (CLS), put simply, will measure how the layout of your page shifts. You’ll see that the lower the score on this metric, the better, where if you have no shifting of a page, you’ll see 0, and more shifting will result in higher scores.
Some culprits for a poor score on this metric can be banner ads, buttons, or images that cause the text on the page to move as it’s loading.
You want to reduce any shifts across your website, so the recommended threshold for this metric is .1 or less.
Google has analyzed millions of pages across the web and has found that for websites that are below the above thresholds, users are unlikely to abandon the website.
Improving Your Core Web Vitals Scores
Before you or your developer starts making a whole bunch of changes, you’ll want to get a baseline of your site.
I like to take 3 measurements first. You’ll want to get baselines from the following sources:
Yes, these tools will have overlap, but I like to see how each one measures results before and after, and I recommend you do the same.
For PageSpeed Insights, you’ll want to plug in your domain name and click “Analyze”. You’ll be able to see how your website performs on both mobile and desktop.
This is the result on desktop:
For GTmetrix you’ll do the same by plugging in your website URL and clicking “Test your site”.
This is the result:
To run a Google Lighthouse report, there are a few ways you can do it. One is through the development area within Chrome. Another is using a website mentioned above to check it.
Same idea as the above two. Just plug in the URL and click “Start test.”
Something worth noting is that you’ll notice that mobile versions, on average, take 87% longer to load than the desktop version.
A few causes for this will be the Content Management System (CMS) you’re using on your website, if you’re using a Content Delivery Network (CDN), the hosting company you’re using, and everything that’s running on your web page.
On these reports, you’ll start to notice what we talked about earlier and see the metrics we were talking about. Digging into these metrics are easier said than done.
These tools will give you information on what to improve on your website, but not too much on how you can go about it.
Here’s how you can fix more of the common issues.
Fixing Scores On Your Core Web Vitals Report
When looking at these reports, you’ll want to tackle the “Poor” labels first. That should be your #1 priority to get as many of those fixed as you can.
It will be helpful for you or your development team to make a list of what you want improved upon.
Let’s take each section piece by piece and see how you can improve each metric of Core Web Vitals.
What LCP Is Affected By
Slow servers.
The faster your server’s response time, the quicker it can render what’s on the screen. You can get faster hosting, use a cloud delivery network (CDN), and cache assets.
Client-side rendering.
If you have a website that mostly renders on the client, it can have a huge impact on LCP if a lot of JavaScript is being used.
Specific optimizations need to be in place because users might not be able to interact with your website until all executions of JavaScript have finished downloading. You do this by minimizing critical JS, using server-side rendering, and pre-rendering.
Render blocking JavaScript and CSS.
You can achieve this by deferring non-critical JS and CSS to load your main content quicker. You’ll also want to defer non-critical CSS, inline critical CSS, and minify CSS.
Slow resource load times.
Image and video elements are usually the biggest culprits within LCP.
You should ensure these are loaded as fast as possible by image compression, preloading resources, compressing text files, delivering assets based on network connections, and caching assets properly.
FID Is Affected When You
Reduce the impact of 3rd party code.
Any script hosted outside of your domain will get calculated on how long these scripts block the main thread.
You should audit the tracking scripts you’re using and remove any that are no longer serving you. Also, consider running specific scripts on pages that you need them to run on instead of site-wide.
Reduce JS execution time.
When any JS takes 2 seconds or longer to execute, you’ll get a warning. If it’s over 3.5 seconds, then it’ll fail the audit.
To combat this, you’ll want to minify and compress your website’s code and remove any code you’re not using. You can also reduce time by using the PRPL pattern, which caches your code.
Minimize main thread work.
Part of the main thread is to process any user events, so if it’s busy doing something, it may not be responsive to the users trying to navigate your site. This leads to the user having a bad experience and will likely leave your website.
You’ll want to evaluate your scripts by optimizing any third-party Javascript, your style and layout by avoiding large, complex layouts, your rendering by simplifying your paint complexity, and parsing your HTML/CSS by extracting critical CSS, minifying your CSS, and deferring any non-critical CSS. Of course, you’ll want to also remove any unused code.
Keeping request counts low and transfer sizes small.
What affects this is:
- Your CSS & JS
- Images
- Fonts
- Documents
- Media
By default, CSS and JS files can’t render content on the user’s screen until all the requests have loaded. If you’re using a slow server for example, the entire process of rendering these requests will be slow. You should load the code that you absolutely need first.
Unlike CSS and Javascript, images are not render-blocking. However, that doesn’t mean they can’t negatively impact the performance of your site. You’ll want your images to load lightning fast as it can affect all the main Core Web Vitals metrics mentioned above.
If your fonts are loaded inefficiently, you will cause text to load invisibly on your site when the page loads. You’ll want to load a font that’s a default on your visitor’s device and then load your custom font once it’s finished the download process. You’ll see this affect your FCP metrics.
Large documents will cause the browser to have to use its resourcing parsing HTML, which will cause your FCP metrics to be lower.
Any type of animated GIF files or similar media will also be problematic to your scores. You’ll want to replace these types of files with a video so that it can load faster.
CLS Is Affected When
Images do not have dimensions.
With any images or video elements you have on your page, and throughout your website, you’re going to need to include any width and height attributes on these specific elements.
You can do this by using CSS aspect ratio boxes to keep the space required available while the element is loading.
By setting the image or video’s width and height, you’ll be preventing any layout shifts from happening.
Banners, embeds/iframes do not have dimensions.
One of the biggest contributions to a shifting layout is blocks of advertising. Often, ad sizes are dynamically supported, and many different versions of an ad can display on your website.
The embed of an advertisement might not look the same in every instance so the block you use to display the ad may not have enough space reserved, thus causing layout shifts to happen once it’s all loaded on the page.
If you have multiple locations for these ads happening on the same page, there will be many layout shifts as they all get loaded into the page.
As with the image/video recommendations above, the same applies to advertisements.
Content is injected onto the page dynamically.
As a general rule of thumb, you should not insert any new content above your existing content on pages of your website.
You’ve probably experienced layout shifts yourself due to any pop-ups at the top, middle or bottom of the viewport when a site is loaded.
Very similar to ads, banners, and forms that shift around content will affect your layout.
Elements such as a newsletter signup, related content blocks, app installation banners, GDPR and compliance notices are the more common injections.
It’s a good idea to avoid these if you can, or have them appear differently, so that it doesn’t cause any layout shifting to occur.
Your fonts are causing a flash of unstyled or invisible text (FOIT/FOUT).
Fonts have also been known to cause layout shifts to happen, and it’s easy to spot when it’s happening.
When the fallback font is removed with a new font, you get a flash of unstyled text (FOUT), and sometimes invisible text can be shown in place of a font before it’s been rendered, known as a flash of invisible text (FOIT).
You’ll want to avoid both of these from happening, so if you see it, you’ll want a developer to allow the rendering behavior of fonts to be modified with specific values while also using a loading API to reduce any time it takes to get the fonts your site is using.
When Is The Update Rolling Out?
Google announced that in the beginning of May 2021, Core Web Vitals would be included in the algorithm and affect rankings.
Editor’s Note: In an announcement on April 19, 2021 Google noted that the rollout will begin in mid-June but won’t hit it’s full impact until August.
Originally this was planned for a year earlier, but the release was pushed back due to the impact of the Coronavirus.
It’s important to remember that these are a small part of Google’s overall search algorithm.
As you begin to fix your website, things such as mobile-friendliness, switching to HTTPS, intrusive interstitials, and secure browsing are other areas that need to be addressed within your site as well, if it hasn’t been already.
Author:
Mario DeAlmeida is the VP of Marketing at Building Security Services. Having over 13 years of SEO experience, he’s been dedicated to increasing website visibility in search.