Since the Core Web Vitals and the Page Experience is a ranking factor for Google, it has become critical to have a website loading fast and offering an enjoyable experience to your users.
SEO experts and web developers must work together to improve the Core Web Vitals score.
In this article, we share 13 tips to help you fix your CLS, LPC and FID issues.
Table of Contents
Overview of the tips
The table below summarizes the tips covered in the article.
For each tip is indicated:
- Level of difficulty: Easy means that you don’t need the technical side, advanced means you instead give this task to a developer.
- Impact indicates which metric (LCP, CLS or FID) is impacted by the fix.
| Tips | Level | Impacted Metrics |
| 1 – Understanding what the Core Web Vitals metrics | Easy | LCP, CLS, FID |
| 2 – Use the right tool | Easy | LCP, CLS, FID |
| 3 – Optimizing the images | Easy | LCP |
| 4 – Lazyloading images | Advanced | LCP |
| 5 – Use a CDN | Easy | LCP |
| 6 – Increasing your server size | Advanced | LCP, FID |
| 7 – Using one image for desktop and one for mobile | Advanced | LCP |
| 8 – Eliminating render-blocking resources | Advanced | LCP, FID |
| 9 – Removing useless CSS and JS | Advanced | LCP, FID |
| 10 – Compressing server-side resources | Advanced | LCP |
| 11 – Minifying CSS and JS | Advanced | LCP |
| 12 – Including size attributes on your images | Advanced | CLS |
| 13 – Keeping the size of the pages small | Advanced | LCP |
Who can fix Core Web Vitals errors?
Website performance optimization issues are often due to a technical problem.
For problems related to the page (client-side), such as CSS and Javascript, a web developer will be helpful to modify the code of your page.
A back-end developer or DevOps will be needed for problems related to your CMS or infrastructure (server-side).
Keep in mind: To improve the performance of your website, you need a technical background – or you can contact a web developer.
Nevertheless, some improvements are simple, and we will cover them first.
Tip 1 – Understanding what the Core Web Vitals metrics
Before starting to audit your website and improve the Core Web Vitals score, you must understand What are the Core Web Vitals.
If you are visiting this page, you must be pretty aware, but let’s make a quick recap.
Largest Contentful paint (LCP): It measures how fast you get the largest element displayed on the visible part of your screen. Usually, it is your banner image or first headline. LCP indicate page load.
To find what is the LCP on your page, you can run an audit with PageSpeed Insights and then in the Diagnostics section, the Largest Content Ful Paint element is indicated.
First Input Delay (FID): It measures how long interactions on your page takes, like clicking on a link. You know when you click, and nothing happens, or it takes ages… FID measure this frustration.
Cumulative Layout Shift (CLS): It measures your page’s stability. Stability means no element shifting or jumping around on your page. Another kind of frustration is when you read an article, and suddenly an image appears because it was not fully loaded, and you have to scroll again to go back to the text you were reading.
It is critical to understand what the Core Web Vitals measure as it will guide the way you fix things on your website.
Tip 2 – Use the right tool to audit your website for the Core Web Vitals
Many tools are available to test the Core Web Vitals. Some of them are provided by Google and some by third party companies.
Visit the next link to get an extensive overview of the tools to test the Core Web Vitals.
Also, I recommend that you follow a step by step approach when auditing your website for Page Experience issues.
Tip 3 – Optimizing the images on your website
This is the most recurrent issue on any website and maybe the easier to fix: Optimizing images.
If you follow these best practices, you could already have a well-performing website:
- Compress your images
- Replace Animated GIFs with videos using a reliable video editor like VEED, which offers a video trimmer and video converter feature to optimize your videos for the web
- Use new generation image formats such as WebP or JPEG 2000 (but unfortunately, these formats are not yet supported by all browsers)
These good practices will impact the loading time of your web pages and improve your LCP score.
Tip 4 – Lazyloading images
Once your images are optimized and compressed, you can still go further by Lazyloading them.
Lazyload means that the images are loaded only when a user starts scrolling and the image is getting visible on the screen, and it will have an impact on the loading time and the LCP Score.
BUT, you should NOT lazy load the first elements on your site. As you can read here, lazyloading images above the fold can affect LCP performance.
If you identify that your LCP is an image, disable lazyloading on this first image.
Tip 5 – Use a CDN for your images and other assets
A Content Delivery Network is a group of servers distributed worldwide that speed up the delivery of your images and other assets (videos, files, CSS, javascript).
Basically, the content is closer to the final user.
When choosing a CDN, you must be careful where its servers are located.
It must be close to your users.
Let’s say that you have a large audience of your website coming from India. To get the full benefit of a CDN and improve the loading time (and your LCP) of your Indian users, one server or more must be located geographically in their country.
Tip 6 – Increasing your server size
The machine hosting your website is a server. And if this machine is slow, your website will take time to process information and return a page to the user.
If you go through a provider to host your website, check if there is any way to upgrade your hosting plan.
In the scenario, your website runs at your premise, check if you can increase the machine’s capacity by your IT.
Tip 7 – Using one image for desktop and one for mobile
It is possible to create variations of the same image and indicate them in the HTML code. This way, depending on the screen size, the right image at the right size will be displayed.
You will load a smaller and compressed version of the images on mobile to increase the loading time and LCP score.
<img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw">Tip 8 – Eliminating render-blocking resources
Some Javascript and CSS are not used during the initialization of your page.
Identify these resources with the Chrome DevTools from the Coverage tab. It tells you which resources are executed and which ones are “just” loaded.
The “just” loaded resources can be executed later with the attribute async or defer.
This way, the first element will load faster, and your LCP will be improved. Optimizing the usage of Javascript and CSS impact as well your FID score.
Tip 9 – Removing useless CSS and JS
In your CSS and JS files, there are bits of code that are never used, and despite this, they are “read” entirely when your page loads. These data are loaded and processed unnecessarily.
The Chrome DevTools Coverage tab will be helpful to understand the percentage of unnecessary code in your CSS or Javascript files.
Then it will be necessary to check in each file the code and remove it if necessary.
Usually, a strategy consists of creating small chunks of javascript and CSS and loading them when needed.
The tips related to deferring files, loading files asynchronously and cleaning up CSS and JS are pretty technical.
You can read this detailed case study explaining everything about front-end performance and architecture of JS and CSS files.
Tip 10 – Compressing server-side resources
Lighthouse detects files that do not have content-encoding such as br, gzip or deflate.
It is recommended to compress them. This operation must be done on the server-side, for example, in your CMS.
Compressing server-side resources will improve your loading time your FCP score.
Tip 11 – Minifying CSS and JS
CSS and JS can be minified, i.e. displayed on one line and took up less space. It is a relatively simple operation and can be done online.
Once the files are minified, they get smaller and load faster. It will improve your LCP.
Tip 12 – Including size attributes on your images and video elements
Include the size of the image attribute in the HTML.
This approach ensures that the browser can allocate the right amount of space in the document while the images are loading. Some space is already allocated for the images, avoiding a visual shift.
This guarantee an improved CLS.
Tip 13 – Keeping the size of the pages small
Overall a good practice for the development of a website and performance improvement is to keep the size of a page small.
- Reduce the size of each page to less than 500KB (page + all resources).
- Keep the total number of resources per page to less than 50 (ideal for mobiles).
Core Web Vitals optimization, a never-ending stories
Optimizing a website is a never-ending story.
Each time you change something like a template, introduce a new feature or migrate to a new provider, you must check if it didn’t impact the performance of your website.
You should continuously audit your website and include performance checking in your workflow.
This was a very informative blog and I really enjoyed reading it. But I also have a few points regarding it to discuss with you.
All businesses want to rank higher on search engines. Core web vitals is one f the best ways to rank higher in search engine. I’ll show you exactly how to improve your core web vitals and boost conversion rates.
Here are some quick ideas to improve the core web vitals of your website:-
1. Implement A Caching Solution
2. Upgrade Your Hosting
3. Implement Lazy Loading
To check the full list of tips, visit – https://blog.alakmalak.com/ways-to-improve-your-core-web-vitals/?UTM-andrew-sep/