How to optimize Largest Contentful Paint (LCP)?

How to optimize Largest Contentful Paint (LCP)? Last week we reviewed what is the Largest Contentful Paint (LCP), a Google metric that evaluates the loading speed of each of the pages of your website, registering the moment in which the main content is loaded, which as the main, it is about the largest content within the page.

LCP is also part of the Core Web Vitals, so there are no excuses for your website to measure up. It is the only way for the Google search algorithm to properly rank your website. That is why this week we review what parameters you should consider optimizing the LCP on your website.

What is causing the LCP?

According to Google, the top 3 most common causes of a high LCP are:

1. Slow or misconfigured servers
2. Very heavy resources, such as non-optimized images
3. Asynchronous CSS and/or JavaScript

How to optimize the LCP?

1. Optimize your website server

The first thing you should do is evaluate and reduce the response time of your server since it will allow you to have a faster website and thus you will improve in the evaluations of Google metrics (SEO).

The TTFB, response time of your web server, is the time it takes for the webserver to respond to the request for user visits, which includes HTML, CSS, JavaScript, and/or any other type of file that the page contains. which is the user is visiting.

If you are on shared web hosting, moving to a dedicated server is a huge improvement as you no longer share resources with other websites. Always make sure you choose a reliable hosting company. In the case of ITDO, we have had success stories with some of our clients, increasing visits by 80% and also the number of sales in just one day, just by optimizing the server.

Caching and using a CDN can also greatly improve the performance of your server. Both will reduce the time it takes for a user to load the content of a page on your website.

2. Compress and optimize images

Images are probably the heaviest content on your website, so you should compress, size, and use the correct image file format to make your website lighter.

There are two widely used image file formats, JPG and PNG. You must choose the correct format for each need. Use JPG for photos and PNG images where you need transparent backgrounds.

Compressing the images will help reduce weight, you can do it by increasing the "loss", this reduces the size of the file by eliminating data, that well applied, JPG compression is almost undetectable.

The images on your website have dimensions: width and height. Check the images on your website to assess that you are uploading images of the same size as configured. You could be displaying a 200x200 pixel image and the original image is 1200x1200 pixels.

3. Critical CSS and JavaScript and Asynchronous Loading

Critical CSS and JavaScript are those that are necessary for a correct design and operation of the website, a bad appearance or malfunction, it can be a leak from many of your users.

For correct operation, you must make sure that the main CSS and JavaScript of your website is loaded at the same time as the HTML, in this way they will not be rendered halfway. The rest of CSS and JavaScript can be configured asynchronously, after the page loads.

This removes CSS and JavaScript as a rendering-blocking resource and streamlines the browser's ability to download and display the files necessary to display the main content of the page as quickly as possible.

Conclusion

Evaluating your server and optimizing images, CSS and Javascript, will improve LCP scores, as well as improve user experience and SEO. And without a doubt, you should not optimize the LCP only to position your website, but also to make a more sustainable website.