Checking your LCP time<\/h3>\n\n\n
As per Google, the types of elements considered for Largest Contentful Paint are:<\/p>\n\n\n\n
<img><\/code> elements<\/li><image><\/code> elements inside an<svg><\/code> element<\/li><video><\/code> elements (the poster image is used)<\/li>- An element with a background image loaded via the
url()<\/code><\/a><\/u> function (as opposed to a CSS gradient<\/u><\/a>)<\/li>- Block-level<\/u><\/a> elements containing text nodes or other inline-level text elements children.<\/li><\/ul>\n\n\n\n
Now, there are multiple ways to measure the LCP of your page.<\/p>\n\n\n\n
The easiest ways to measure it are PageSpeed Insights<\/a>, Lighthouse, Search Console (Core Web Vitals Report), and the Chrome User Experience Report.<\/p>\n\n\n\n
For example, Google PageSpeed Insights in its report indicates the element considered for calculating the LCP.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/LCP_Image.jpg?resize=1601%2C1201&ssl=1\")
<\/figure>\n\n\nWhat is a good LCP time?<\/h3>\n\n\n
To provide a good user experience, you should strive to have a Largest Contentful Paint of 2.5 seconds<\/strong> or less on your website. A majority of your page loads should be happening under this threshold.<\/p>\n\n\n\n
Now that we know what is LCP and what our target should be let’s look at ways to improve LCP on our website.<\/p>\n\n\n
How to optimize Largest Contentful Paint (LCP)<\/h3>\n\n\n
The underlying principle of reducing LCP in all of the techniques mentioned below is to reduce the data downloaded on the user’s device and reduce the time it takes to send and execute that content.<\/p>\n\n\n
1. Optimize your images<\/h4>\n\n\n
On most websites, the above-the-fold content usually contains a large image which gets considered for LCP. It could either be a hero image, a banner, or a carousel. It is, therefore, crucial that you optimize these images for a better LCP.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/optimised-vs-unoptimised.jpeg?resize=1600%2C681&ssl=1\")
<\/figure>\n\n\n\nTo optimize your images, you should use a third-party image CDN like ImageKit.io. The advantage of using a third-party image CDN<\/a> is that you can focus on your actual business and leave image optimization to the image CDN.<\/p>\n\n\n\n
The image CDN would stay at the edge of technology evolution, and you always get the best possible features with minimum ongoing investment.<\/p>\n\n\n\n
ImageKit is a complete real-time image CDN that integrates with any existing cloud storage like AWS S3, Azure, Google Cloud Storage, etc. It even comes with its integrated image storage and manager called the Media Library.<\/p>\n\n\n\n
Here is how ImageKit can help you improve your LCP score.<\/p>\n\n\n
1. Deliver your images in lighter formats<\/h5>\n\n\n
ImageKit detects if the user’s browser supports modern lighter formats like WebP or AVIF and automatically delivers the image in the lightest possible format in real-time. Formats like WebP are over 30% lighter compared to their JPEG equivalents.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/webp_jpg_image_size_comparison.jpeg?resize=1200%2C691&ssl=1\")
<\/figure>\n\n\n2. Automatically compress your images<\/h5>\n\n\n
Not just converting the image to the correct format, ImageKit also compresses your image to a smaller size. In doing so, it balances the image’s visual quality and the output size.<\/p>\n\n\n\n
You get the option to alter the compression level (or quality) in real-time by just changing a URL parameter, thereby balancing your business requirements of visual quality and load time.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/image-compression-comparison_quality.jpeg?resize=1750%2C860&ssl=1\")
<\/figure>\n\n\n3. Provide real-time transformations for responsive images<\/h5>\n\n\n
Google uses mobile-first indexing for almost all websites. It is therefore essential to optimize LCP for mobile more than that for desktop. Every image needs to be scaled down to as per the layout’s requirement.<\/p>\n\n\n\n
For example, you would need the image in a smaller size on the product listing page and a larger size on the product detail page. This resizing ensures that you are not sending any additional bytes than what is required for that particular page.<\/p>\n\n\n\n
ImageKit allows you to transform responsive images<\/a> in real-time just by adding the corresponding transformation in the image URL. For example, the following image is resized to width 200px and height 300px by adding the height and width transformation parameters in its URL.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/eiffel-tower-example_200400.jpg?resize=200%2C400&ssl=1\")
<\/figure>\n\n\n4. Cache images and improve delivery time<\/h5>\n\n\n
Image CDNs use a global Content Delivery Network<\/a> (CDN) to deliver the images. Using a CDN ensures that images load from a location closer to the user instead of your server, which could be halfway across the globe.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/CDN_server_user.jpg?resize=702%2C250&ssl=1\")
<\/figure>\n\n\n\nImageKit, for example, uses AWS Cloudfront as its CDN, which has over 220 deliver nodes globally. A vast majority of the images get loaded in less than 50ms. Additionally, it uses the proper caching directives to cache the images on the user’s device, CDN nodes, and even its processing network for a faster load time.<\/p>\n\n\n\n
This helps to improve LCP on your website.<\/p>\n\n\n
2. Preload critical resources<\/h4>\n\n\n
There are certain cases where the browser may not prioritize loading a visually important resource that impacts LCP. For example, a banner image above the fold could be specified as a background image inside a CSS file. Since the browser would never know about this image until the CSS file is downloaded and parsed along with the DOM tree, it will not prioritize loading it.<\/p>\n\n\n\n
For such resources, you can preload them by adding a
<link><\/code> tag with arel= \"preload\"<\/code> attribute to the head section of your HTML document.<\/p>\n\n\n\n<!-- Example of preloading -->\n<link rel=\"preload\" src=\"banner_image.jpg\" \/><\/code><\/pre>\n\n\n\nWhile you can preload multiple resources in a document, you should always restrict it to above-the-fold images or videos, page-wide font files, or critical CSS and JS files.<\/p>\n\n\n
3. Reduce server response times<\/h4>\n\n\n
If your server takes long to respond to a request, then the time it takes to render the page on the screen also goes up. It, therefore, negatively affects every page speed metric, including LCP. To improve your server response times, here is what you should do.<\/p>\n\n\n
1. Analyze and optimize your servers<\/h5>\n\n\n
A lot of computation, DB queries, and page construction happens on the server. You should analyze the requests going to your servers and identify the possible bottlenecks for responding to the requests. It could be a DB query slowing things down or the building of the page on your server.<\/p>\n\n\n\n
You can apply best practices like caching of DB responses, pre-rendering of pages, amongst others, to reduce the time it takes for your server to respond to requests.<\/p>\n\n\n\n
Of course, if the above does not improve the response time, you might need to increase your server capacity to handle the number of requests coming in.<\/p>\n\n\n
2. Use a Content Delivery Network<\/h5>\n\n\n
We have already seen above that using an image CDN like ImageKit improves the loading time for your images. Your users get the content delivered from a CDN node close to their location in milliseconds.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/with-cdn.jpg?resize=452%2C250&ssl=1\")
<\/figure>\n\n\n\nYou should extend the same to other content on your website. Using a CDN for your static content like JS, CSS, and font files will significantly speed up their load time. ImageKit does support the delivery of static content through its systems.<\/p>\n\n\n\n
You can also try to use a CDN for your HTML and APIs to cache those responses on the CDN nodes. Given the dynamic nature of such content, using a CDN for HTML or APIs can be a lot more complex than using a CDN for static content.<\/p>\n\n\n
3. Preconnect to third-party origins<\/h5>\n\n\n
If you use third-party domains to deliver critical above-the-fold content like JS, CSS, or images, then you would benefit by indicating to the browser that a connection to that third-party domain needs to be made as soon as possible. This is done using the
rel=\"preconnect\"<\/code> attribute of the<link><\/code> tag.<\/p>\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/static.example.com\" \/><\/code><\/pre>\n\n\n\nWith
preconnect<\/code> in place, the browser can save the domain connection time when it downloads the actual resource later.<\/p>\n\n\n\nSubdomains like static.example.com, of your main website domain example.com are also third-party domains in this context.<\/p>\n\n\n\n
You can also use the dns-prefetch<\/em> as a fallback in browsers that don’t support preconnect. This directive instructs the browser to complete the DNS resolution to the third-party domain even if it cannot establish a proper connection.<\/p>\n\n\n
4. Serve content cache-first using a Service Worker<\/h5>\n\n\n
Service workers can intercept requests originating from the user’s browser and serve cached responses for the same. This allows us to cache static assets and HTML responses on the user’s device and serve them without going to the network.<\/p>\n\n\n\n
While the service worker cache serves the same purpose as the HTTP or browser cache, it offers fine-grained control and can work even if the user is offline. You can also use service workers to serve precached content from the cache to users on slow network speeds, thereby bringing down LCP time.<\/p>\n\n\n
5. Compress text files<\/h5>\n\n\n
Any text-based data you load on your webpage should be compressed when transferred over the network using a compression algorithm like gzip or Brotli. SVGs, JSONs, API responses, JS and CSS files, and your main page’s HTML are good candidates for compression using these algorithms. This compression significantly reduces the amount of data that will get downloaded on page load, therefore bringing down the LCP.<\/p>\n\n\n
4. Remove render-blocking resources<\/h4>\n\n\n
When the browser receives the HTML page from your server, it parses the DOM tree. If there is any external stylesheet or JS file in the DOM, the browser has to pause for them before moving ahead with the parsing of the remaining DOM tree.<\/p>\n\n\n\n
These JS and CSS files are called render-blocking resources and delay the LCP time. Here are some ways to reduce the blocking time for JS and CSS files:<\/p>\n\n\n
1. Do not load unnecessary bundles<\/h5>\n\n\n
Avoid shipping huge bundles of JS and CSS files to the browser if they are not needed. If the CSS can be downloaded a lot later, or a JS functionality is not needed on a particular page, there is no reason to load it up front and block the render in the browser.<\/p>\n\n\n\n
Suppose you cannot split a particular file into smaller bundles, but it is not critical to the functioning of the page either. In that case, you can use the defer attribute of the script tag to indicate to the browser that it can go ahead with the DOM parsing and continue to execute the JS file at a later stage. Adding the defer attribute removes any blocker for DOM parsing. The LCP, therefore, goes down.<\/p>\n\n\n
2. Inline critical CSS<\/h5>\n\n\n
Critical CSS comprises the style definitions needed for the DOM that appears in the first fold of your page. If the style definitions for this part of the page are inline, i.e., in each element’s
style<\/code> attribute, the browser has no dependency on the external CSS to style these elements. Therefore, it can render the page quickly, and the LCP goes down.<\/p>\n\n\n3. Minify and compress the content<\/h5>\n\n\n
You should always minify the CSS and JS files before loading them in the browser. CSS and JS files contain whitespace to make them legible, but they are unnecessary for code execution. So, you can remove them, which reduces the file size on production. Smaller file size means that the files can load quickly, thereby reducing your LCP time.<\/p>\n\n\n\n