Having your core web vitals in order is crucial to your Google search performance, yet it is an aspect of website development and management that is neglected by many businesses.
Just 13% of current platforms pass a standard web vitals benchmarking test, while a high percentage of business and even web developers aren’t aware of what the requirements are, let alone how to meet them.
In a nutshell, core web vitals produce a report of your website’s performance and provide a useful framework for auditing and improving the overall experience for visitors and boosting ranking on Google.
The latest insight indicates that core web vitals will develop to become a significant factor for the search engine, so neglecting this aspect of your digital business is particularly ill-advised.
Fortunately, it’s relatively straightforward to develop your knowledge, measure your performance and take the necessary action to optimise your platform.
What makes up core web vitals?
There are several aspects that contribute to your overall core web vitals performance and each requires its own strategy for optimisation.
Generally speaking, the factors associated concern site speed and overall experience for the user, and so should already been a significant consideration as part of the web development.
By addressing these areas and improve core web vitals, not only will you positively influence the way Google views your site, but you will also optimise the customer journey and deliver a much cleaner and more efficient service to your end user.
Your core web vitals are broken down into three key areas:
- LCP (Large Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
LCP (Large Contentful Paint)
LCP measures the user’s page load time in a precise way and is calculated by the time taken for the largest image, text block or element that is visible to the user to load.
Google’s own benchmark in this area is 1.5 seconds, so if your frontpage takes longer then you should consider making improvements, although anything less than or equal to 2.5 seconds is still considered fast by industry standards.
If your load time is clocked at more than four seconds then you should consider taking urgent action.
Several factors can dictate load time, such as the rendering process or the processing behind large videos, images or animated text located in the user’s visible frame, so it should be relatively straightforward to identify the aspects that are having a negative effect.
Additional CSS, your server performance and client-side rendering can also be a factor.
FID (First Input Delay)
Speed is also a factor in FID performance. But, while LCP broadly tracks page load times, FID records the responsiveness of your website to a user function.
In practical terms, this refers to how quickly your platform ‘does something’ when a visitor taps or clicks a link. The delay between an input and response is recorded as your FID and although this figure may appear miniscule, it can significantly impact overall user experience.
If your website’s FID is less than 100ms – a tenth of a second – then its FID performance is considered good, while anything over 300ms – just less than a third of the second – should command your attention, as improvements are required.
CLS (Cumulative Layout Shift)
A key part of the user experience alongside speed is the stability of a particular platform.
Instability can be identified by visble shifts or jumps while the visitor scrolls, or aspects of the page moving around while pages load.
This can contribute to a frustrating experience for the user, which can also damage trust, while it’s also a key factor in core web vitals.
Instability is measured by CLS, which awards a score between 1 and 0 based your website’s performance. Anything over 0.25 is regarded as a concern, while a score below 0.1 demonstrates that your platform offers a smooth and stable experience.
How do I measure my core web vitals?
Understanding what makes up your core web vitals and being able to accurately measure these aspects are distinct challenges. Fortunately, there are tools and resources available to help you establish your own benchmarks.
From here, you can take action and measure your progress.
- GTmetrix provides a free tool that monitors your site’s performance, reveals why it’s slow and proposes optimisation opportunities.
- PageSpeed Insights, from Google, analyses the content of a web page, then generates suggestions to make that page faster.
- Lighthouse is another Google app that offers an automated tool for improving the performance, quality and correctness of your web apps.
- Google Search Console is a much broader tool from the company that will measure search traffic and help you make optimisations.
These free tools will help provide an excellent starting point for optimising your core web vitals, and will equip you with the knowledge and data required to begin to make improvements.
You may also consider investing in paid software to gain a deeper insight, such as by using GTMetrix’s Growth package, which allows you to seamlessly monitor a network of platforms.
How can I improve my core web vitals?
Once you understand how well your website is performing in key areas, you can make plans to take action.
Naturally, there are tools and external resources available to help you address areas of concern, but it’s also possible to take action yourself to eliminate issues that are affecting your website’s performance.
Remove unused CSS
Many developers utilise CSS to deliver customisation beyond the confines of a particular theme, builder or lay-out.
Often, CSS is utilised to improve the user experience, such as by speeding up the check-out process or removing obstructive elements.
But it’s important to keep a handle on any additional CSS implemented, as unused code, or code that is no longer delivering a benefit, can slow your website down and contribute to instability, potentially impacting your LCP, FID and CLS performance.
Optimise image and video
Large, immersive elements can also deliver an engaging experience for first-time visitors to your platform but you should ensure that there is a balance.
Larger file sizes will generate more requests and result in a slower load time, so you should take steps to optimise images and video, and keep larger file sizes to a minimum.
Utilise new file formats for images, such as Webp, JPEG 2000 and JPEG XR, can have a significant impact in this area and boost LCP performance.
Minimise layout shifts
Layout shifts can contribute to a frustrating performance for visitors and significantly damage your site’s CLS benchmark, so take time to conduct vigorous testing to guard against these kinds of issues.
If images or other elements are jumping around the page while it loads, or even just while the user browses the site, then consider removing revisiting them or modifying the code.
Minimise Initial Server Response Time
Alongside stability, speed is the name of the game for web core vitals and you should take steps to reduce your platform’s initial server response time to boost your LCP performance.
This can be achieved through the use of a caching plug-in or by taking steps to identify issues at server level, such as by optimising application logic to deliver an instant speed boost.
Remove Render Blocking Resources
Render blocking can also contribute to slower response times, but you can remedy this issue by modifying code in the <head> of your website. Ensure that all CSS and Java Script is deferred where possible.
You should also take steps to defer offscreen images. This technique is also often referred to as ‘lazy loading’ and ensures that only required content is generated. This will reduce the number of load requests and help contribute to better FID and LCP scores.
As Google prepares to base more of its decision-making on core web vitals, it’s more important than ever to ensure you have a handle on your own website’s performance.
By developing your knowledge of the aspects behind core web vitals, including how performance is benchmarked and how you can take action, you can improve user experience and boost SEO performance.