Search engine optimization techniques have come a long way and have changed considerably in the last few years. Techniques that were considered legitimate earlier are no more valid and dozens of new optimization directives have been pushed ahead by search engines to comply with. One of the important metrics for SEO nowadays is core web vitals. It's considered to be a major factor when trying to achieve good rankings on search engines. In this tutorial, we'll see how to make sure our website's core web vitals metrics are up-to-date and error-free to get better results in the search results. Let's get started!
Remember, if you're technically challenged, you may struggle to implement the methodologies mentioned in this guide. In that case, you need to hire a professional to get things done.
Fixing core web vitals issues on a website doesn't guarantee higher rankings in the search results. It's just a best-practices approach to ensure your website isn't demoted in the search results.
Let's first understand the core metrics and standards applicable to core web vitals. These are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
Let's understand each one of these.
- Largest Contentful Paint (LCP): This quality metric determines how long it would take for the largest element above-the-fold to render/display on the viewport.
Because a mobile layout can be different from a desktop one, the LCP value for both environments can be different. This metric accounts for the perceived load speed from the end user's perspective. Fixing this quality metric can be tricky. - First Input Delay (FID): As the name suggests, this quality metric measures the time duration when the user first starts interacting with the web page by clicking an element and the delay thereafter when the web page responds to that user action.
In simpler words, we can say that this metric is more or less measures how quickly the page becomes interactive for the end-user. - Cumulative Layout Shift (CLS): This critical quality metric measures the shift in layout due to latent dynamic content coming later resulting in annoying shifts in content already loaded earlier.
This dynamic content is advertisement or dynamic site content fetched through API calls.
I recommend using the WebPageTest tool to measure and analyze core web vitals metrics.
Now that we're familiar with these basic concepts, let's dive deeper and learn how to fix issues related to these quality indicators on our website.
Improving or Fixing Largest Contentful Paint (LCP)
First of all, we'll quickly look at different LCP scores to better understand what's a good LCP value and what's a bad one. It's broadly divided into 3 segments.
- Good: If your web page's LCP score is less than or equal to 2.5 seconds, then it's considered a good value, and the test is passed with a green signal.
- Need Improvement: If the LCP value is greater than 2.5 seconds but less than 4 seconds, then it's considered kind of average. When your LCP score falls in this category it is an indication that though the current score is somewhat acceptable, more work needs to be done.
- Poor: And, if the LCP score is greater than or equal to 4 seconds, the quality score falls in the poor category. It's a red signal for the page and you must work to improve it, as soon as possible.
Some of the major HTML elements (above the fold) that contribute to poor LCP scores are <img>, <video>, and <image>.
Sometimes, background images and SVG images (above the fold) are also the culprits.
The most common among these elements is the images that should be optimized. Start with optimizing them for the web. If quality is not an issue, use lossy compression tools to get the best results.
If budget is not an issue, I'll recommend using an image content delivery network to automate the entire image optimization process.
And last but not least, lazy-load images to further speed up page rendering. Instead of using the old way of using JavaScript to lazy load images, use the loading="lazy" attribute within the <img> tag. This attribute is now supported by all modern web browsers.
Just optimization is not enough. Make sure you're using modern image formats like AVIF and WebP with fallbacks to support older browsers too.
Another important aspect to take care of is to remove render-blocking resources. You can address this issue in the following ways.
- Inline critical CSS.
- Defer loading of less critical scripts. Move them down to the
</body>tag. Usedeferattribute in the script tags, wherever applicable. - Load critical scripts asynchronously if they do not hinder above-the-fold page functionality. Use
syncattribute in the scripts tags for the same. - Compress and minify all CSS and JavaScript files. Use a bundling tool like Parcel to automate these optimization tasks.
If some of the critical above-the-fold content (e.g images, CSS, JS) is loaded from 3rd-party servers, use the rel="preconnect" attribute in the <link> header tag. This gives the hint to the web browser to make a connection to these sources as soon as possible.
Improving or Fixing First Input Delay (FID)
Once again let's first go through the different FID scores to better understand what's a good FID value and what's the average or bad score. Once again this score is divided into 3 segments.
- Good: If your web page's FID score is up to 100 ms, then it's considered a good value, and the test is passed with a green signal.
- Need Improvement: If the FID value is greater than 100 ms and is up to 300 ms, then it's an average score. As usual, this value though is an acceptable score but one must work on it to reduce it further.
- Poor: And last but not least, if the FID score is greater than 300 ms, one must work on improving this metric without any fail. The larger this value, the more unresponsive is your website.
Following are some of the measures to counter issues contributing to a high FID score.
Optimized CSS Code - Follow best practices when writing CSS rules to ensure the page is rendered as quickly as possible.
Non-blocking JavaScript - Similarly, make sure your scripts are not running long tasks that block the main thread. This makes the page unresponsive. Resolving this issue can be tricky and requires you to be proficient in JavaScript.
Server-side Rendering - To reduce the load on the web browser, use server-side rendering to generate much of the content at the backend before pushing it to the client-side.
Dynamic Module Loading - Defer loading of unnecessary JavaScript modules. Use dynamic loading for these modules whenever the need arises. This keeps and page lean, fast, and interactive.
Web Workers - If your website requires long JavaScript tasks to be run in the background, use web workers for the same. They run separately and don't block the main thread keeping your page interactive. All modern browsers support them out of the box.
The crux of all these tips is to eliminate things that somehow block rendering or I/O for a significant period. Fixing all these issues on your own requires some technical expertise.
Improving or Fixing Cumulative Layout Shift (CLS)
Now this one is one of the common issues website owners see in their Google Search console reports. It's a widely-known issue on a large number of websites and often remains unnoticed. The visitors though suffer due to sudden shifts in layouts.
Let's first check the quality score categories for this metric too.
- Good: If the CLS value is is up to 0.1, it is considered a good score and you're good to go without worrying about this quality metric.
- Need Improvement: A score of up to 0.25 is considered to be acceptable but requires you to work on its improvement. The lower this value, the better experience your visitors will get.
- Poor: Anything above 0.25 is considered a poor CLS score. This results in latent and sudden layout shifts which gives a bad user experience to your website visitors.
To fix this issue, first of all, add the width and height attributes to all the <img> elements. It'll ensure the surrounding content doesn't shift as soon as the image arrives from the server.
Another factor that contributes to a high CLS value is shifts (FOUT) happening due to custom fonts. Use the best practices for loading custom fonts to ensure your CLS value isn't affected by it.
Similarly, if your website hosts dynamic advertisements, the CLS value is going to be high. If these ads are controlled by external servers, you can't do anything about it.
There are two possible solutions to this problem. First, either remove them altogether or wrap them in a fixed-width container provided the ads themselves are not responsive.
In a nutshell, any dynamically injected content after the page load may result in a higher CLS value. A generic solution is to wrap these dynamic sections into a fixed-width container.