This is a guest post by Itamar Gero, founder and CEO of SEOReseller.com, a white label SEO and digital marketing solutions provider.
Google has released a new set of metrics called the Core Web Vitals to help improve user experience. The June 2021 Core Update – as Google named it – was released last month, with an update expected to follow during July.
The core web vitals update aims to provide searchers with the best information and user experience possible.
In this rollout, Google highlights the inclusion of Page Experience as a main ranking signal. This means that aside from quality content and beautiful web design, websites should also ensure that they provide the best user experience. The design and content should work together to make browsing more enjoyable for users across all web browsers.
Thanks to our sponsor
As with Google’s past updates, any given website’s rankings may experience a drop, go up or remain the same.
Google provided information about their core updates here. However, we’ll provide you with a checklist you can use to optimize for the three major metrics under this update.
Largest Content Paint (LCP)
The LCP metric pertains to how quickly a page on your website loads. This includes render time of elements, like an image, file or text block within the page. Google will measure it relative to when it first starts to load.
If you have elements in your site that take time to load, optimize it, update it or remove it.
Big files usually result in a slow loading website, so it’s best to rid your site of them.
Aside from affecting user experience, LCP will also impact how Google crawls your site. Slow loading elements limit the pages Google bots are able to go over and index. Fewer indexed pages may mean lost opportunities to ranking high on the search results.
A good LCP score is less than 2.5 seconds.
Elements that are largely influenced by LCP are:
- Image elements
- Videos
- Elements with a background image loaded via url() function (instead of a CSS gradient)
- Blocks (elements with text nodes)
To check your LCP score, you can use GTmetrix, a tool created by Google where you can run your website on and analyze how fast it loads.
Optimization Checklist for Largest Content Paing (LCP)
- Remove page elements with large sizes. Check each page and see if there are elements that take more time to load. You can also run your page through Pagespeed Insights to see suggestions that can make those pages faster.
- Make your all images responsive. Check that all images, videos, or block elements are showing perfectly on all devices, and browser sizes.
- Lazy load pages. This method allows images to load as a user scrolls to that area of the page. This allocates bandwidth properly and is very useful for websites that have huge image sizes. One way you can lazy load an image is through HTML.
- Remove any unnecessary third-party scripts. Third-party scripts and plugins slow down a page. So check for anything that you don’t need, and remove or replace them.
- Simplify your CSS by eliminating unnecessary codes. Remove any unnecessary parts of your codes. This will reduce the file size and speed up render time.
First Input Delay (FID)
First Input Delay is a metric that measures your website’s interactivity. Interactivity means the time from when a visitor first interacts with a page (this is any movement or action a user does on your page), to the point where the browser starts processing the interaction and responding to it.
Google sees your FID score as how relevant your website is. Whether your website offers value to users. One way it does this is by evaluating the time a user spends interacting with it.
Websites should aim for an FID of less than 100 milliseconds to be considered highly engaging.
Note that delays to the first user input are due to browsers taking time or getting busy downloading parsing scripts, assets, or executing other operations. The page will first appear to be unresponsive when the user tries to interact with it. FID measures this unresponsiveness.
Optimization Checklist for First Input Delay (FID)
- Reduce JavaScript execution time. Since JavaScript is executed and run on the main thread, it delays your TTI or Time to Interactive because user inputs are blocked until the task finishes. To resolve this issue, make sure that the codes are properly set and optimized.
- Reduce impact of third party code. Audit third-party scripts regularly, and clean out any useless or repetitive ones. These can be third-party JavaScripts that are embedded in your site that are served from third-party servers.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift measures visual stability. Visual stability is affected by anything in your website that makes the elements in your pages shift, move, or become unstable. A layout shift occurs any time an element’s position changes on the page
You can use Search Console to check your CLS score. A score of <0.1 is considered good, 0.1 to 0.25 will need improvement, and more than 0.25 is considered poor.
Aim for a score of 0.1 or less to ace page experience.
Optimization Checklist for Cumulative Layout Shift (CLS)
- Include size attributes on images and video elements. This will make sure that any browser the visitor is using can allocate the right amount of space that the element will occupy on the page. You can also reserve the proper space with CSS aspect ratio boxes.
- Make sure no content is inserted over an existing content. Have the proper space in the viewport to avoid elements overlapping or shifting. There are exceptions, like when the user is expecting an element to move, or they performed an action that requires an element to move.
- Reserve static space for elements (like images, videos, ads, et.al.). Ensure that you’re reserving the proper amount of space for ads, and make sure that the ads will fill that space. Otherwise, you’ll have a blank area on your website.
- Provide extra space for embeds with a placeholder. Embedding YouTube videos and social media posts will take up space; provide enough space for them so that the web design layout won’t shift.
Conclusion
The core web vitals updates highlight just how much Google values user experience and speed. So in scoring well for each metric, you’re not just meeting search engine expectations but serving users — your consumers — better than you did before.
Here’s a checklist recap:
- Remove page elements with large sizes
- Make your all images responsive
- Lazy load pages
- Remove any unnecessary third-party scripts
- Simplify your CSS by eliminating unnecessary codes
- Reduce JavaScript execution time
- Reduce impact of third party code
- Include size attributes on images and video elements
- Make sure no content is inserted over an existing content
- Reserve static space for elements
- Provide extra space for embeds with a placeholder
You can improve your Core Web Vital scores in many other ways. But the checklist above should help your website stay relevant to today’s discerning consumers.
Itamar Gero is the founder and CEO of SEOReseller.com, a global white label SEO and digital marketing solutions provider that empowers agencies and their local clients all over the world. When he isn’t working, he’s traveling the world, meditating, or dreaming (in code).
