Postat acum 1 zi
html
<!-- Preload LCP image, fetchpriority="high" -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Font-ul principal, fallback inline -->
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/main.woff2">
<!-- Scripts third-party cu defer / async -->
<script defer src="/gtag.js"></script>Ordinea în care eu atac un site lent
-
LCP (Largest Contentful Paint) < 2.5s
- Imaginea hero e preload-ată? Are
fetchpriority="high"? - Fontul principal e preload-at cu
crossorigin? - Serverul răspunde în <500ms? (TTFB)
- Imaginea hero e preload-ată? Are
-
INP (Interaction to Next Paint) < 200ms
- Evită
useEffectcu dependențe care re-rulează la fiecare tastă - Ține JS bundle-ul <100kb gzip pentru pagina principală
- Folosește
startTransitionpentru state updates non-critice
- Evită
-
CLS (Cumulative Layout Shift) < 0.1
- Imagini cu
widthșiheightexplicite (sauaspect-ratio) - Nu injecta ad-uri care împing conținutul
- Font
size-adjustca să nu sară layout-ul între fallback și fontul real
- Imagini cu
Tool-uri
- PageSpeed Insights — field data reale
- Chrome DevTools → Performance → capturezi reload
- WebPageTest — connection throttling realist