Paveikslėliai dažniausiai yra sunkiausi baitai puslapyje, todėl jų optimizavimas yra didžiausias LCP laimėjimas. Trys svertai: modernūs formatai, responsyvus dydžiavimas ir įkėlimo prioritetas.
AVIF ir WebP suspaudžia kur kas mažiau nei JPEG/PNG esant tai pačiai kokybei (AVIF dažnai 50% mažesnis nei JPEG). Tiekite juos su atsarga (fallback), kad senos naršyklės vis dar veiktų:
Nesiųskite 2000px paveikslėlio į 400px telefoną. srcset leidžia naršyklei parinkti tinkamą dydį įrenginiui:
<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 nurodo naršyklei, kaip plačiai paveikslėlis atvaizduojamas, kad ji galėtų pasirinkti mažiausią pakankamą šaltinį.
fetchpriority="high", loading="eager" ir apsvarstykite preload.loading="lazy", kad nebūtų atsisiunčiamas, kol neprireikia.Visada išlaikykite width/height, kad išvengtumėte CLS.
Lėtas LCP dažniausiai tėra per didelis hero paveikslėlis. Žinojimas apie formatus (AVIF/WebP), srcset tinkamai raiškai ir teisingą prioritetą — plius LCP paveikslėlio nelazy-loadinimas — yra praktinis įrankių rinkinys, kurio interviuotojai tikisi, ir tai dažniausiai vienintelis didžiausio poveikio pakeitimas realioje svetainėje.
IT pokalbių klausimų biblioteka su išsamiais atsakymais — nuo Junior iki Senior.
Paaukoti