Optimising Core Web Vitals is a long process and takes a lot of time as well as resources. As there are three metrics, we will talk about optimising LCP here and discuss another two in the next guide.
Optimising LCP
As you now know that LCP measures how long it takes to load the first largest element of the page in the viewport. Its value should be below 2.5 seconds. Let’s discuss some of the ways you can improve your Largest Contentful Paint score.
1. Optimise Server
Whenever you request a web page from a server, the server needs to handle the request and serve HTML, JavaScript, CSS and other files to your browser. There may be cases where you will be making expensive requests to your server that might delay server response.
For example, modern server-side web frameworks need to dynamically create the web page and the server might take some time to create the web page due to things such as pending database queries. So, in these cases, you should try to optimise your server to serve results faster. Many frameworks have guidelines regarding this optimization.
2. Use Content Delivery Network
A Content Delivery Network (CDN) is a network of servers distributed across many locations. You should leverage CDN in order to deliver web pages faster to the end-user.
This happens because, in CDN, a client’s request is handled by a server that is closest to its location. This way, the response time of the server is reduced due to the shorter distance.
3. Defer Non-Critical CSS
CSS files in an HTML file are usually accessed through external stylesheets. <link rel= “stylesheets”>. In order to render content on your screen, your browser needs to parse HTML into a DOM tree. The browser parses HTML line by line. If it encounters any external stylesheet, it will pause until it loads that stylesheet completely.
In this case, you would want to defer non-critical CSS so that the browser spends less time in reading and loading external stylesheets and continues to parse the rest of the page without any delay.
In order to find non-critical CSS which is not required initially, go to the coverage tab of chrome dev tools as shown below:
CSS lines indicated by red lines are unused and it is better to defer them.
4. Minify CSS
As said earlier, CSS files can be large files. Usually while writing CSS, developers often leave blank spaces, indentation and comments for better code readability. But such things are not required by the browser. However, those things add to the size of CSS and browsers take some time to load them.
So, you should remove all those extra spaces, comments, etc to reduce the size of CSS.
5. Inline CSS
If there is CSS that is required for the initial loading of the web page, rather than putting that into an external file, use that in the HTML <head> itself so that the browser does not have to load an external style script for that. This helps improve your website loading time and consequently, your LCP is improved.
6. Defer Non-Critical JavaScript
JavaScript is another resource that a browser needs to parse in order to load the website. So, sending all the JavaScript at the outset is not a good idea. It is better to split up your JavaScript into bundles and execute each bundle whenever it is required.
7. Minify JavaScript
Just like we saw how we can minimize CSS, in the same way, you can minimize JavaScript. That is by removing unnecessary spaces and comments.
8. Reduce The Size Of Image & Video
Usually, image is the most common element that adds to LCP time. As many websites use images in the hero section. Reducing the size of the images is a guaranteed way to improve your LCP score.
If you run Page Speed Insights on your web page, it will show which element of your website is affecting LCP the most. So, you can accurately pick up the element and work on it for improving LCP.
Similarly, you can optimise your video if it is on the web page. If you cannot avoid video on the homepage then you can try hosting the video on another platform such as YouTube and embedding that on your website.
9. Reduce JavaScript For Client Side Rendering
Many modern web frameworks such as React, Angular and Vue use JavaScript logic to create web pages on the client’s browser dynamically.
While using these frameworks, you have to be aware of the effects it can have on LCP. Since these frameworks execute heavy JavaScript, they take a lot of time to render web pages on the browser. In cases like these, you should reduce the usage of JavaScript. Many of these frameworks have guidelines on how you can optimise them for better speed.
The other things you can do are server-side rendering and pre-rendering. Get in touch with your developer regarding how you can implement these since discussing these is beyond the scope of this article.
These were recommended ways you can do to improve your web page’s LCP score. Note that Core Web Vitals work on a URL basis and not an on-site basis.
This means you have to optimise each web page for these metrics. The first starting page should always be your homepage as far as SEO is concerned. Next, we will talk about improving cumulative layout shit and first input delay.
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