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:
- Download WOFF2 files
- Upload to
/wp-content/themes/astra-child/fonts/ - 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;
}
- 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:
- Inline critical CSS (first-screen styles)
- Defer non-critical CSS
- Async JavaScript where possible
- 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:
- Upload correct size
- Let WP generate thumbnails
- 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:
- Optimize images (biggest culprit!)
- Remove unused plugins
- Defer off-screen content
- 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!
Top comments (0)