How to Use Chrome DevTools for a Manual Performance Audit

While automated tools like Lighthouse give you a score, Chrome DevTools gives you the complete picture. A manual audit reveals issues that automated tools miss — from third-party bottlenecks to main-thread congestion.

Setup: Simulate Real Conditions

Before auditing, configure DevTools to simulate real-world conditions:

1. Open DevTools (F12 or Cmd+Opt+I)
2. Network tab → Throttling → "Fast 3G" or "Slow 4G"
3. Performance tab → CPU → "4x slowdown"
4. Disable cache → Network tab → check "Disable cache"
5. Use Incognito mode to prevent extensions from affecting results

Step 1: Lighthouse Baseline (2 minutes)

1. DevTools → Lighthouse tab
2. Select: Performance, Mobile, Navigation
3. Click "Analyze page load"
4. Note the scores and key metrics:
   • LCP, FID/INP, CLS, FCP, TBT
   • Save this as your baseline

Step 2: Network Waterfall Analysis (10 minutes)

1. DevTools → Network tab → reload the page
2. Analyze the waterfall chart:

Look for:

• Long bars → large files that need compression or code splitting
• Gaps between bars → resources discovered late (need preload/preconnect)
• Many small requests → consolidate or use HTTP/2
• Third-party domains → count and assess necessity

Key columns to check:

Column	What to Look For
Size	Files over 100KB (candidates for optimization)
Time	Requests over 500ms (slow server or large file)
Initiator	What triggered each request
Priority	Ensure LCP resources are "High"

Filter by type:

• JS — total JavaScript size, number of files
• CSS — render-blocking stylesheets
• Img — unoptimized images, wrong formats
• Font — number of font files, total size

Step 3: Coverage Analysis (5 minutes)

1. Cmd+Shift+P → "Show Coverage"
2. Click the reload button
3. Interact with the page (click menus, scroll, open modals)

Look for:

• CSS files with >70% unused (red) — candidates for tree-shaking
• JS files with >50% unused — candidates for code splitting
• Third-party scripts with high unused percentages

Step 4: Performance Recording (10 minutes)

1. DevTools → Performance tab
2. Click Record (⏺) → reload the page → wait for load → Stop
3. Analyze the flame chart:

Key areas:

• Main thread — long yellow (JS) blocks indicate TBT issues
• Network lane — verify critical resources load first
• Frames — look for dropped frames (janky scrolling)
• Timings — FCP, LCP, DCL markers

Finding Long Tasks

Long tasks (>50ms) block the main thread:

• Click on any long yellow block in the flame chart
• Check the "Bottom-Up" tab to see which functions took the most time
• Common culprits: JSON parsing, DOM manipulation, layout recalculation

Step 5: Core Web Vitals Deep Dive (5 minutes)

LCP

• Performance tab → look for the LCP marker
• Click it to identify the LCP element
• Check if it's preloaded, if it uses fetchpriority="high", if it's lazy-loaded (shouldn't be)

CLS

• Performance tab → look for red "Layout Shift" markers
• Click each to see which elements shifted
• Common causes: images without dimensions, late-loading fonts, injected content

INP/TBT

• Performance tab → interact with the page (click buttons, type in inputs)
• Look for long tasks triggered by interactions
• Check for JavaScript blocking the main thread

Step 6: Third-Party Audit (5 minutes)

1. Network tab → Group by Domain
2. Count third-party domains
3. For each, assess:
   • Is it necessary?
   • How much does it load?
   • Can it be deferred?
   • Is there a lighter alternative?

The Audit Report Template

Summarize findings:

## Performance Audit — [Site Name] — [Date]

### Scores
- Lighthouse: XX/100
- LCP: X.Xs (target: <2.5s)
- CLS: X.XX (target: <0.1)
- TBT: XXXms (target: <200ms)

### Critical Issues
1. [Issue] — [Impact] — [Fix]
2. ...

### Quick Wins
1. [Issue] — [Impact] — [Effort]
2. ...

### Long-Term Improvements
1. [Issue] — [Impact] — [Effort]
2. ...

Automate What You Can

Manual audits are thorough but time-consuming. For continuous monitoring between audits, use BadPageSpeed to track your Core Web Vitals automatically.

Set up automated monitoring →