A practical guide for frontend developers · 2025
Your app feels slow but you don't know where. Users complain about load times, Google Pagespeed scores are mediocre, and you've stared at the waterfall panel for hours. HAR files contain everything your browser downloaded — request/response timing, sizes, caching headers, errors.
Open DevTools (F12) → Network tab → Check "Preserve log" → Refresh → Right-click → "Save all as HAR with requests".
The waterfall view shows every resource stacked vertically. Look for horizontal gaps between when a request starts and ends. Long bars = slow responses.
| Type | What to look for | Typical fix |
|---|---|---|
| Server wait time | TTFB > 500ms | Optimize backend queries, add caching |
| Download speed | Slow transfer for large resources | Compress, lazy-load, use CDN |
| Queue/delay | Many requests waiting sequentially | Prioritize critical path, parallelize |
Not all endpoints matter equally. A third-party analytics script taking 800ms may not hurt UX. But an API call that blocks rendering?
Categorize by:
import json
with open('export.har') as f:
har = json.load(f)
for entry in har['log']['entries']:
print(f"{entry['request']['url']}:")
print(f" TTFB: {entry['time']*1000:.0f}ms")
HAR files vary wildly in size. Clean exports have ~20 entries. Production exports can have hundreds. Manually reviewing is impractical.
This is why I built HAR Timing Report — a tool that parses HAR files entirely in your browser, extracts only allowlisted timing metrics, and outputs clean CSV reports grouped by category.
Built and maintained with care · MIT Licensed · © 2025