← Portfolio | All Demos | Performance Case Study

✅ Real Results — Not a Tutorial

WordPress Performance:
88 → 99

A real optimization case study on the Real Estate demo — from a decent score to near-perfect, documented with the actual techniques used.

88
Before
99
After
+11
Points gained

Final Lighthouse Scores

Mobile audit — the harder target (desktop scores are typically 5–10 points higher)

99
100
100
100

Before & After — Core Web Vitals

The metrics Lighthouse uses to calculate the Performance score

🔴 Before optimization (score: 88)
First Contentful Paint2.4 s
Largest Contentful Paint4.1 s
Total Blocking Time180 ms
Cumulative Layout Shift0.08
Speed Index3.2 s
Page weight (uncompressed)~2.4 MB
🟢 After optimization (score: 99)
First Contentful Paint0.8 s
Largest Contentful Paint1.2 s
Total Blocking Time0 ms
Cumulative Layout Shift0.002
Speed Index1.1 s
Page weight (compressed)~480 KB

Optimization Techniques Applied

Every technique is live in the Real Estate demo — no hypothetical improvements

📷
Custom image sizes + lazy loading

Registered add_image_size() for card thumbnails (480×320) and gallery (1200×800). All non-hero images get loading="lazy" and decoding="async" via filter.

Async font loading

Replaced render-blocking <link rel="stylesheet"> for Google Fonts with a rel="preload" + onload swap pattern. Zero render-blocking from fonts.

🗑
Dequeue unused scripts & styles

Removed Dashicons for logged-out visitors, disabled Astra's Google Fonts loader, dequeued WooCommerce scripts on non-WC pages.

Defer non-critical JavaScript

Custom theme JS gets a defer attribute via script_loader_tag filter so it never blocks parsing. Only runs after the HTML is fully parsed.

🔒
LiteSpeed Cache (server-level)

Full-page HTML caching, CSS/JS minification, and image WebP conversion via LiteSpeed Cache plugin — serving cached pages in under 10ms on repeat visits.

📈
Inline critical CSS

Above-the-fold styles are inlined in <head> via Astra's dynamic CSS system so the first paint requires zero additional CSS round-trips.

Key Code: performance.php

Excerpts from the real file deployed in the Real Estate demo child theme

realestate/performance.php View Live Demo →
// 1. Custom image sizes — serve correctly-sized images per context
add_action( 'after_setup_theme', function () {
    add_image_size( 'property-card', 480, 320, true );
    add_image_size( 'property-gallery', 1200, 800, true );
} );

// 2. Lazy-load & async-decode all attachment images automatically
add_filter( 'wp_get_attachment_image_attributes', function ( $attr ) {
    $attr['loading']  = 'lazy';
    $attr['decoding'] = 'async';
    return $attr;
} );

// 3. Load Google Fonts asynchronously — zero render-blocking
add_action( 'wp_head', function () {
    $href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap';
    echo '<link rel="preload" as="style" href="' . $href . '"
       . ' onload="this.onload=null;this.rel=\'stylesheet\'">';
}, 2 );

// 4. Defer custom theme JS — never blocks HTML parsing
add_filter( 'script_loader_tag', function ( $tag, $handle ) {
    if ( 'jr-estate-js' === $handle ) {
        return str_replace( ' src', ' defer src', $tag );
    }
    return $tag;
}, 10, 2 );

// 5. Remove render-blocking Dashicons for logged-out visitors
add_action( 'wp_enqueue_scripts', function () {
    if ( ! is_user_logged_in() ) {
        wp_dequeue_style( 'dashicons' );
    }
}, 999 );

Need a faster WordPress site?

I audit and optimize WordPress installations for speed — real scores, not promises. Let's talk about your project.

Chat on WhatsApp View Live Demo