/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>JavaScript shipped to the browser but never executed wastes bandwidth and parse time.
Unused JavaScript still costs network bandwidth, parse time, and CPU. The browser must download, parse, and compile every byte you ship — even if it never executes.
// Lazy-load route-specific JS
const Dashboard = () => import('./Dashboard.js');
// Or use @vite directive in Blade
@vite(['resources/js/app.js'])<!-- Loading the entire bundle on every page -->
<script src="/build/everything.js"></script><script src="/build/assets/app-abc.js"></script>
main > section.hero > img
<img src="/images/hero.jpg" loading="eager">
|
Type
|
Count
|
Size
|
|---|---|---|
| script | 13 | 581 KB |
| stylesheet | 2 | 126 KB |
| image | 16 | 725 KB |
| font | 1 | 103 KB |
| document | 1 | 33 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
444ms
vendor.js
296ms