Some practical tips to reduce LCP: make your website faster

Introduction:

who doesn't like a faster website? In this article, we will see a means to achieve faster website performance by reducing LCP (largest contentful paint), a core web-vital measure.

What is LCP?

It is the time required for loading the largest content on the page, it might be the biggest image of the largest text block.

A good lcp score is below 2.5s, An LCP between 2.5 and 4 seconds is considered "needing improvement", an LCP greater than 4 seconds is considered "poor".

Some tips to reduce LCP:

We can do many things to achieve our goal, let me brief about few of them:

1. use image compression techniques and use modern image formats like webp. we can use tools like image-webpack-loader to compress the images.
2. we can designate various images depending upon the screen size using srcset attribute:

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />        

3. We can use lazy loading, so that the image gets loaded only when it's required:

<img src="image.webp" alt="Description" loading="lazy">        

4. We can preload critical resources like important css files or images. so that render doesn't get blocked:

<link rel="preload" as="image" href="/path-to-image.jpg">        

5. We can use CDN to get cached resources.

6. We can defer non critical css or javascript files:

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">        

<script src="script.js" defer></script>        

7. we can use optimised font formats like WOFF2, or Web Open Font Format 2.0 for fonts.

8. implement minification & tree shaking through bundlers to optimise js bundles.

9. Prefer to use css animations rather than using javascript animations/

10. Measure LCP improvements & do profiling through tools like lighthouse.

Conclusion:

LCP is an important measurement to represent your websites performance. We also can optimise other metrics like cls, tti etc to further optimise your webpage.