What are Google’s Core Web Vitals? How are they affecting your website performance and ultimately your business? Why is it important to work on improving your website’s web vitals? How much time do you have get your website… up to speed?
In this article we are going to address all the questions and give you some helpful tips and insights into how Google ranks the pages on your website and what you can do to improve your overall vitals’ score.
So, what exactly is the need for Google’s Page Speed Core Web Vitals?
Introduction of Web Vitals by Google was a crucial step in helping users get the best browsing experience possible by getting down to the nitty gritty of all things backend and flagging whatever factors were responsible in slowing down the loading speed of a webpage.
Did you know that several researches conducted by Google and other survey departments have concluded that over 55% of users will abandon a website that fails to load within 3 seconds? The average loading speed for a website on a standard 4G connection is anywhere between 7 and 19 seconds depending on several factors that we are going to talk about further in the article. This means most websites’ loading speeds is the reason many businesses lose out on potential customers.
Users are generally quick to form an opinion about the level of functioning and the nature of one’s business based on their loading speeds. Unfair, I know, but that’s just the way it is. Most consumers would rather switch over to another website than wait for yours to load. You may argue that your content or your products are better than your competitors’ but who’s going to convince the users of that.
Owing to this problem Google has decided to up the ante on website loading speeds by giving us a clear guideline on what we need to do to increase loading speeds. Most website owners aren’t technically proficient to keep up with Google’s constant updates and since it requires a lot of time and patience to fully grasp how a website functions behind the scenes, Google has decided to publish a set of Core Web Vitals to help us understand what exactly it is that we need to do to increase website loading speeds.
What are Google’s Page Speed Core Web Vitals?
Google has made it simple for website owners to increase their site’s effectiveness by focusing on crucial factors like loading, interactivity and visual stability. Each core web vital is an indicator of one of these factors that determine the click through rate on your website. There are many web vitals to consider but the core vitals that one needs to take note of are:
• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)
Let’s have look at what these Core Vitals are and what they’re responsible for.
1. Largest Contentful Paint – LCP is a measure of how long it takes for a page to load and for the user to run their eyes across the majority of the on-screen content. A good LCP score would mean that the page does not take more than 2.5 seconds to load. 0 to 2 seconds is a great time and anything beyond that needs work. Most websites lose users and rack up high click through rates due to their pages taking more than 5 seconds to load. Now we know LCP is the measure of loading.
2. First Input Delay – FID quantifies the time it takes for a user to interact with your page, given that they are actually on your page to carry out an actionable task such as entering an email into a field or clicking on an item on your menu to navigate further. A good FID score would require your page to have an FID of 100 milliseconds or less. FID therefore is a measure of how interactive your website is.
3. Cumulative Layout Shift – To put it simply, CLS is a measure of how stable the visuals on your website are. Many a times, when you open a website you find the elements jumping around on the screen before they finally settle and you get to see what the website looks like. This can be pretty off-putting for a user that’s new to your site and upon seeing how unstable your website is, this new user will immediately move on to the next site. CLS helps you identify the problems in your visual stability thereby helping you address those issues and fix the stability of your webpage. An ideal measurement would be one-tenth of a second.
In order to be able to manipulate technical metrics in the backend of your website you may want to seek out professional help. There are many ecommerce website development companies providing excellent web development services that can either guide you through Google’s new update or even take care of the whole situation for you.
As a business owner, handing this task over to a team of expert ecommerce developers will free your hands up and allow you to focus on developing your brand and your products which, let’s not forget, is the VITAL CORE of YOUR business.
Now that we know what the Core Speed Vitals are, let’s look at what we can do to improve our scores for each of these metrics.
Largest Contentful Paint
Many will argue that one could just as easily refer to measures like TTFB (Time To First Byte) speed and FTP (First Contextual Paint) to determine a page’s loading speed but here’s the catch. These measures are NOT from the point of view of the end user. What really matters at the end of the day is how a user views your website and whether or not they are able to get what they want and with relative speed.
LCP is more sought after here because the data it acquires is directly from the users. LCP extracts data from Chrome’s User Experience Report which is based on actual user visits, time spent on said websites and interactions with these web pages instead of computing crunched numbers based on lab simulations of loading pages from non-human visitors like Googlebot. The field data used by LCP is what makes it a preference in Google’s core web vitals.
Wondering if there’s a quick and easy way for you to know your website’s LCP score? You can now check it for yourself by referring to Google’s Page Speed Insights by clicking here and entering your website URL into the field.
As you can tell, LCP times are very important in retaining users onto your website. Anything under 2.5 seconds is a great time and will work well for your website. Times between 2.5 and 5 seconds needs improvement and anything beyond 5 seconds can spell disaster for your website.
In order to lower your LCP times, here are a few things you can do:
1. Enable Site Caching – Site caching a process where some of a site’s elements are stored in the users’ browsers on a remote server that ultimately helps users open up websites and load the elements of the website faster. There are several plugins available that will do the heavy lifting of assessing your website and loading the caches onto the server to reduce loading time and increase speeds.
2. Third Party Scripts – Often times many third party scripts tend to latch on to your website and require them to load when someone clicks on a certain landing page. This will inadvertently increase loading time thereby making your page slower. Do your best to remove any and all unnecessary third party scripts which will drastically improve loading speeds.
3. Compress Your Website’s Images – Large media files on your website can significantly slow down loading speeds thereby damaging your LCP scores. What you can do to improve this situation is compress all images and videos alongside setting up Lazy Loading.
If your website is scrollable then Lazy Loading ensures that media files are only prompted to load when the user scrolls down. This will not only enhance user experience but will also improve your loading speeds significantly.
First Input Delay
If your website is one with submission forms, logins, sign-ups, pop ups and other actionable pointers, then you really cannot ignore your FID score. Google measures how end users interact with a website based on this score. A good score would require it to load in less than a 100 MS. Loading speeds up to 300 MS can still be excused but need improvement, whereas, loading speeds beyond 300 MS can quickly spell doom for your site.
What that basically means is that your FDI score depends on how long a user has to wait to take a certain action on your website, which can be anything from opening up an accordion text menu on mobile devices to clicking on a link that takes the user to another interlinked page on your website.
On the other hand, if your website is one that is based solely on readable content such as blogs or media content, then an FID score would not be nearly as relevant. In such a case you’ll want to focus on improving the other two metrics. For those of you that are trying to improve your FID score, here are a few things you must do:
1. Developer Tools – Although this is more on the technical front, you can use the many developer tools readily available online to measure and debug FID. Total Blocking Time can be used as a proxy to support FID and lead to optimizations that can drastically reduce the FID on your website.
You can also refer to Chrome’s User Experience Report to analyze where your website might be lagging and use that to make amends. Since this report provides you real field data you’ll be able to assess your website more efficiently and pin point issues instantly, thereby getting to the root of the problem and fixing it.
2. Reduce JavaScript Execution Time – JS can be pretty heavy on the loading speeds of a website so what you can do here is limit the amount of JS on your page which will ultimately reduce the amount of time the user’s browser needs to execute said JS code. This speeds up loading time and enables users to interact with your webpage faster. You can reduce JS execution time by minimizing or deferring JS on your page.
3. Remove Non-essential 3rd Party Scripts – Third party scripts can prove to be detrimental to your FID score by hogging up on loading speeds therefore is it crucial that you remove all third party scripts that are not essential to your website.
As an added step you can also use certain caches that can help the user’s browsers to run through extensive JS codes thereby helping your website load seconds faster.
It may not seem like a lot but milliseconds can really make the difference between a user clicking on your website and on the one above yours on search pages since Google uses these metrics to rank websites on SERPs.
Cumulative Layout Shift
As mentioned earlier, your CLS depends on how seamlessly and quickly an end user is able to browse through the media content on your website. I’m sure we’ve all come across dingy websites with too many ad spaces where upon first clicking on the website you find images bouncing around the entire space trying to find their spot. Now, this is a really poor way to represent yourself through a webpage. Any user will immediately undermine whatever it is you have to offer and will not think twice before jumping over to another website.
In order to avoid such disasters from happening, you as a website owner must ensure that the visibility of your site content is just as good as the content itself. Some common causes of poor CLS are images without dimensions, Ads, embeds, and iframes without dimensions, dynamically injected content, web fonts causing FOIT/FOUT and actions waiting for a network response before updating DOM.
So how do we improve our CLS? Here’s a few ways to do so:
1. Set Size Attribute Dimensions – Imploring set size attribute dimensions to any and all media files, be it video, images, GIFs, infographics etc… will increase the readability of the media files on your website. Now the end user’s browser knows exactly how much space that element will take up on that page. This way it won’t require the browser to change dimensions since it will have read the data that you will have provided thereby speeding up the loading time.
2. Manage your Ad Spaces – Avoid placing ads near the top or the viewport. It is crucial to the presentation of the website that you manage and limit the ad spaces that you give out. Not doing so will prompt said ads to randomly appear on the page, pushing content down, up or to the side, taking away from the crucial top fold area that can make or break your website visits.
3. Add Effective UI Elements – When adding UI elements to your page, keep in mind that the user is here for the information that you are providing and not for spam content that will increase you click through rate. So when you add new UI elements make sure to not crowd the top fold and add them below the fold so the user gets what they’re looking for and spend more time on your page which will ultimately add to your CLS score and work to improve your overall rankings.
Here’s how to interpret your CLS score:
Good – <= 0.1 seconds
Needs improvement – > 0.1 <= 0.25 seconds
Poor – > 0.25 seconds
When does Google Plan to implement these Changes?
Google says they will roll out these changes alongside their Page Experience Report in the Core Update of May 2021. That having said, make sure all your URLs, layouts, content and graphic elements are updated and optimized to help Google scan and rank your pages higher in SERPs.
Good luck!