How to Improve LCP on mobile – 100% working method

website performance is very crucial for ranking on google, generally website performance on desktop is good but on mobile we get lower score on lighthouse .

in this article, we will see how to improve LCP on mobile

To fix the LCP issue on mobile you need to fix the provided suggestion by the lighthouse core vital web report. Check all scopes of improvement for LCP and fix them and if still not fixed try to fix other improvement scopes as well.

The factor causing higher LCP on mobile

There are the following reasons that result in higher LCP issues, especially on mobile.

Banner image with large size > 500kb
background video in the first viewport
Animation in banner
Not using lazy loading for off-screen images
unused script and CSS

Tricks to improve LCP on mobile

If the banner image size on your website is greater than 500kb then you need to optimize this image size up to 100-200kb, to optimize png or jpg images you can use tiny png.

Additionally, you can preload banner images using the preload meta tag

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

Postload unused CSS or third-party CSS plugin

If you are using any third-party plugin like Carousel or Slider you can load the plugin CSS after the page load.

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

Lazy load of offscreen images

Lazy load other image which are not available in first fold or viewport.

//lazy loading
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const src=entry.target.getAttribute('data-src')
      entry.target.setAttribute("src",src)
      observer.unobserve(entry.target)
    }
  });
},{
    root:null,
    rootMargin:'0px',
    threshold:0.1
});
document.querySelectorAll("img[data-src]").forEach((img) => {
  observer.observe(img);
});

Use defer or async for script tags

Postpone loading of javascript files that are not being used for first fold or first viewport screen using defer and async.

defer is used to avoid stopping the parsing of HTML and CSS. if you use a defer in script tag script will be downloaded in parallel with HTML parsing which will fix the render-blocking issue.

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

Minify CSS files

If you are using HTML CSS and JS without any web pack or bundler tool you can minify CSS files manually using online CSS minify tool websites.

frontend

About Author

what's inside

Whatsapp Group

Frontend developer
whatsapp group