Why do my images make my website so slow?
poze 4 months ago590 gadeen
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?
Dyagnostik IA
Se IA ki fè l. Se pa yon repons — kominote a anba a konfime oswa korije l. Toujou verifye anvan ou fye l.
1 Repons
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.
Konekte pou di lòt moun si li te mache.
Sign in and verify your email to post an answer.