Largest Contentful Paint (LCP) measures how long it takes for your main content to load. Google considers LCP under 2.5 seconds "good." If yours is slower, here's how to fix it.
What Causes Poor LCP?
- Large, unoptimized images - The #1 cause
- Slow server response time - TTFB over 600ms
- Render-blocking resources - CSS/JS blocking the main thread
- Client-side rendering - JavaScript building content after load
Step-by-Step LCP Optimization
1. Optimize the LCP Element
First, identify what your LCP element is using PageSpeed Insights. It's usually a hero image or large heading.
- Compress images (target 100-200KB for hero images)
- Use WebP format instead of JPEG/PNG
- Set explicit width and height attributes
- Preload the LCP image with
<link rel="preload">
2. Improve Server Response Time
- Use quality hosting (avoid cheap shared hosting)
- Enable server-side caching
- Use a CDN to serve static assets
- Optimize database queries
3. Eliminate Render-Blocking Resources
- Inline critical CSS in the
<head> - Defer non-critical JavaScript
- Remove unused CSS and JavaScript
4. Preload Critical Resources
<link rel="preload" href="hero.webp" as="image">
<link rel="preload" href="main-font.woff2" as="font" crossorigin>LCP Targets
| Score | LCP Time |
|---|---|
| Good | ≤ 2.5 seconds |
| Needs Improvement | 2.5 - 4 seconds |
| Poor | > 4 seconds |
Related: Core Web Vitals Explained
0 comments