Astra Performance Tuning Using Lighthouse and DevTools: From 72 to 99 Mobile Score

Client showed me their Astra site: "You said Astra was fast - why's my mobile score only 72??"

Site looked beautiful!! Clean design, nice animations, professional photos. But Lighthouse was screaming about 3.2s LCP and 500KB unused JavaScript!!

Two hours of DevTools analysis later: 99 mobile score, 1.6s LCP, 94% improvement!! Same design, zero visual changes.

Here's the exact diagnostic and optimization process using Chrome DevTools:

Why "Astra = Fast" Doesn't Mean Automatic Speed

The myth: Install Astra theme = instant 90+ PageSpeed scores

The reality: Astra gives you performance FOUNDATION but you still need optimization!!

Astra out-of-box is 48KB. Add:

• Page builder (Elementor/Spectra)
• Image plugins
• Contact forms
• Analytics
• Fonts
• Actual content

Suddenly 500KB+!! That's not Astra's fault - it's configuration!!

Step 1: Run Baseline Lighthouse Audit

Open Chrome DevTools

Right-click page → Inspect → Lighthouse tab

Critical settings:

• Mode: Navigation (default)
• Device: Mobile (harder to optimize!)
• Categories: Performance (focus!)
• Throttling: Simulated (realistic!)

Click Analyze page load

Understanding Lighthouse Metrics

Performance Score (0-100):

• 90-100: Green (excellent!)
• 50-89: Orange (needs work!)
• 0-49: Red (disaster!)

Core Web Vitals:

LCP (Largest Contentful Paint):

• Good: <2.5s
• Needs improvement: 2.5-4s
• Poor: >4s

TBT (Total Blocking Time):

• Good: <200ms
• Needs improvement: 200-600ms
• Poor: >600ms

CLS (Cumulative Layout Shift):

• Good: <0.1
• Needs improvement: 0.1-0.25
• Poor: >0.25

My Client's Baseline

• Performance: 72/100 😬
• FCP: 1.8s ✅
• LCP: 3.2s ❌
• TBT: 890ms ❌
• CLS: 0.15 ⚠️

Diagnosis: LCP and TBT killing performance!!

Step 2: Analyze Coverage Report (Find Unused Code!)

This is WHERE DevTools becomes powerful!!

Open Coverage Tab

DevTools → Three dots (⋮) → More tools → Coverage

Click Reload icon

What Coverage shows:

• Red bars = unused code (waste!!)
• Blue bars = used code (necessary)

Client's Coverage Report

CSS files:

• astra-main.css: 42% unused (35KB wasted!)
• elementor-frontend.min.css: 68% unused (89KB wasted!)
• font-awesome.min.css: 91% unused (72KB wasted! - only using 3 icons!!)

JavaScript files:

• elementor-frontend.min.js: 73% unused (145KB wasted!)
• jquery.min.js: Not even needed (Astra uses Vanilla JS!)

Total unused: ~380KB of 500KB = 76% WASTE!!

This explains the poor score!!

Step 3: Network Tab Analysis (Loading Behavior)

Open Network Tab

DevTools → Network tab

Reload page with DevTools open

Sort by Size (largest first)

What To Look For

Large files:

• Images >100KB (should be optimized!)
• Fonts >50KB each (too many variants!)
• JS bundles >100KB (can split?)

Render-blocking resources:

• Files loaded BEFORE content (delays LCP!)
• Look for "Blocking" in waterfall

Third-party scripts:

• Google Analytics
• Font providers
• Chat widgets
• Each adds delay!!

Client's Network Problems

Massive hero image: 1.2MB PNG!!

• Should be 150KB WebP max
• Causing 3.2s LCP alone!!

Google Fonts loading 8 weights:

• Only using 2 weights actually
• 6 unnecessary requests!!

Font Awesome entire library:

• 72KB for 3 icons
• Should use inline SVG!!

Step 4: Performance Tab (Detailed Timeline)

Record Performance

DevTools → Performance tab

Click Record → Reload page → Stop recording

Analyzing The Timeline

Look for:

Long tasks (red flags!):

• Yellow blocks = JavaScript execution
• Purple blocks = rendering/painting
• Long yellow = Too much JS!!

Main thread bottlenecks:

• Click any yellow block
• Bottom panel shows exact function
• Find what's slowing down!!

Client's Timeline Analysis

JavaScript execution: 1,840ms!!

Breaking down:

• Elementor animations: 680ms (unnecessary!)
• jQuery (shouldn't exist!): 320ms
• Google Analytics (bad timing): 190ms
• Contact form validation: 145ms

Rendering: 420ms

• Layout shift from fonts loading: 240ms
• Image reflow (no dimensions!): 180ms

Total Main Thread Blocking: 2,260ms = horrible TBT!!

Optimization Round 1: Quick Wins

1. Optimize Hero Image

Before: 1.2MB PNG
After: Compressed WebP 145KB

Tools:

• TinyPNG.com (online)
• Squoosh.app (Google's tool)

Impact: LCP dropped from 3.2s to 2.1s!! Instant 1.1s improvement!!

2. Remove Unused Font Weights

Only using Regular (400) and Bold (700) but loading 8 weights!!

Fix in Astra:

Customize → Global → Typography → Font Weights

Uncheck: 100, 200, 300, 500, 600, 800, 900

Impact: Saved 180KB, FCP improved 0.3s

3. Replace Font Awesome With SVG

Using 3 icons from 72KB library = wasteful!!

Create inline SVG:

<svg width="24" height="24">...</svg>

Copy actual icons from FontAwesome website, paste as SVG.

Impact: Saved 72KB, removed 1 HTTP request

4. Disable Elementor Animations

Fancy scroll animations eating 680ms JavaScript execution!!

Elementor settings:

Settings → Features → Disable animations

Or per-widget: Remove entrance animations

Impact: TBT dropped from 890ms to 310ms!! Massive improvement!!

5. Defer Non-Critical JavaScript

Add to functions.php (child theme!):

function defer_scripts($tag, $handle, $src) {
    if (is_admin()) return $tag;

    $defer_scripts = [
        'google-analytics',
        'contact-form-7',
        'wp-embed'
    ];

    if (in_array($handle, $defer_scripts)) {
        return str_replace(' src', ' defer src', $tag);
    }

    return $tag;
}
add_filter('script_loader_tag', 'defer_scripts', 10, 3);

Impact: Reduced blocking time 400ms

Optimization Round 2: Advanced Fixes

6. Preload Critical Resources

Add to header (functions.php):

function preload_critical_assets() {
    echo '<link rel="preload" href="/wp-content/themes/astra/assets/css/minified/main.min.css" as="style">';
    echo '<link rel="preload" href="' . get_stylesheet_uri() . '" as="style">';
}
add_action('wp_head', 'preload_critical_assets', 1);

Impact: FCP improved 0.2s

7. Host Google Fonts Locally

Using google-webfonts-helper:

1. Download WOFF2 files
2. Upload to /wp-content/themes/astra-child/fonts/
3. Add CSS:

@font-face {
    font-family: 'Inter';
    src: url('/wp-content/themes/astra-child/fonts/inter-v12-latin-regular.woff2') format('woff2');
    font-display: swap;
}

1. Set in Astra customizer

Impact: Removed external requests, CLS improved from 0.15 to 0.03!!

8. Add Image Dimensions

Layout shift from images loading without dimensions!!

Fix in HTML/Elementor:

<img src="image.jpg" width="800" height="600" loading="lazy">

Always specify actual dimensions!!

Impact: CLS dropped to 0.01 (excellent!)

9. Minify And Combine CSS (Manually)

Using WP Rocket or similar:

Settings → File Optimization:

• Minify CSS: ON
• Combine CSS: ON (test carefully!)
• Optimize CSS delivery: ON

Alternative: Manual critical CSS extraction

Impact: Reduced CSS file count from 12 to 3

10. Lazy Load Off-Screen Images

Native browser lazy loading:

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

Astra supports this! Enable in settings.

Or plugin: Lazy Load by WP Rocket (free)

Impact: Reduced initial page weight 300KB

Testing After Optimizations

Run Lighthouse Again

Same settings as baseline test.

Final Scores

Before → After:

• Performance: 72 → 99 🎉
• FCP: 1.8s → 1.2s
• LCP: 3.2s → 1.6s (50% faster!!)
• TBT: 890ms → 85ms (90% improvement!!)
• CLS: 0.15 → 0.01

Mobile score: 99/100!!

Coverage Report After

CSS unused:

• Before: 76%
• After: 28% (acceptable!)

JavaScript unused:

• Before: 73%
• After: 31% (much better!)

Network Tab After

Total page weight:

• Before: 500KB
• After: 185KB (63% reduction!!)

Requests:

• Before: 42 requests
• After: 18 requests

The DevTools Workflow (Repeatable Process)

1. Baseline Lighthouse audit

• Identify problems
• Note specific metrics

2. Coverage analysis

• Find unused code
• Target biggest waste

3. Network analysis

• Large files
• Render-blocking
• Third-party scripts

4. Performance timeline

• Long tasks
• Main thread bottlenecks
• Rendering issues

5. Implement fixes

• Quick wins first
• Test after each change
• Re-audit

6. Iterate

• Keep testing
• Monitor regressions
• Optimize incrementally

Common Astra Performance Killers

Images without optimization:

• Most common problem
• Biggest LCP impact
• Always compress!!

Too many font weights:

• Easy to over-load
• Unnecessary variants
• Load only what you use!!

Elementor animations:

• JavaScript execution killer
• Often unnecessary
• Disable or minimize!!

jQuery still loading:

• Astra doesn't need it
• Some plugins force it
• Audit plugins, remove jQuery dependencies!!

External font providers:

• Google Fonts = extra requests
• Host locally!!

Render-blocking CSS:

• All CSS loads before content
• Critical CSS + defer non-critical!!

Unused plugin assets:

• Contact forms on every page
• Sliders not used
• Dequeue unused assets!!

Tools Checklist

Built into Chrome:

• Lighthouse (Performance audit)
• Coverage (Unused code)
• Network (Loading analysis)
• Performance (Timeline)

External tools:

• PageSpeed Insights (Google's view)
• GTmetrix (Detailed waterfall)
• WebPageTest (Advanced testing)

Optimization helpers:

• TinyPNG (Image compression)
• Squoosh (WebP conversion)
• google-webfonts-helper (Local fonts)
• WP Rocket (Easy optimizations)

Target Scores (Realistic!)

With proper optimization:

• Mobile: 90-95 (achievable!)
• Desktop: 95-100 (easier!)

Perfect 100 mobile?

• Possible but requires extreme optimization
• 90+ = excellent for real sites!!

Don't obsess over 98 vs 100 - focus on Core Web Vitals!!

Real-World Monitoring After Launch

Getting 99 score once = great!! Keeping it there = the real challenge!!

Chrome User Experience Report

Check PageSpeed Insights for real user metrics from actual visitors:

• 28-day average LCP, FID, CLS
• Mobile vs Desktop breakdown
• Real users on slow connections matter!!

Monitor After Updates

WordPress updates break performance!! After theme/plugin updates, run Lighthouse again.

Caught client drop from 95 to 68 after plugin update - without monitoring = traffic loss unnoticed!!

Client Communication About Performance

"Eliminate render-blocking resources"

Problem: CSS/JS blocks initial paint

Fix options:

1. Inline critical CSS (first-screen styles)
2. Defer non-critical CSS
3. Async JavaScript where possible
4. Preload key resources

For Astra:
Most cache plugins handle this automatically!!

"Reduce unused CSS"

Problem: Loading entire theme CSS when page uses 30%

Fix:

Use PurgeCSS or similar to remove unused selectors.

WP Rocket does this: Settings → File Optimization → Remove Unused CSS

Warning: Test thoroughly!! Can break things if configured wrong.

"Properly size images"

Problem: Serving 2000px image in 400px container

Fix:

WordPress responsive images (srcset) handles this if you:

1. Upload correct size
2. Let WP generate thumbnails
3. Don't disable responsive images in Astra!!

"Serve images in next-gen formats"

Problem: JPG/PNG instead of WebP

Fix:

Convert images to WebP:

• Imagify plugin
• ShortPixel
• Cloudflare Polish
• Manual conversion + .htaccess rules

WebP = 25-35% smaller with same quality!!

"Avoid enormous network payloads"

Problem: Total page >1.6MB

Fix:

1. Optimize images (biggest culprit!)
2. Remove unused plugins
3. Defer off-screen content
4. Lazy load everything below fold

Target: <500KB total for fast mobile

"Minify CSS/JavaScript"

Problem: Unnecessary whitespace/comments

Fix:

Any cache plugin does this! Enable minification.

Manual alternative:

• CSS: cssnano
• JavaScript: Terser/UglifyJS

Impact: Usually 10-30% size reduction

Client Communication About Performance

Show Before/After

Clients love visual proof:

Screenshot Lighthouse reports:

• Before: 72 (red)
• After: 99 (green)

Much more convincing than technical explanation!!

Explain Business Impact

Don't say: "LCP improved 1.6 seconds"

Say: "Site loads 50% faster = fewer visitors bouncing = more conversions"

Google data:

• 1-3s load time: 32% bounce increase
• 1-5s load time: 90% bounce increase
• 1-10s load time: 123% bounce increase

Faster site = more money!! Clients understand that.

Set Realistic Expectations

Don't promise: "100 mobile score guaranteed!"

Promise: "90+ mobile score, optimized Core Web Vitals"

Because:

• 100 requires extreme optimization
• Often impractical trade-offs
• 90-95 = excellent real-world
• Client happy with 90+!!

Bottom Line

Astra gives you lightweight foundation but DevTools shows you exactly what's slowing down YOUR specific site!!

My optimization process:

• 2 hours DevTools analysis
• Implemented 10 fixes
• 72 → 99 score improvement
• Zero design changes

Client reaction: "Holy sh*t it's fast now!!"

Stop guessing at performance problems!! Get Astra and use DevTools to optimize scientifically - Lighthouse doesn't lie!! 🚀

This article contains affiliate links!