Kuvat ovat yleensä sivun raskaimmat tavut, joten niiden optimointi on suurin LCP-voitto. Kolme vipua: modernit formaatit, responsiivinen mitoitus ja latausprioriteetti.
AVIF ja WebP pakkaavat paljon pienemmiksi kuin JPEG/PNG samalla laadulla (AVIF usein 50 % pienempi kuin JPEG). Tarjoile ne varafallbackin kanssa, jotta vanhat selaimet toimivat yhä:
Älä lähetä 2000px-kuvaa 400px-puhelimelle. srcset antaa selaimen valita oikean koon laitteelle:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes kertoo selaimelle, kuinka leveänä kuva renderöityy, jotta se voi valita pienimmän riittävän lähteen.
fetchpriority="high", loading="eager", ja harkitse preloadia.loading="lazy", jotta sitä ei haeta ennen kuin tarvitaan.Pidä aina width/height estääksesi CLS:n.
Hidas LCP on useimmiten vain ylisuuri hero-kuva. Formaattien (AVIF/WebP), srcsetin oikeaa resoluutiota varten ja oikean prioriteetin tunteminen — plus LCP-kuvan lazy-lataamatta jättäminen — on käytännön työkalupakki, jota haastattelijat odottavat, ja se on yleensä yksittäinen suurin muutos oikealla sivustolla.
Kirjasto IT-haastattelukysymyksiä yksityiskohtaisine vastauksineen — Juniorista Senioriin.
Lahjoita