If you work in the world of search engine optimisation, are a developer, or perhaps you’re just a keen website enthusiast – you’ve probably heard of Google’s Core Web Vitals. This is the latest in a set of standards set by Google to ensure the quality of websites that they allow the privilege of ranking in their search engine.
In short, these recommendations are a subset of Google’s Lighthouse (a tool for measuring page performance), focusing specifically on the efficiency of site loading speeds. The vitals are split into the following four main areas:
First Contentful Paint
In this context, “paint” refers to content being loaded onto the screen. Think of your browser as a canvas and each second is another brush stroke – you want the painting to be finished as quickly as possible (with as few brush strokes as you can get away with).
The first contentful paint is what the user will see without scrolling. This is usually the header of the page – perhaps a featured image and a title, sometimes a small paragraph of intro text as well. This is the first contentful paint for our own website’s about page:
As you can see, we have an initial blank screen, followed by the text content, and then our header image loads in. Your first contentful pain score will be the time in seconds to have all of the above the fold (what you can see on your device without scrolling) content loaded – the lower the better!
Here are our web vital scores for this page:
Lovely stuff!
This is perhaps the most important of the web vitals (although they all have a 25% weight when it comes to ranking impact) – if the user just sees a white screen they’ll be gone ASAP. It’s been well documented that anything more than 3 seconds for a page to load, and the bulk of your audience will be out of there. When was the last time you waited that long to view a page?
Make sure to keep all your above the fold content as optimised as possible to ensure a quick first contentful paint. Avoid large images or video content in the header, and if possible defer the loading of any additional scripts or stylesheets that only affect below the fold content.
Largest Contentful Paint
This is very similar to the first contentful paint – only it refers to the “main” content of the page, what the user has actually come to your website to see. If you’re running a blog this would be the article text, for YouTube this would be the actual video and its details. Google recommends that you load this in within 2.5 seconds. Here’s an example of the largest contentful paint that was registered on our own site:
You can see that Google has picked up the opening <h2> tag, which acts as the subheading and initial explanation of this page. Ideally we would want the entirety of the page content to be picked up with this field, but as we’re using our custom page builder which combines multiple elements (image sliders, embedded videos, etc) this isn’t always possible.
This can be a tough vital to keep down as you want as much content as possible in the main body of your page – and you don’t want to limit your content creators by pestering them to use smaller images or short videos in their content. A good combination of loading scripts efficiently, configuring your cache settings optimally, and building the site to the latest industry standards will keep your largest contentful paint score down.
First Input Delay
First input delay refers to the time it takes for the user to be able to interact with the page (scrolling, clicking an email link, filling out a form, etc). This is another one that you want to be as low as possible – the sooner users can start interacting with your site the better.
There’s nothing worse than trying to click on a button or open a menu and nothing happens so you click, again… and again until it suddenly works and the site you’re on has a meltdown trying to process all the clicks at once!
How Google ranks first input delay speeds.
This is actually one of the less common vitals for a site to fail, usually because a bad first input delay would be particularly noticeable (and frustrating!) to not only the developer working on the website, but also the users on there.
If your site is struggling, the best place to start is often reducing the number of scripts on the site, as well as the size of the initial page load. Sure, you might want to load a nice HD company video on the homepage – but if it prevents users from being able to click on a call to action or scroll down a page (if only for a second or two) – it’ll definitely put a few people off.
Cumulative Layout Shift
Cumulative layout shift is probably the most noticeable of all the core web vitals – and frustrating. It refers to the page “shifting” slightly when it finishes loading. This can cause buttons you’re about to click on to be bumped out of the way – or text you’re in the middle of reading to be pushed down the page.
While this error may be one of the more annoying ones, it’s thankfully one of the easier ones to fix. It’s often caused by delayed javascript loading ads too late, or image sizes not being set properly within a website’s code.
A bad cumulative layout shift score is very common on sites from around five or six years ago – early enough that optimisation wasn’t as big of a deal to developers as it is today, but recent enough for sites to be bogged down with excessive scripts. This is something definitely worth focusing on for your website, not just to give your rankings a boost – but also to give your users the best experience possible.
Why should you care about Core Web Vitals?
We’re still not 100% sure what impact the Core Web Vitals will have on sites search engine ranking, but they’re all definitely worth improving for the benefits to user experience alone.
If you leave improving your vitals too late – your rankings might permanently suffer before you’ve had a chance to get them up to speed.
How has Google’s Core Web Vitals affected Pixel Kicks as an agency?
At Pixel Kicks we have spent a lot of time working on our own core web vitals scores to ensure that we’re up to speed with Google’s latest recommendations – feel free to run a test on our own site (or your own!) here. We’ve also updated our own coding standards and practices to better accommodate for these tests.
We’ve been frequently approached by clients looking to improve scores on their legacy sites – which unfortunately isn’t always possible. For certain sites, we’d actually recommend starting from scratch over spending the time to get the current site up to date, as the timescales can be similar for particularly outdated sites.
While it’s still not clear just how much these new standards will affect the industry, it’s always best to err on the side of caution with Google as at the end of the day we are all at the mercy of their monopoly. If they’re using that power to slightly improve the user experience of the average site however, then that doesn’t seem so bad to me – even if I’m one of the poor developers who has to actually make these updates!
If your Core Web Vitals are in need of some serious attention, and you’re looking for an agency who knows what they’re doing – get in touch with us, we can help!
MORE LIKE THIS
VIEW ALL
