Largest Contentful Paint (LCP) | Blue Frog Docs

Largest Contentful Paint (LCP)

Diagnose and fix slow Largest Contentful Paint to improve loading performance and Core Web Vitals scores

Largest Contentful Paint (LCP)

What This Means

Largest Contentful Paint (LCP) measures the time it takes for the largest content element in the viewport to become fully visible and rendered. This is a Core Web Vital metric that directly correlates with user-perceived loading speed.

LCP Thresholds

  • Good: < 2.5 seconds (green)
  • Needs Improvement: 2.5 - 4.0 seconds (yellow)
  • Poor: > 4.0 seconds (red)

Impact on Your Business

User Experience:

  • Users perceive pages with fast LCP as loading quickly
  • Slow LCP creates impression of poor website quality
  • Directly correlates with bounce rate and engagement

Search Rankings:

  • LCP is a confirmed Google ranking factor
  • Poor LCP can reduce search visibility
  • Required for top search result positions

Conversion Rates:

  • Every 100ms improvement in LCP can increase conversion rates by up to 1%
  • Sites with LCP < 2.5s see significantly higher engagement
  • Mobile users are especially sensitive to LCP performance

Common LCP Elements

The LCP element is typically:

  • Hero images or banner images
  • Video thumbnails or poster images
  • Large background images loaded via CSS
  • Large text blocks (headlines, paragraphs)
  • Product images on e-commerce sites

How to Diagnose

  1. Navigate to PageSpeed Insights
  2. Enter your website URL
  3. Click "Analyze"
  4. Review the LCP score in the Core Web Vitals section
  5. Scroll to "Diagnostics" section to see:
    • Which element is the LCP element
    • What's causing the delay
    • Specific optimization opportunities

What to Look For:

  • LCP element identification (shown with screenshot)
  • LCP breakdown timing (TTFB, resource load time, render time)
  • Recommended optimizations

Method 2: Chrome DevTools

  1. Open your website in Chrome
  2. Press F12 to open DevTools
  3. Navigate to the "Performance" tab
  4. Click the record button (circle)
  5. Refresh the page
  6. Stop recording after page load completes
  7. Look for the "LCP" marker in the timeline
  8. Click the LCP marker to see which element it represents

What to Look For:

  • Total LCP time
  • Which element triggered LCP
  • When resources loaded relative to page load
  • Blocking resources before LCP

Method 3: Web Vitals Extension

  1. Install the Web Vitals Chrome Extension
  2. Visit your website
  3. Click the extension icon
  4. View real-time LCP measurement
  5. LCP element is highlighted with a red overlay

What to Look For:

  • Real-time LCP score
  • Visual identification of LCP element
  • Score changes during page interaction

Method 4: Real User Monitoring

  1. Check Google Search Console > Core Web Vitals report
  2. Review 28-day aggregated real user data
  3. Identify pages with poor LCP
  4. Review URL-specific performance

What to Look For:

  • Real user experience data (field data)
  • Mobile vs desktop LCP differences
  • Specific problem URLs
  • Trends over time

General Fixes

Fix 1: Optimize LCP Image

If your LCP element is an image:

  1. Reduce image file size:

    • Use modern formats (WebP with JPEG fallback)
    • Compress images without quality loss (TinyPNG, Squoosh, ImageOptim)
    • Target: < 200KB for hero images, < 100KB for other images

  2. Set appropriate dimensions:

    <img
  src="hero.jpg"
  width="1200"
  height="600"
  alt="Hero image description"
>

  3. Add priority hints:

    <img
  src="hero.jpg"
  fetchpriority="high"
  loading="eager"
>

  4. Preload critical images:

    <link
  rel="preload"
  as="image"
  href="hero.jpg"
  fetchpriority="high"
>

Fix 2: Eliminate Render-Blocking Resources

Remove or defer resources that block initial render:

  1. Defer non-critical JavaScript:

    <script src="script.js" defer></script>

  2. Inline critical CSS:

    • Extract CSS needed for above-fold content
    • Place in <style> tag in <head>
    • Defer non-critical CSS

  3. Use async for third-party scripts:

    <script src="analytics.js" async></script>

  4. Remove unused CSS and JavaScript:

    • Audit loaded resources
    • Remove or defer unused code
    • Split code into critical and non-critical bundles

Fix 3: Improve Server Response Time (TTFB)

LCP cannot start until server responds:

  1. Use a CDN (Content Delivery Network):

    • Serve content from geographically distributed servers
    • Reduces latency for global users
    • Examples: Cloudflare, Fastly, AWS CloudFront

  2. Enable caching:

    • Server-side caching (Redis, Memcached)
    • Browser caching with proper cache headers
    • Static asset caching

  3. Upgrade hosting:

    • Ensure adequate server resources (CPU, RAM)
    • Consider dedicated or VPS hosting over shared
    • Use hosting optimized for your platform

  4. Optimize database queries:

    • Add database indexes
    • Cache query results
    • Optimize slow queries

Fix 4: Optimize CSS Background Images

If LCP element is a CSS background image:

  1. Avoid CSS backgrounds for critical images:

    <!-- Instead of CSS background-image -->
<img src="hero.jpg" alt="Hero">

  2. Preload background images:

    <link rel="preload" as="image" href="hero.jpg">

  3. Use responsive images:

    .hero {
  background-image: image-set(
    url("hero.webp") type("image/webp"),
    url("hero.jpg") type("image/jpeg")
  );
}

Fix 5: Optimize Web Fonts

If LCP element is text with custom fonts:

  1. Preload critical fonts:

    <link
  rel="preload"
  href="font.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>

  2. Use font-display:

    @font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

  3. Subset fonts:

    • Only include characters you need
    • Reduces font file size
    • Tools: Google Fonts parameter, Font Squirrel

  4. Prefer system fonts for body text:

    body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

Fix 6: Use a CDN for Resources

  1. Serve images from CDN:

    • Reduces image load time
    • Provides automatic optimization
    • Examples: Cloudinary, Imgix, ImageKit

  2. Configure CDN properly:

    • Enable HTTP/2 or HTTP/3
    • Enable compression
    • Set appropriate cache headers

  3. Use CDN for all static assets:

    • CSS files
    • JavaScript files
    • Font files
    • Images

Fix 7: Implement Lazy Loading Correctly

Important: Never lazy load LCP images

  1. Identify LCP element

  2. Set loading="eager" or omit loading attribute:

    <img src="hero.jpg" loading="eager">

  3. Lazy load below-fold images:

    <img src="product.jpg" loading="lazy">

  4. Ensure LCP image loads immediately

Platform-Specific Guides

Detailed implementation instructions for your specific platform:

Platform Troubleshooting Guide
Shopify Shopify LCP Optimization
WordPress WordPress LCP Optimization
Wix Wix LCP Optimization
Squarespace Squarespace LCP Optimization
Webflow Webflow LCP Optimization

Verification

After implementing fixes:

  1. Clear cache:

    • Browser cache
    • CDN cache
    • Server cache

  2. Test with PageSpeed Insights:

    • Run 3-5 tests
    • Average the results
    • Verify LCP is in "Good" range (< 2.5s)

  3. Test on real devices:

    • Mobile device on 4G connection
    • Desktop with throttled connection
    • Different browsers

  4. Monitor field data:

    • Check Google Search Console after 28 days
    • Verify real user metrics improve
    • Continue monitoring for regressions

Common Mistakes

  1. Lazy loading the LCP image - This delays LCP significantly
  2. Not prioritizing above-fold images - Browser doesn't know which images are critical
  3. Using CSS background images for hero images - Delays resource discovery
  4. Oversized images - Unnecessary bytes increase load time
  5. Ignoring TTFB - Poor server response makes good LCP impossible
  6. Not using a CDN - Increases latency for geographically distant users
  7. Render-blocking CSS/JS - Prevents LCP element from rendering

Additional Resources

↑ Back to top
// SYS.FOOTER