Key Takeaways
A guide to optimizing large images that drag down your Largest Visible Part (LCP) metric score.
LCP Focus in Image Optimization
On many sites, the LCP element is usually the main image (hero image). If this image loads late, it means your site is slow in the eyes of Google. Improving your LCP score directly affects both the user experience and your search rankings.
LCP Improvement Strategies
- Preload: Declare the main LCP image to the browser early with
. - Modern Formats: Save 50-70% without losing quality by using WebP or AVIF instead of JPG
- Responsive Images: Stop sending huge desktop images to mobile users by using
srcsetandsizes. - CDN Usage: Reduce the delay caused by physical distance by serving images from edge servers.
Fetch Priority Feature
Coming with HTML5 You can add the fetchpriority="high" attribute to your LCP images so that the browser prioritizes this resource. This feature is supported in Chrome 101+ versions.
Lazy Loading Attention
Never add loading="lazy" to the LCP image! This will delay the image from loading, worsening your LCP score. Lazy loading should only be used for below-the-fold images.
Meta Ads & Performance
Stop ad budget leakage with server-side CAPI tracking and provably scalable ROAS
