In May 2020, Google created a new update for its central core, the result of which was the introduction of three new criteria to the community of webmasters, SEOs, and site designers.
One of the most important criteria that we intend to fully address in this article is LCP.
LCP stands for Largest Contentful Paint and indicates the time the site needs to display the largest element (content) of the page to the user.
LCP is an important measure to determine the content rendering time on the site.
In the continuation of this article, I intend to fully explain the methods of improving the LCP score for you and practically explain each of the cases.
Table of Contents
What destroys LCP?
Among the most important factors that lower our LCP score, or in other words, increase its time, the following can be mentioned:
- Slow server response time
- Render-blocking javascript and CSS
- Slow loading of resources
- Client-side rendering
How can we improve LCP?
Improving the site’s LCP will be done with three basic steps and several separate parts. I recommend you first analyze your site and use the solutions presented in this article by your weak points in each section to reach the desired score below 2.5 seconds.
Step 1: Make content load faster!
As mentioned, LCP is one of the criteria that is highly sensitive to the time of content presented to the user. Therefore, it is better to start with our server and check the things that increase the loading speed of our content together.
1) Enable CDN
CDN, or content distribution network, stores a copy of your site’s content in large servers around the world so that when a user wants to enter your site (from anywhere in the world), the content is loaded from the nearest server.
Therefore, if your server is in Germany and a user with a Canadian IP wants to enter your site, there is no need to wait a few seconds longer than usual for your site to load!
Learn more about CDN activation!
There are different ways to use and activate CDN, but the best and most secure CDN service at the moment is Cloudflare’s free CDN, which you can easily activate.
It should be noted that Cloudflare is one of the companies trusted by Google and therefore it is recommended to use the services of this company in general (from the SEO point of view).
To set up Cloudflare’s free CDN, just go to Cloudflare’s website and create an account there, and in the next step, enter your website address.
Then, by selecting Cloudflare’s free CDN service, see a list of all DNS found by their systems.
After selecting and confirming the DNS records, it is enough to update them and transfer them to the Cloudflare servers.
2) Cache your HTML
HTML cache, which is also referred to as site cache, is responsible for storing your pages statically. The result of this work will ultimately improve the loading speed of your site.
There are two basic ways to cache your HTML:
- Using cache plugins such as leverage browser caching
- Add cache code to the htaccess file
3) Using servers to provide HTML
To improve HTML loading speed, you can also initially use a server to provide cached site content. For example, if your LCP is an image or video element, a server can run in the background of the browser and intercept server requests.
In this way, your HTML content is stored in a hidden form and only needs to be updated when you have changed a part of the content.
With this method, your content will be displayed to the user even faster than using a CDN.
4) Using third-party connections
Requesting a server from a third party or third-party origins is another thing that can play a prominent role in improving your LCP score.
Also, if your users need to display and execute important content and pages, you can use rel = “preconnect” so that the browser is aware of your attempt to connect as quickly as possible.
<link rel=”preconnect” href=”https://example.com” />
Step 2: Rendering
To render a web page, resources must first be checked, then a connection between the server and the client must be established. In the next step, the resources are downloaded and after analyzing HTML and CSS and creating DOM and CSSOM, the layout of the page is drawn and then displayed to the user.
1) Smooth the path of LCP
Before the browser renders any content, it must parse the HTML into the DOM. If the HTML parser encounters external stylesheets such as <link rel=”stylesheet”> or synchronous JavaScript tags such as <script scr=”main.js”>, the rendering may be interrupted.
Scripts and style sheets are both things that play a significant role in blocking the rendering of resources, and you can see their negative impact on your FCP and LCP scores!
As a result, deferring unnecessary javascript and css files, which we will discuss further, can significantly improve the speed of your site.
3) Reducing css blocking time
To reduce css rendering time and avoid blocking resources, you should do the following (which I will explain each one below) completely:
4) Minify CSS
Many CSS files include spaces, comments, etc. (site designers usually do this to improve readability). The truth is that almost all of these characters are unnecessary for our CSS file, so it’s better to find these now. And quickly delete them and compress your so-called css.
5) Defer unnecessary CSS
To find the unnecessary CSS of the website, it is enough to enter the chrome dev tools environment (by pressing the F12 key) and in the coverage section, find the necessary and unnecessary CSS files of the site, which are marked with blue and red colors.
Now write the unnecessary css (red color) in the following format:
<link rel=”preload” href = “styles.css” as=”style” onload=”this.onload=null;this.rel=’stylesheet'”>
6) Arrange the necessary CSS
To do this, extract all the necessary CSS (green or blue) and write them together and save them in a file format.
Now put these classes inside a <style> block and put it in the head of the site.
Note: This is called embedding in programming terms.
Tip: If you find it difficult to extract and arrange the necessary CSS. You can use critical, criticalCSS, or Penthouse packages for this purpose.
7) Reducing JS blocking time
To optimize the rendering time of js files and effectively reduce the time when JavaScript blocks resources, you must do the following carefully:
Minify JS files
According to Google’s suggestions, you can use Uglify js to optimize and reduce the size of JS files.
Defer JavaScript files of little use
Deferring the js files means that the browser will not wait for the scripts to be loaded anymore and will process the HTML and DOM instead. The script is loaded in the background of the browser during this interval and is displayed when the DOM is fully executed.
This can significantly improve your site speed and LCP score.
Note: You can also use the async method to delay the execution of JS files. In the next articles, this issue will be fully discussed.
Step 3: Optimizing and reducing the volume of various elements
As discussed in all parts of this article, the main goal of LCP is to allow the user to quickly access the content of the site.
For this reason, we should try to reduce the size of structural files such as CSS and js that were discussed, as well as files such as images, fonts, etc.
The following ways are recommended to optimize the size of images:
- Save images in lightweight formats such as JPEG2000, JPEG XR, or WebP.
- Optimize images before uploading by sites that have the task of reducing image size.
- Use responsive images.
- Take CDN seriously.
- Swap your fonts.
Very important point
The Webp format is one of the best formats for storing and publishing images, and even Google itself has mentioned this, but a small bug of this format is the lack of support for the iOS operating system (except version 14). So, before using this format, be sure to check the most used mobile phones on your site and also check the operating system version of your users and use this format in a controlled manner and with a calculated strategy.
Analyze and debug LCP
Analysis and review of LCP should be done at the beginning so that you know what parts need to be corrected and reviewed again, and at the end, after applying the changes, you should resort to these tools to debug and see the result.
One of the best tools for measuring core web vitals and LCP metrics is the Lighthouse6.0 tool, which you can install and check through Devtools.
Apart from these cases, using sites like GTmetrix that use the LightHos database can be a good suggestion to check LCP and find the weak points of the site.
Note: Don’t forget that the optimal score for LCP is a duration below 2.5 seconds.