How to fix/improve the LCP issue on the webpage?

Ashish Kumar — Wed, 04 Dec 2024 04:35:36 +0000

LCP is one of the main factors affecting the performance of web pages.LCP is the time taken to paint the largest web page element on the pixel of the screen.

Factors affecting LCP

There are following factors that cause LCP increase in webpage

Large image size in the first viewport
Heavy animation, background image in the banner/ first section
images are not lazy-loaded
unused script and CSS

How to fix this

to fix LCP you need to improve above mentioned factors

Optimize image size and use the latest image formats like webp & avif
use async and defer to avoid render blocking

<script defer src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script async src="./main.js"></script>

Lazy-load images other than the first section

 <img loading="lazy" class="shape" src="./images/coffee-shape.svg" />

or use intersection observer for lazy loading

Optimize unused CSS by using the media attribute

<link
    media="print"
    onload="this.media='all'"
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

Preload banner image or background image

<link rel="prelod" as="image" href="./images/banner-bg.png"/>

Other than these fixes you will have to follow suggestions which lighthouse is suggesting you to fix.

Result :

follow me
website : frontendzone
Youtube : frontendzone

How to update object key in useState

Ashish Kumar — Tue, 07 Feb 2023 16:09:00 +0000

To update an object key in the state select the key and assign its value to that state

    onClick={(e) =>
            setBooks((prev) => ({
              ...prev,
              physics: e.target.value,
            }))
          }

Forem: Ashish Kumar

How to fix/improve the LCP issue on the webpage?

Factors affecting LCP

How to fix this

How to update object key in useState