/
Resources in the head block first paint until they download. Defer or inline critical CSS.
Render-blocking resources in <head> delay first paint until the browser downloads and parses them. Every kilobyte adds latency, especially on slow networks.
<!-- Defer non-critical scripts -->
<script src="analytics.js" defer></script>
<!-- Async for independent scripts -->
<script src="ads.js" async></script>
<!-- Blocks parsing until downloaded -->
<script src="jquery.js"></script>
main > section.hero > img
<img src="/images/hero.jpg" loading="eager">
|
Type
|
Count
|
Size
|
|---|---|---|
| script | 12 | 553 KB |
| stylesheet | 5 | 116 KB |
| image | 9 | 422 KB |
| font | 1 | 60 KB |
| document | 1 | 20 KB |
|
Entity
|
Transfer
|
Blocking
|
Main thread
|
|---|---|---|---|
| Google Analytics | 23 KB | 60ms | 100ms |
|
URL
|
Type
|
Size
|
Duration
|
|---|---|---|---|
vendor.js
|
371 KB | ||
products
|
24 KB |
app.js
523ms
vendor.js
260ms