Core web vitals, for anyone who doesn’t know, are a set of metrics pertaining to the speed, user-friendliness & responsiveness (in relation to interactivity) of a website. These metrics were released by Google in an attempt to make a larger push for improving the overall user experience, by detailing the most common issues many sites face cross-platform.
You can view these metrics by heading over to either the Google Pagespeed Insights Tool or by using the Lighthouse audits found within your dev tools (in Chrome).
What metrics are available?
Included within the reports are many new individual metrics. These help to more properly assess factors relating to speed, which may otherwise be neglected.
First Contentful Paint
The time which it takes for the first piece of content to be painted onto the screen can be seen by checking the visual timeline
Time To Interactive
Time to interactive details the point in which the user can begin to actively use the page. (They are no longer render-blocked owing to scripts still firing, or the dom still finalizing).
Speed Index
This score is calculated by how quickly content becomes visually apparent whilst the page is being rendered. Google has also stated that they run this through Speedline (node.js module) to calculate an index score.
Total Blocking Time
Total blocking time differs from the normal “TTFB / SSL” waterfall blocking, as this is the time between the first contentful paint, and the time to interactive. This essentially details how long it takes from the user seeing content appearing, to the time it takes to properly interact with the content.
Largest Contentful Paint
Largest contentful paint covers the point in which the largest item of the page is painted into the dom (e.g. text/image/video/wav etc).
Cumulative Layout Shift
Cumulative Layout Shift is the amount of movement by visual elements within the device viewport. This is an important living standard, as the erratic movement or popping in of elements (especially ads) can cause users to click into elements they did not wish to; this can immediately lead to negative user experiences’.
Why should I optimize towards the new web vitals?
As noted above, web vitals are vital. Not just because they are now intrinsically linked as ranking signals, but because of the reasoning behind these metrics. User experience is everything, and returning users help build your brand, and generate the revenue to ensure you excel as a business. Optimizing towards the web vitals is a small step, but it’s a step in the right direction.
What can I do to improve my web vitals?
There are a number of quick wins which can be employed to help actively improve your web-vitals report scores. Most of these are very quick & simple fixes. Depending on which CMS, they may not require additional development support to implement.
Caching
Caching (either full page caching or static resource caching) might not impact on your web-vitals score, but the overall experience increase your users will receive if cache headers are properly set will speak volumes.
Lazy Loading
Lazy loading images (or not loading images below-the-fold) is a fantastic way to keep your LCP & blocking time low. It will also allow for a quicker time to interactive. Lazy loading is simply the process of not loading the image until the DOM realizes that it’s in view; at which point, JavaScript will inject the image.
Async / Defer
Adding async / defer to JavaScript files helps to negate blocking and will decrease your time to interactive by actively instructing the browser to wait until the DOM is loaded (defer), or to load the scripts whilst other scripts are loading (multi-thread / async).
Optimising Images
Optimizing images is always one of the most efficient ways to reduce the size of pages. It’s a very regular occurrence to see that someone has used a 5MB Shutterstock image in a blog article but the ramifications of this can be massive. For example, if someone has uploaded a 3MB image into a “feature” section of mega-menu.
Updating server
This is often one of the most overlooked features for page-speed improvements. You can perform all of the optimizations under the sun, but if your server (especially shared hosting) does not have the resources to keep up with the demand, you’re never going to attain perfect scores. As a direct consequence, never improve upon the overall user experience.
Need help improving your web vitals?
At Colewood, we have a range of in-house, technically-minded individuals who love nothing more than seeing increased performance statistics, and heightened user experience. If you would like to find out more about both the one-off services, and monthly packages we offer, drop us an email at seoteam@colewood.net, or use our contact form to find out more.
