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

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

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

How to fix this

to fix LCP you need to improve above mentioned factors

1. Optimize image size and use the latest image formats like webp & avif
2. 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>

1. 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

1. 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"
/>

1. 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