The Google Core Web Vitals update is coming in May 2021. We know this because Google gave us a heads up on the next algorithm update to help us prepare and adjust so that the site's organic traffic won't be lost.
Rarely has Google given such warnings before, but after 2020, many people depend on their business websites' functionality and visibility. Therefore, we are witnessing how Google tries to help us by explaining this scheduled update's essentials.
To ensure that your WordPress site is ready for the update, all WordPress developers need to go over the whole concept explained in this text and follow the optimization tips. Putting some extra work now will undoubtedly pay off later when the update takes place.
Table of contents
What Are Core Web Vitals?
Core Web VItals, also known as web vitals, web core vitals, and Google web vitals, are the three factors: loading, interactivity, and visual stability that Google considers essential for the overall user experience of the website. These three factors have three specific page speed and user interaction measurements:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
These three factors will be the main point around which the Google Core Web Vitals algorithm update will revolve and decide Google's page experience score. This score will make or break your website after the update is complete.
To check your current web core vitals data, go to your Google Search Console account and choose the "enhancement" section.
A Closer Approach to the Core Web Vitals
What is a good or bad score for each of the web vitals, and how can it be improved? Let's have a look.
Loading (Largest Contentful Paint) Score
It measures the perceived load speed of the page. To be more precise, it refers to the point when the main content is loaded according to the view of the actual user. Please note that the LCP speed metric is not like the other two, the TTB and First Contextual Paint, because the latter don't represent the user's viewpoint when opening a webpage. The LCP metric focuses solely on the importance of seeing and interacting with the page, which means it puts the sole focus on the user.
Google has very specific LCP guidelines:
- A Good score is 0-2 s loading time
- Needs improvement is 2-4 s loading time
- A Poor score is more than 4 s loading time
How to Fix the LCP Score
There are several things you can do to get rid of this problem.
Upgrade Your Web Host Plan
With a better web host plan, you will have a faster overall load time score, including the LCP. More specifically, there are two essential features of a web hosting plan that impacts the website speed and performance - the hard drive and the resources.
If the hard drive is a solid-state drive, you will get a much faster and more reliable service than the standard hard drive. This alone will get you better performance and a faster page load time.
A web host plan with better resources like more bandwidth and RAM will speed and better power your website. A dedicated server or a VPS rather than the shared server will also offer you many more resources and, consequently, a far better performance.
Get Rid of Unnecessary Third-Party Scripts
Did you know that third-party scripts slow down a page by 34ms? That is why you need to remove all unnecessary third-party scripts.
These include ads, social media sharing buttons, video embeds, etc., whose role is to make the website more interactive, dynamic, and interlinked, but at the same time can pose a threat to slow down the page load time.
Not to be misunderstood — some of these third-party scripts are very important for the website's functionality or monetization. So, when I am talking about getting rid of third-party scripts, I am thinking about the unnecessary ones without which your website will be functional.
Therefore, here is what you need to do:
- Decide which third-party scripts are necessary and which are unnecessary
- Use fewer plugins
- Use your own code solutions
- Activate lazy-load third-party JS.
Remove Large Page Elements
To check whether your website has an element that is slowing down the LCP on the page, go to Google PageSpeed Insights, enter the URL of your website, and see the diagnostics section's result.
Remove all the large files that are causing the slowing down.
Minify Your CSS
To minify your CSS on your WordPress Page, you can use the Better WordPress Minify plugin, which will show as a menu item upon installation. Click on it to go to the settings page and check the first two options to perform an automated minification of JS and CSS files on your WordPress site.
Interactivity (First Input Delay) Score
The second of the three Google Core Web Vitals is the First Input Delay factor, and it refers to your website's interactivity score. More precisely, the FID measures the time the user spends to actually interact with the page (interactions including choosing an option from a menu, clicking on a navigational link, submitting your email, opening "accordion text" on other devices.
This is an essential factor because Google evaluates how real-life users interact with websites, and the results directly influence the user experience of that website.
Again, there are specific guidelines by Google for a perfect FID score:
- Good score <100 ms
- Needs improvement 100-300 ms
- Poor score >300 ms
This score is especially important for a login page, sign-up page, or any other type of page where users are expected to click on something, whereas for content-based pages, the FID score is not that important.
How to Fix the FID Score
First, you need to check your FID Score. You can do that by using one of the following field tools: Chrome User Experience Report, PageSpeed Insights, the Core Web Vitals Report from the Search Console, and through the web vitals from the JavaScript library.
Now, to fix the FID score, you need to do the following activities.
Minimise/Defer JavaScript
Website visitors won't be able to interact with the page while at the same time the browser is loading up JS. So, what you need to do is minimize or defer JS on your page. To do so, you can use the Better WordPress Minify plugin mentioned in the previous section, or you can check other plugins or online tools.
Remove Third-Party Scripts You Don't Need
Again, remove plugins and other third-party scripts that are not key to your site's functionality. These, apart from impacting the LCP score, can negatively impact the FID score as well.
Browser Cache Is a Must
Your content will load faster by having a browser cache because the visitor's browser will scan over the JS loading tasks much quicker. To enable browser caching in WordPress, you need to put a bit of code in the .htacess file. Here is how:
For the Apache server:
- Access the website files
- Add this browser caching code in the .htacess file
#Customize expires cache start - adjust the period according to your needs
<IfModule mod_expires.c>
FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
ExpiresActive On
ExpiresByType text/html "access 600 seconds"
ExpiresByType application/xhtml+xml "access 600 seconds"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
#Expires cache end
- Add cache-control headers via Apache:
# BEGIN Cache-Control Headers<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header append Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header append Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header append Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header append Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
</IfModule>
- Turn Etags off by adding this piece of code
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None
For the NGINX Server:
The pieces of code are a bit different for this type of a server simply because there isn’t a .htaccess file. What you need to do instead is go to /etc/nginx/sites-enabled/default and paste this code:
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
location ~* \.(pdf)$ {
expires 30d;
}
}
Add Cache-Control Headers (NGINX)
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 90d;
add_header Cache-Control "public, no-transform";
}
Visual Stability (Cumulative Layout Shift) Score
The final of the three Google web vitals is the CLS score, which gives insight into whether the annoying and unexpected page content movement is prevented. Or, in simpler terms, the CLS score shows how stable a page is while loading. This means that if the page's elements move around as the page loads, your CLS score will be high - which is pretty bad.
The specific criteria by Google for this core web vital is:
- Good score >0.1
- Needs improvement 0.1-0.25
- Poor score >0.25
How to Fix the CLS Score
To check your CLS score, use the Chrome User Experience Report, the PageSpeed Insights tool, or the Core Web Vitals report by the Search Console.
To fix it, do the following activities.
Set Size Attribute Dimensions for Any Media
Your video, images, GIFs, infographics, etc., must have a predetermined size dimension so that the user's browser can figure out exactly how much space the elements will take up on the page. And the best of all is that it won't change it while in motion as the page loads completely.
Ads Elements Should Have a Reserved Space
By ensuring this, the ads won't pop suddenly up on the page and push the content down or to the side.
The New UI Elements Should Be Added Below the Fold
Hence, the new UI elements won't push the content where the user doesn't expect it to appear.
How Can You Improve Core Web Vitals Altogether?
As you've read so far, each factor can be approached and dealt with individually. However, there are several actions you can take to improve the scores altogether. Here are some of them.
- Make sure the above-the-fold content loads fast
- Minimize long tasks to optimize main thread activity
- Make sure the mobile responsiveness is fast
- Check the security of your website looking for issues
- Serve forms & embedded resources over HTTPS
To Sum Up
Optimizing the Core Web Vitals should be your priority before the Google Algorithm Update rolls out. That way, you will make sure that your WordPress website will be ready to tackle the outcome of the new update and maintain its rankings and positions on the Search Engine Page Results. Given that Google warned us about the upcoming update back in May 2020, now is the best time to take action and improve the scores of the three Google web core vitals.
