/products
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>
A meta description improves click-through rate in search results.
main > section.hero > img
<img src="/images/hero.jpg" loading="eager">
|
Type
|
Count
|
Size
|
|---|---|---|
| script | 14 | 681 KB |
| stylesheet | 3 | 76 KB |
| image | 11 | 230 KB |
| font | 3 | 47 KB |
| document | 1 | 19 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
578ms
vendor.js
115ms