Kuvien laiska lataus: loading=lazy
Siirrä näkymän ulkopuolisten kuvien latausta natiivilla loading-attribuutilla
Kuvien laiska lataus: loading=lazy on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
loading-attribuutti
<img loading="lazy" src="..."> kertoo selaimelle, että kuvan lataamista lykätään, kunnes kuva on juuri tulossa näkymäalueelle. Kaikkien nykyaikaisten selainten natiivi tuki tekee tästä yksinkertaisimman suorituskykyparannuksen kuvarikkaille sivuille.
Miten ”lähellä näkymäaluetta” määritellään
Selaimet käyttävät pientä heuristista marginaalia, yleensä muutamaa tuhatta pikseliä taitoksen alapuolella. Kuva alkaa latautua riittävän aikaisin, jotta se on piirretty kokonaan siihen mennessä, kun käyttäjä vierittää sen kohdalle — huolellisesti vieritettäessä lazy loading ei näy.
Milloin lazy loadingia ei pidä käyttää
Älkää koskaan asettako loading="lazy"-määritystä taitoksen yläpuolella oleville kuville tai LCP-kuvalle (largest contentful paint). Viivästetty lataus hidastaa tärkeimmän visuaalisen elementin näkymistä, mikä heikentää sekä koettua nopeutta että Core Web Vitals -tuloksia.
Leveys ja korkeus ovat pakollisia
Jotta lazy loading olisi tehokasta, määrittäkää <img>-elementille eksplisiittiset width- ja height-arvot (tai aspect-ratio CSS:ssä). Ilman mittoja selain ei voi varata tilaa, vierittäminen aiheuttaa asettelun uudelleenjärjestymistä ja lazy loading -heuristiikka toimii väärin.
<img loading="lazy" src="cat.jpg" width="800" height="600" alt="A cat">iframe-elementin lazy loading
Sama attribuutti toimii myös <iframe>-elementissä. <iframe loading="lazy"> lykkää taitoksen alapuolella olevien karttojen, videoiden ja sosiaalisen median upotusten lataamista — muutoin jokainen niistä lataisi useita megatavuja kolmannen osapuolen JavaScriptiä jokaisella sivun katselukerralla.
eager on oletusarvo
Oletusarvo on loading="eager" (lataa heti), eikä sitä yleensä kirjoiteta erikseen. eager-arvon asettamisesta taitoksen yläpuolella oleville kuville voi olla hyötyä dokumentaationa: se viestii tarkistajille, että eager-valinta on tehty tarkoituksella.
Yhdistä srcset-attribuuttiin
Lazy loading toimii täydellisesti yhdessä responsiivisten kuvien kanssa. Selain valitsee edelleen oikean vaihtoehdon srcset-arvosta, mutta lykkää lataamista. loading="lazy"- ja srcset-määritysten välillä ei tarvita ylimääräistä yhteensovittamista.
<img
loading="lazy"
srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w"
sizes="(min-width: 768px) 800px, 100vw"
src="img-800.jpg"
alt="Hero"
width="800" height="600"
>Dekoodausvihje
Yhdistä lazy loading määritykseen decoding="async", jotta selain voi dekoodata kuvan pääsäikeen ulkopuolella. Näin syötteiden käsittely ei esty vieritettäessä, kun useita kuvia saapuu samanaikaisesti pitkän vierityksen jälkeen.
Taustakuvat
CSS:n background-image-ominaisuutta ei voi ladata lazy loadingilla natiivisti. Taitoksen yläpuolella oleville hero-taustoille tämä ei ole ongelma, mutta taitoksen alapuolella oleville taustoille käyttäkää IntersectionObserveria ja vaihtakaa URL käyttöön, kun elementti lähestyy näkymäaluetta.
Tulostuskäyttäytyminen
Kun sivu tulostetaan, selain lataa kaikki kuvat eager-tilassa loading="lazy"-määrityksestä riippumatta, jotta tulostettu versio on täydellinen. Lazy-kuvia ei tarvitse käsitellä erikseen tulostustyylitiedostoissa.
Säästöjen mittaaminen
Lighthousen ”Defer offscreen images” -tarkastus luettelee kaikki kuvat, joissa pitäisi käyttää määritystä loading="lazy". Verkkopaneelin suodatus arvolla ”Img” ja ”Waterfall”-näkymä näyttävät lazy loadingin tuottamat porrastetut lataukset — kuvaragallerioissa alkuperäisten pyyntöjen määrä vähenee huomattavasti.
Tietotesti
Miksi on haitallista asettaa loading="lazy" sivun yläosassa olevalle hero-kuvalle?
Yhteenveto
loading="lazy" näkymäalueen ulkopuolella olevissa <img>- ja <iframe>-elementeissä on yhden attribuutin suorituskykyparannus. Yhdistä se eksplisiittisiin width/height-arvoihin (tilan varaamiseksi), srcset-määritykseen (responsiivisuutta varten) ja määritykseen decoding="async" (vierityksen pitämiseksi sujuvana). Älkää koskaan käyttäkö sitä LCP-kuvassa tai missään alun perin näkyvässä näkymäalueen sisällössä.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Kuvien laiska lataus: loading=lazy” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Kuvien laiska lataus: loading=lazy”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Kuvien laiska lataus: loading=lazy”?
Siirrä näkymän ulkopuolisten kuvien latausta natiivilla loading-attribuutilla Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Kuvien laiska lataus: loading=lazy”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- async- ja defer-attribuutit
- Preload, Prefetch ja Preconnect
- Kuvien laiska lataus: loading=lazy
- Resurssivihjeet: modulepreload