WordPress LCP (Largest Contentful Paint) Troubleshooting | Blue Frog Docs

WordPress LCP (Largest Contentful Paint) Troubleshooting

Fix slow LCP issues on WordPress sites with theme optimization, caching, hosting, and image solutions

WordPress LCP (Largest Contentful Paint) Troubleshooting

Largest Contentful Paint (LCP) measures how long it takes for the main content to load. WordPress sites often struggle with LCP due to themes, plugins, hosting, and images. This guide provides WordPress-specific solutions.

What is LCP?

LCP is a Core Web Vital that measures when the largest visible content element renders.

Thresholds:

  • Good: < 2.5 seconds
  • Needs Improvement: 2.5 - 4.0 seconds
  • Poor: > 4.0 seconds

Common LCP Elements on WordPress:

  • Hero images (homepage sliders, featured images)
  • Large text blocks (blog post titles, headings)
  • Video thumbnails
  • WooCommerce product images

Measuring WordPress LCP

Google PageSpeed Insights

  1. Go to PageSpeed Insights
  2. Enter your WordPress site URL
  3. View Largest Contentful Paint metric
  4. Check Diagnostics for specific issues

Chrome DevTools

// View LCP in browser console
new PerformanceObserver((list) => {
    const entries = list.getEntries();
    const lastEntry = entries[entries.length - 1];
    console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
    console.log('LCP element:', lastEntry.element);
}).observe({entryTypes: ['largest-contentful-paint']});

Web Vitals Chrome Extension

Install Web Vitals extension to see LCP on every page.

Common WordPress LCP Issues

1. Slow Server Response Time (TTFB)

Symptoms:

Causes:

  • Shared hosting with limited resources
  • No server-side caching
  • Slow database queries
  • Too many plugins querying on each page load

Solutions:

Upgrade Hosting

Shared hosting → VPS → Managed WordPress:

Recommended WordPress Hosts:

  • WP Engine - Managed WordPress, excellent performance
  • Kinsta - Google Cloud Platform, fast global CDN
  • Cloudways - Flexible managed hosting
  • SiteGround - Good mid-tier option

Enable Object Caching

Redis or Memcached dramatically improve database performance:

// Install Redis Object Cache plugin
// Or add to wp-config.php for Memcached:
define('WP_CACHE_KEY_SALT', 'yoursite.com');
define('WP_CACHE', true);

Plugins:

Optimize Database

Clean up database:

// Install WP-Optimize plugin
// Or run manual cleanup:
// - Delete post revisions
// - Remove spam comments
// - Clean transients

Plugin: WP-Optimize

Limit Startup Queries

// Disable unnecessary queries in functions.php
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wp_shortlink_wp_head');

// Disable emoji scripts
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

2. Unoptimized Images

Symptoms:

  • Large featured images (hero, blog post headers)
  • LCP element is an image > 200 KB
  • Images not using modern formats (WebP, AVIF)

Solutions:

Use Image Optimization Plugin

Recommended Plugins:

  • ShortPixel - Automatic WebP conversion, lazy loading
  • Imagify - Good compression, WebP support
  • EWWW Image Optimizer - Free, local optimization
  • Smush - Popular, easy to use

ShortPixel Setup:

1. Install ShortPixel Image Optimizer
2. Settings → General → Compression: Lossy (recommended)
3. Settings → Advanced → Convert to WebP: Yes
4. Settings → Advanced → Lazy Load: Yes (but see note below)
5. Bulk → Optimize all existing images

Important: Don't lazy load the LCP image (hero image, featured image on posts).

Exclude LCP Image from Lazy Loading

// Prevent lazy loading on featured images (often the LCP element)
add_filter('wp_lazy_loading_enabled', 'disable_lazy_load_featured_image', 10, 2);
function disable_lazy_load_featured_image($default, $tag_name) {
    if ('img' === $tag_name && is_singular() && has_post_thumbnail()) {
        return false;
    }
    return $default;
}

Or manually add loading="eager" to hero images:

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

Serve Images in Next-Gen Formats

WebP reduces file size by 25-35% vs. JPEG:

// Automatically serve WebP with ShortPixel or Imagify
// Or use .htaccess for manual WebP delivery:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

Proper Image Sizing

Don't load 3000px images for 800px containers:

// Define custom image sizes for WordPress
add_image_size('hero-image', 1920, 1080, true);
add_image_size('blog-featured', 1200, 630, true);

// Use correct size in templates:
the_post_thumbnail('hero-image');

Use a CDN for Images

Cloudflare (Free):

  • Automatic image optimization
  • WebP conversion
  • Global CDN delivery

BunnyCDN:

  • Affordable ($1/month)
  • Automatic optimization
  • Perma-cache

Jetpack Site Accelerator (Free):

  • Free WordPress CDN
  • Automatic image optimization

3. Render-Blocking Resources

Symptoms:

  • Many CSS/JS files blocking initial render
  • Large theme CSS files (100+ KB)
  • External fonts loading synchronously

Solutions:

Defer Non-Critical CSS

// Inline critical CSS, defer the rest
// Use Critical CSS plugin or WP Rocket's "Optimize CSS Delivery"

Plugin: Autoptimize

Autoptimize Settings:
✓ Optimize CSS Code
✓ Inline critical CSS (paste from criticalcss.com or WP Rocket)
✓ Defer non-critical CSS

Defer JavaScript

// Add defer to non-critical scripts
add_filter('script_loader_tag', 'add_defer_to_scripts', 10, 2);
function add_defer_to_scripts($tag, $handle) {
    // Skip jQuery (required immediately)
    if ('jquery' === $handle || 'jquery-core' === $handle) {
        return $tag;
    }

    // Defer all other scripts
    return str_replace(' src', ' defer src', $tag);
}

Plugin: WP Rocket (Premium)

WP Rocket → File Optimization:
✓ Load JavaScript deferred
✓ Delay JavaScript execution (for non-critical scripts)

Optimize Web Fonts

Preload Critical Fonts:

add_action('wp_head', 'preload_fonts', 1);
function preload_fonts() {
    ?>
    <link rel="preload" href="<?php echo get_stylesheet_directory_uri(); ?>/fonts/primary-font.woff2" as="font" type="font/woff2" crossorigin>
    <?php
}

Use font-display: swap:

@font-face {
    font-family: 'Your Font';
    src: url('your-font.woff2') format('woff2');
    font-display: swap; /* Show fallback text immediately */
}

Or use system fonts (fastest):

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

4. WordPress Theme Issues

Symptoms:

  • Theme loads slowly on all pages
  • Large theme framework (100+ KB CSS, 200+ KB JS)
  • Lots of unused theme features

Solutions:

Switch to Lightweight Theme

Fast WordPress Themes:

  • GeneratePress - 10 KB base, highly optimized
  • Astra - Lightweight, Elementor-friendly
  • Kadence - Modern, fast, flexible
  • Neve - AMP-ready, fast loading

Remove Unused Theme Features

// Disable theme features you don't use
add_action('wp_enqueue_scripts', 'remove_unused_theme_scripts', 100);
function remove_unused_theme_scripts() {
    // Remove jQuery if not needed
    wp_deregister_script('jquery');

    // Remove theme animations if not used
    wp_dequeue_style('theme-animations');

    // Remove Gutenberg block styles if using classic editor
    wp_dequeue_style('wp-block-library');
}

Use Child Theme to Optimize

Create lightweight child theme:

/* Remove unnecessary theme CSS */
/* Override bloated parent styles with minimal CSS */

5. Too Many Plugins

Symptoms:

  • Many HTTP requests for plugin CSS/JS
  • Slow admin dashboard
  • Each plugin adds 10-50ms to page load

Solutions:

Audit Plugin Performance

Use Query Monitor:

1. Install Query Monitor plugin
2. View frontend page
3. Check "Scripts & Styles" panel
4. Identify heavy plugins
5. Deactivate or replace

Identify Slow Plugins:

  • Sliders (use CSS-only or static images instead)
  • Social sharing (use lightweight alternatives)
  • Related posts (use built-in WordPress function)
  • Analytics dashboards (view in GA4 directly)

Consolidate Plugin Functionality

Replace multiple plugins with one:

  • WP Rocket replaces 5+ performance plugins
  • Rank Math replaces SEO + schema + redirects plugins
  • Jetpack consolidates many features (but can be bloated)

Conditionally Load Plugins

// Only load Contact Form 7 on pages with forms
add_filter('wpcf7_load_js', '__return_false');
add_filter('wpcf7_load_css', '__return_false');

// Manually enqueue on contact page:
if (is_page('contact')) {
    wp_enqueue_style('contact-form-7');
    wp_enqueue_script('contact-form-7');
}

6. WooCommerce Performance

Symptoms:

  • Slow product pages
  • Large product images as LCP
  • Heavy cart/checkout pages

Solutions:

Optimize Product Images

// Set optimal product image sizes
add_theme_support('woocommerce');
add_theme_support('wc-product-gallery-zoom');
add_theme_support('wc-product-gallery-lightbox');
add_theme_support('wc-product-gallery-slider');

// Define product image sizes
add_image_size('shop_catalog', 600, 600, true);
add_image_size('shop_single', 1200, 1200, true);

Disable Unused WooCommerce Features

// Disable WooCommerce scripts on non-shop pages
add_action('wp_enqueue_scripts', 'disable_woocommerce_scripts', 99);
function disable_woocommerce_scripts() {
    if (!is_woocommerce() && !is_cart() && !is_checkout()) {
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-smallscreen');
        wp_dequeue_script('wc-cart-fragments');
    }
}

Use WooCommerce Performance Features

WooCommerce → Status → Tools:
- Clear transients
- Regenerate thumbnails

Install WooCommerce optimization plugins:

  • Perfmatters - Disable WooCommerce scripts selectively
  • Asset CleanUp - Control script loading per page

7. Caching Plugins

Symptoms:

  • No caching enabled (slow repeat visits)
  • Incorrectly configured cache (not helping LCP)

Solutions:

Install Caching Plugin

Free Options:

  • WP Super Cache - Simple, effective
  • W3 Total Cache - Feature-rich
  • LiteSpeed Cache - For LiteSpeed servers

Premium:

  • WP Rocket - Easiest, most effective ($49/year)

WP Rocket Configuration for LCP

WP Rocket Settings:

Cache:
✓ Enable caching for mobile devices
✓ Separate cache files for mobile

File Optimization:
✓ Minify CSS files
✓ Combine CSS files
✓ Optimize CSS delivery (critical CSS)
✓ Minify JavaScript files
✓ Load JavaScript deferred
✓ Delay JavaScript execution

Media:
✓ Enable lazy loading (exclude LCP image)
✓ WebP compatibility

Preload:
✓ Preload cache
✓ Prefetch DNS requests (add GA, GTM, Meta domains)

Preconnect to Third-Party Domains

add_action('wp_head', 'preconnect_external_domains', 1);
function preconnect_external_domains() {
    ?>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://www.google-analytics.com">
    <link rel="preconnect" href="https://www.googletagmanager.com">
    <link rel="dns-prefetch" href="//connect.facebook.net">
    <?php
}

Advanced WordPress LCP Optimizations

Critical CSS

Extract and inline CSS needed for above-the-fold content:

  1. Generate Critical CSS:

  2. Inline Critical CSS:

add_action('wp_head', 'inline_critical_css', 1);
function inline_critical_css() {
    ?>
    <style>
        /* Paste critical CSS here */
        body { margin: 0; font-family: sans-serif; }
        .site-header { height: 80px; background: #fff; }
        /* ... */
    </style>
    <?php
}

Resource Hints

add_action('wp_head', 'resource_hints', 1);
function resource_hints() {
    ?>
    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://fonts.googleapis.com">

    <!-- DNS prefetch for analytics -->
    <link rel="dns-prefetch" href="//www.google-analytics.com">

    <!-- Preload LCP image -->
    <?php if (is_front_page() && has_post_thumbnail()) : ?>
        <link rel="preload" as="image" href="<?php echo get_the_post_thumbnail_url(null, 'full'); ?>">
    <?php endif; ?>
    <?php
}

Delay Third-Party Scripts

Delay analytics and chat widgets until after LCP:

add_action('wp_footer', 'delay_third_party_scripts', 99);
function delay_third_party_scripts() {
    ?>
    <script>
        // Delay loading heavy scripts
        let thirdPartyLoaded = false;

        function loadThirdPartyScripts() {
            if (thirdPartyLoaded) return;
            thirdPartyLoaded = true;

            // Load chat widget, etc.
            // (function(){...})(); // Your widget code
        }

        // Load on user interaction
        ['mousedown', 'touchstart', 'keydown'].forEach(event => {
            window.addEventListener(event, loadThirdPartyScripts, {once: true, passive: true});
        });

        // Fallback: load after 5 seconds
        setTimeout(loadThirdPartyScripts, 5000);
    </script>
    <?php
}

Testing LCP Improvements

Before/After Comparison

  1. Baseline Measurement:

    • Run PageSpeed Insights
    • Record LCP score
    • Note specific issues

  2. Make Changes

  3. Re-test:

    • Clear all caches (WordPress, server, CDN, browser)
    • Run PageSpeed Insights again
    • Compare LCP improvement

Test on Real Devices

  • Desktop (wired connection)
  • Mobile (4G connection)
  • Tablet

Use WebPageTest for detailed testing:

1. Enter WordPress URL
2. Select location (nearest to target audience)
3. Choose device (Mobile or Desktop)
4. Run test
5. View waterfall chart for LCP element

WordPress LCP Checklist

  • Server response time < 600ms (upgrade hosting if needed)
  • Enable object caching (Redis/Memcached)
  • Install caching plugin (WP Rocket, W3 Total Cache)
  • Optimize images (WebP, compression, proper sizing)
  • Don't lazy load LCP image
  • Preload LCP image with resource hint
  • Defer non-critical JavaScript
  • Inline critical CSS
  • Use lightweight theme
  • Audit and remove slow plugins
  • Preconnect to third-party domains
  • Enable CDN for static assets
  • Delay analytics/chat widgets

Next Steps

↑ Back to top
// SYS.FOOTER