In this guide, we will continue to learn to optimise core web vitals. As we already learnt how we can optimise LCP, it’s time to move on to the other two.
1. How To Optimise FID
FID is measured as a time from when a user first interacts with the web page to the time when the browser is able to respond to that interaction.
A web page is made interactive through the usage of JavaScript. This means that JavaScript is behind all the functionality of a website. So, the most common reason behind the poor FID score is the heavy execution and usage of JavaScript code.
Therefore, optimising FID mainly involves optimising your JavaScript code. Here are few ways you can do that.
a. Break Up Long Tasks
If your web page is involved in a long-running JavaScript task then the web page will remain unresponsive until the task is finished. So the obvious thing to do is to break up long JavaScript tasks into smaller tasks.
b. Use Webworker
You can run some part of the JavaScript in the background so that the main thread blocking time is reduced. Background running tasks are called web workers.
c. Defer Unused JavaScript
Sometimes, your web page might load a lot of JavaScript code which it might not need initially. In that case, you need to figure out the unused JavaScript code and remove them.
You can find the unused JS code by going to chrome dev tools and checking the coverage tab. The lines indicated by red are unused ones. Consider removing them.
d. Defer Thrid Party Scripts
If you are using third party scripts on your web page then you need to defer them using async or defer. This should be the case with all third party scripts unless you require them critically.
These were some of the ways you can optimise FID. Kindly note that each of these is a lot of work, here we mentioned them briefly but you may need to do lot of further research about how you can exactly do them.
At the end, we will share some resources with you for that. But now let’s move to optimise CLS
2. How To Optimise CLS
Layout shift is a very frustrating experience for the user. Imagine you are reading some interesting article and suddenly whole content is shifted and you have a hard time finding your place again. We have already talked about what CLS is in the previous guide, here we will talk about how we can optimise it.
a. Set Width & Height Attributes of Images
Whenever you are using images on your web page, make sure to include its width and height attributes. The reason for this is because when you don’t set these attributes then images take up as much space as required shifting the surrounding elements in the process. Setting these attributes keeps images within these dimensions and they don’t move elements around.
b. Reserve Space For Ad Slots
You might have experienced this already that you are reading some article and suddenly ad pops up and moves your content around. This is not a good experience. So, you should reserve space for them before they load on the website.
You might figure out the space required for them by looking at the previous ads and checking what their sizes were.
c. Reserve Space For Embeds and Iframes
Embedding content from other web pages into your web page can also cause poor CLS. For example; embedding a YouTube video or a social media post. In this case, also, you should reserve enough space for them before they start loading on the website.
You need to figure out the size of the embed and reserve space according to that.
These were some ways you can optimise your CLS. Again, each of these is a broad topic in itself and here we have tried to explain them briefly. We will share resources with you for further reading.
As a concluding remark, we would like to say that optimising Core Web Vitals is not a one-shot process, it is a gradual process. You cannot optimise all of them in one go.
Also, it is always better to keep them in consideration while developing the website. In general, you should develop your website along with these recommendations. Developing a website first and then redoing the work to optimise Core Web Vitals is not a good idea.
Some resources:
Search Engine Code Team is comprised of SEO experts and strategists having more than 20 years of combined experience. We keep testing and delivering knowledge of SEO for the community of SEO.
Leave a Reply