Critical Rendering Path
- Parse HTML and CSS
- Build render tree
- Layout and paint
Resource Loading
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<script src="app.js" defer></script>
Image Strategy
| Practice | Benefit |
|---|---|
| Use WebP/AVIF | Smaller assets |
| Set width/height | Lower CLS |
| Lazy load images | Faster initial render |
sequenceDiagram
Browser->>Server: Request HTML
Server-->>Browser: Return HTML
Browser->>Server: Request CSS/JS/Images
Server-->>Browser: Return assets