Why do my images make my website so slow?
posée 4 months ago595 vuesen
Lighthouse gives my homepage a performance score of 34. The main issue listed is images: "Properly size images" and "Serve images in next-gen formats". What should I do?
Diagnostic IA
Généré par IA. Ce n'est pas une réponse — la communauté ci-dessous le confirme ou le corrige. Vérifiez toujours avant de vous y fier.
1 réponse
Images are usually the biggest part of page weight. The fixes:
1. Right size: don't serve a 4000px photo into a 400px slot. Generate a few sizes and let the browser choose:
<img src="hero-800.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="450" alt="...">2. Modern formats: WebP or AVIF are typically 30–60% smaller than JPEG at similar quality. 3. Lazy-load below-the-fold images with loading="lazy". Do not lazy-load the main hero image; give it fetchpriority="high" instead. 4. Always set width and height so the layout doesn't jump (CLS). 5. Automate it: Next.js <Image>, a CDN image service, or sharp in your build.
For users on mobile data, this is often the single biggest performance and cost win.
Connectez-vous pour dire si ça a marché.
Sign in and verify your email to post an answer.