Core Web Vitals are a set of user experience signals generated by Google in 2021. Prioritizing CDN for multimedia, minimizing critical assets, and deferring Javascript are good ways to make sure that your content is ready for this new ranking factor.
A big change in how Google handles its ranking factors in 2021 is Core Web Vitals: a set of technical metrics meant to improve user experience.
Content is a massive part of generating positive user signals (which Google uses as ranking factors) but the UX landscape is getting increasingly technical…
So, how can you leverage Core Web Vitals to rank higher?
What are the “Core Web Vitals”?
Core Web Vitals are a set of metrics that measure user experience on a web-based property, whether it be a website, a blog, or a web app.
These will become a ranking factor from May 2021 onwards, and there are 3 metrics specifically that you should worry about:
- LCP (Largest Contentful Paint)
- CLS (Cumulative Layout Shift)
- FID (First Input Delay)
These give a holistic picture of what your website feels like.
For example, if a user clicks on a link redirecting them to a page on your website, LCP will tell you how long it takes to load different elements on that page.
While good for the end-user, these metrics are giving website owners a lot of headache, so I’m going to dissect what they mean, and how to optimize for them.
Are Google’s Core Web Vitals that important as a ranking factor?
Google is starting to prioritize content that not only loads fast, but guarantees a good user experience. And yes, they are important for ranking.
Here is what Google themselves have to say about it.
Google’s intentions are good but its guidance, not so much. They are trying to stop bad practices such as ads coming out of nowhere by penalizing sites.
The problem is that small website owners will suffer from it…
The reliance of analytics platforms on “proxy” metrics made it hard to gauge how users were actually experience a website page.
These are:
- Clicks
- Impressions
- Click-through-rate
… and many more.
Instead, Core Web Vitals can help you make informed decisions on improving UX and, ultimately, make the web a better place to browse.
Ranking Factor #1: Largest Contentful Paint (LCP)
Largest Contentful Paint deals with the page’s loading performance: a metric tells you how long it takes to render the most prominent visual element.
This is most commonly the “hero” section of your page, also known as above-the-fold content or “what you see as soon as the page loads.”
It’s a very important part of optimizing user experience.
How can you improve your LCP?
Largest Contentful Paint is affected primarily by 4 factors, all of which have to do with performance on the server and/or website codebase:
- Render-blocking JS & CSS
- Delayed server response
- Client-side rendering
- Resource load times
To reach the desired results, these require adjustments that are quite technical. If you’re not the type of person to work on a computer terminal, you may want to ask for help here. The recommended LCP is <2.5 seconds.
How can you measure your LCP?
You can use a free tool from Google called Lighthouse for a quick look at LCP. Right click on the website and go to the Inspect section.
There, go to Lighthouse and run your test.
Lighthouse is offered by Google developers themselves and, fortunately, it doesn’t take a degree in computer science to understand its suggestions.
There’s a handy Chrome extension that Google offers where you can pull up the desired URL, click on the icon, and get suggestions a few seconds later.
Pro tip: Use Incognito mode to run all your tests as your plugins, caching, and browser settings will interfere with the Lighthouse metrics. Don’t use PageSpeed Insights, it’s not as accurate.
How can LCP help with your content’s rankings?
The most important thing is for the most prominent visual element to load fast with LCP. The green zone is <2.5s. Start with measuring how long it takes for the first byte to load (TTFB) and what may cause delays.
You can streamline the server response time by routing the users to a nearby CDN, caching critical assets, and preloading external assets.
As a CDN, my recommendation is to use Cloudflare as it’s 100% free to start with. A CDN guarantees that your users will never have to wait for network requests to remote servers somewhere around the world.
For optimal results, minify and defer non-critical CSS to cut LCP time. If you’re on WordPress, consider using a premium plugin like WP Rocket for this.
The plugin can also help you inline critical CSS code, making important page components load faster and thus improving your LCP.
Ranking Factor #2: First Input Delay (FID)
First Input Delay (FID) measures how long your website’s critical elements take to become fully interactive (i.e. you can play around with them).
You want to make an excellent first impression, and if your elements become responsive quickly, that counts as a good user experience.
In Layman’s terms, FID is the time it takes for a user to click on a link, button, or clickable element and the server responding to that click.
Why doesn’t the browser react to a click?
Because it is busy doing something else, parsing another request.
You can fix this problem by applying a few best practices…
How can you improve First Input Delay?
FID is suggested to be under 100 milliseconds, enough time for the browser to listen to an event. You can improve your FID by following these patterns:
- Async defer third-party code
- Break up heavy Javascript code
- Reduce JavaScript execution time
- Minimize your code manually or with a plugin
FID is no exception when it comes to technicalities. If you’re don’t like working on this type of stuff, you need a developer to look into it.
How can you measure First Input Delay?
Just like LCP, you can use Lighthouse and follow the audit to decrease your FID. This requires creative ways to streamline your website’s codebase.
(Yes, it has to do with code!)
The more plugins doing random stuff on the front-end of your website, the more likely it is that your First Input Delay will soar higer and higher.
Only keep plugins you absolutely need and don’t keep them deactivated for no reason. Every time you want to deactivate a plugin, delete it altogether.
You can re-install it at any time.
How can your content help in optimizing FID?
FID is the only Core Web Vitals metric which isn’t affected by the content itself. Using a plugin such as WP Rocket can help fix most of your problems.
If you’re using any third-party scripts like Hotjar or HubSpot, they may bloat your website. Only use scripts that are truly mission-critical.
Ranking Factor #3: Cumulative Layout Shift (CLS)
CLS deals with Visual Stability.
Suppose you have been reading an article on a web browser and see the text or visual element suddenly shift before you click something.
That’s a layout shift, and it usually happens without notice, resulting in false clicks. It’s one of the most frustrating experiences on the web currently.
How can you improve your CLS?
Cumulative Layout Shift is one of the more frustrating metrics to improve because of how most websites are set up (mostly using WordPress with a drag-and-drop page builder). Following Google’s advice, you should:
- Always include size attributes on your images and video elements
- Avoid layering content except in response to user interaction
- Animate transitions in a way that provides context
Transitions are a part of your CLS score.
If they take too long to appear, or if they unnecessarily move stuff around, they will count towards a higher CLS score (lower is better).
Another thing that will penalize you is the so-called FOUC, or Flash of Unstyled Content. This is when your CSS loads after the HTML is loaded.
Seeing a page all broken up only to have it change layout after a few seconds is a bad experience, and it hinders users’ perception of your brand.
If you’re using a caching plugin, always pre-cache your pages and, from time to time, regenerate your critical CSS to have all important code loads inline.
How do you measure your Cumulative Layout Shift?
Like the rest of the Core Web Vitals metrics, you can measure CLS using Lighthouse but also Google Search Console at a higher level.
How does your website content help in optimizing for CLS?
If the content on your website has a fixed position, your CLS will be low, so make sure to give everything clear dimensions.
Avoid adding dimensionless content to your website. For images, use fixed width/height containers with the same color as the page’s background.
Core Web Vitals aren’t the only “Web Vitals” to exist as there are other metrics that aren’t as important, but that you should definitely look into:
- First Contentful Paint, or the time it takes to paint the 1st visual element, giving an idea of how long users have to wait until they can see something.
- Time to First Byte, or the time it takes for the browser to receive the 1st byte of data from your server (upgrade to a better hosting if this is slow!).
- Time to Interactive, or the time it takes for the complete page to become interactive, meaning that users can click through to other pages.
- Speed Index, or how quickly content is visually displayed during page load which makes for a great user experience (but also hard to optimize for).
- Total Blocking Time, or the sum of all periods between 1st visual content loading and the time it takes for the page to become interactive.
If you optimize for all of these metrics correctly, your content will have a much higher chance of ranking than your competitors’.
Better UX means better content
Content can be tricky to improve when it comes to optimizing your website’s UX; there are specific guidelines, fine-tuning, and A/B tests to follow.
It’s not a one size fits all situation.
Not everything will apply to your situation.
However, the above guidelines should help you get an overall of how Core Web Vitals affect your website content and how to optimize for them.
See what works on your website and go from there!
Originally published 30 Jan 2021
Hammad is a Senior SEO Expert at TechNerds Inc. He specializes in SEO, Content Marketing, and Social Media Strategy and has 3+ years of experience in the field.
Editor ▾
