LCP is a core web vitals metric which measures the time a webpage takes to load or paint the largest content that is visible to the user on the viewport. It does not matter how much time a webpage take to load completely. But, the portion which is visible to user must load instantly. So that user does not need to wait for complete page to load.
LCP measures the speed of the web page. A page can be large enough to load itself completely. But the largest content must be rendered by the browser as soon as possible.
The total time to load a page might vary from site to site. For some site it is few seconds for others it might be few minutes. But only thing to consider while evaluating the speed of the page is the time taken to paint largest content on the viewport.
Say, a webpage takes total 10 seconds to load it completely whereas another page takes one complete minute to load. We cannot say that page which takes less time to load is fast. Because, LCP for the first webpage, say 5 seconds whereas for the second webpage it is say 2 seconds. That means second page will print the largest content on the viewport first compared to another. That implies the waiting time for the second website is less compared to first. As the waiting time decreases bounce rate also go down for the second website. But for the first website waiting time, as well as bounce rate both go up.
So, waiting time for a page is important metric to measure user’s page experience. Faster the page, the less is the waiting time and higher is the page experience.
Since, Page experience is an important search ranking signal rolled out by Google. It has become quite essential to build a website which is fast enough to not let users wait at all.
Recommended read,
When to fix LCP
LCP of more than 2.5 second need to be fix. Though it is not considered bad but it needs improvement and can be improved considerably following below mentioned techniques. LCP of below 2.5 second is considered good page experience. However, when LCP goes beyond 4 seconds, it is considered a poor page and need an immediate fix before it ruins your SEO.
Let us now see how to fix LCP for an individual page. LCP is different for different pages in your website. You need to fix the LCP for all pages that you want it to appear on the mobile search results.
How to fix LCP
- Choose server with fast response time.
- Minify the blocking javascript and CSS and let them load asynchronously
- Improve resource load time
Recommended read,
Improve server response time
The time server takes to forward the resources to the client is an important factor.
A faster response time implies faster page load speed. TTFB (Time to first byte) is the time server takes before responding to client request.
It determines the first contentful paint (FCP) of a page.
We can improve our TTFB following way:
Use CDN servers for faster response: CDN are network of server spread geographically. Choosing CDN to serve request will always response faster than the original distant servers.
Cache static content: If you serve mostly static content for a page, consider caching it. Caching the content will not fetch resources every time from server and it will be readily available to the client itself.
Establish third party connection early: It would be great if browser know in advance what link will user going to visit next. Sometimes, it can be guessed based on visiting patterns of users. Since, we know that what page/link user is going to visit, we can prefetch or preload those resources in advance, so that page is ready in the background. When user clicks on the link, page directly appears in front of him without any delay. This overall improves the LCP.
Gzip compression: Gzip compression greatly reduces the size of files sent by server like HTML, javascript and CSS files. Compressing greatly improves the page load time and LCP.
Minify the blocking javascript and CSS and let them load asynchronously
Browser need to parse HTML mark up into a DOM tree before it render any content.
But, large CSS and javascript files sometimes blocks the parsing until these files are fully loaded.
This happens because CSS and javascript files are loaded synchronously.
This increases the overall rendering time making the page loads slowly.
It affects the First contentful paint (FCP) and consequently LCP.
To come out of this situation we need following techniques
Minify the CSS and javascript files: CSS and javascript files contains unnecessary spacing, indentation and comments, increases the overall size that takes extra time to load. Minifying the files will reduce the time taken to load.
Inline critical CSS and javascript files: Not all CSS rules and javascript functions will be critical for a page design. We can provide the most essential CSS rules and script function directly in the HTML file. So, that no extra time is wasted in parsing and rendering LCP. Non-critical CSS rules and javascript functions are kept as separate files.
Defer non critical CSS and javascript file: Synchronous loading of CSS and javascript files block the rendering process making the overall time for LCP high. We should defer the non-critical CSS and javascript files to load asynchronously. Asynchronous load of non-critical CSS and javascript files do not block the parsing and rendering process. This way, browser renders the FCP soon and keeps the total time taken for LCP low enough to make faster webpage.
Gzip compression: Gzip compression greatly reduces the size of files sent by server like HTML, javascript and CSS files. Compressing greatly improves the page load time and LCP.
Improve resource load time
Apart form CSS and javascript files there are many resources which takes time to load and effects how pages are loaded. Below are the resources which impacts how pages are loaded and affects the LCP.
- <image> elements
- The poster image of <video> elements
- The <image> element inside a <svg>
- Background image loaded via url().
Avoid using resources like images or videos towards the top of the page until necessary. Because, images and video towards the top ultimately increases the time taken to paint the largest content on the viewport. Still if you have to use image towards the top of the page, consider the below fix.
Compress the image: Large size images takes time to load that ultimately increases the page load time and LCP. So, consider using images in next generation format (JPEG 2000, JPEG XR, or WebP). If you are using images of older formats consider compressing it to suitable size. This will save a lot of time.
Consider Image CDN: Image CDN will considerably lower the time taken to load the image.
Use responsive images: Using responsive images quietly improves the page load time across multiple devices of different viewport dimension.
Published on June 16, 2021
