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
Optimize banner image size
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.
Preload banner image
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.