Kuvien lazy loading: milloin sitä kannattaa käyttää?

Mitä viivästetty lataus muuttaa?

Lazy loading muuttaa kuvan latauspyynnön ajankohtaa. Se ei muuta pikselimittoja, kuvamuotoa eikä pakkausta. Ajattele pitkää reseptisivua: kävijä tarvitsee ensimmäisen näkymän nopeasti, mutta ei välttämättä koskaan päädy sivun lopun viidentoista kuvan kohdalle. Myöhempien kuvien latauksen siirtäminen voi vähentää tarpeettomia latauksia sivun avaamisen yhteydessä.

Tässä on kolme eri tehtävää. Koon muuttaminen poistaa tarpeettomia pikseleitä. Pakkaus vähentää kuvan tallentamiseen tarvittavaa dataa. Lazy loading lykkää latauspyyntöä. Suuri kuva voi silti olla raskas silloin, kun se lopulta ladataan. Pieni kuva puolestaan voi ilmestyä myöhässä, jos sen lataaminen aloitetaan liian myöhään.

Suunnittele nämä vaiheet erikseen. Muuta kuvat sopivaan pikselikokoon koonmuutostyökalulla ja vertaa tarvittaessa pakkausta. Päätä sitten, mitkä kuvat ensimmäinen näkymä tarvitsee. Tiedostokoon pienentämisen opas käsittelee valmistelua; tämä opas keskittyy lataustavan valintaan.

Näin pääset alkuun ilman koodaamista

Sinun ei tarvitse muokata HTML-koodia päättääksesi, mitkä kuvat ladataan ensin. Aloita yhdestä tyypillisestä sivusta, esimerkiksi tuotesivusta tai pitkästä artikkelista. Ensimmäinen näkymä tarkoittaa sitä osaa sivusta, jonka näet ennen vierittämistä.

1. Etsi nykyinen asetus. Katso sivuston hallinnasta teeman, kuvien tai suorituskyvyn asetuksia. Etsi nimeä lazy loading, kuvien viivästetty lataus tai vastaavaa. Nimi ja sijainti vaihtelevat, ja joissakin palveluissa toiminto on automaattinen. Jos asetusta ei löydy, kysy sivuston ylläpitäjältä ennen uuden lisäosan asentamista.
2. Anna ensimmäisen näkymän latautua normaalisti. Pääkuvan ja muiden heti näkyvien kuvien latausta ei kannata lykätä. Jos asetuksessa voi määrittää poikkeuksia, selvitä, miten nämä kuvat rajataan viivästyksen ulkopuolelle. Älä ota kaikkia kuvia koskevaa sääntöä käyttöön ennen kuin tiedät, miten pääkuva käsitellään.
3. Kokeile viivästystä alempana oleville kuville. Artikkelin myöhemmät kuvitukset ovat hyvä aloituskohde. Käytä esikatselua tai testisivua, jos sellainen on saatavilla, ja tarkista lopuksi julkaistu sivu. Testaa galleria erikseen, sillä kävijä voi vaihtaa sen kuvia nopeasti.
4. Tarkista, että sivua on sujuva lukea. Avaa sivu puhelimella ja tietokoneella. Ilmestyykö pääkuva nopeasti? Tulevatko alemmat kuvat näkyviin ajoissa, kun vierität hitaasti ja sitten nopeasti? Hyppiikö teksti kuvan ilmestyessä? Kokeile myös linkkiä, joka vie suoraan alempaan osioon.

Jos huomaat ongelman, palauta juuri muuttamasi asetus ja pyydä apua kyseisen sivun kanssa. Näin voit havaita selvän viiveen tai sisällön liikkumisen, mutta pelkkä silmämääräinen tarkistus ei todista sivuston nopeutuneen. Latausaikojen vertailuun tarvitaan suorituskykyraportti. Alempana oleva testausosio kertoo, mitä tuloksia kannattaa kirjata.

Voit lähettää ylläpitäjälle tämän pyynnön: ”Tarkistaisitko kuvien viivästetyn latauksen tällä sivulla? Anna pääkuvan ja muiden ensimmäisessä näkymässä näkyvien kuvien latautua normaalisti. Lykkää sopivien alempana olevien kuvien latausta ja varaa niille tila, jotta teksti ei hypi. Testaa toiminta puhelimella ja tietokoneella sekä vertaa pääkuvan latausaikaa ennen muutosta ja sen jälkeen.” Liitä mukaan sivun osoite ja kerro, jos jokin kuva ilmestyy myöhässä.

Minkä kuvien latausta kannattaa lykätä?

Avaa tyypillinen sivu vierittämättä sitä. Kirjaa näkyvät kuvat ja ne, jotka auttavat kävijää ymmärtämään sivun sisällön. Toista kapealla puhelimella ja leveällä tietokoneen näytöllä: banneri, otsikko ja tuotekuvagalleria voivat sijoittua eri tavoin ensimmäiseen näkymään.

Tee valinta todellisen sijainnin, älä tiedostonimen tai latausjärjestyksen perusteella. Mediakirjaston ensimmäinen kuva ei välttämättä ole sivun ensimmäinen kuva. Myös pitkän johdannon alapuolella oleva valokuva voi siirtyä ensimmäiseen näkymään toisessa sivupohjassa.

Jos sama kuva näkyy heti tietokoneella mutta on puhelimella alempana, normaali lataus on turvallinen lähtökohta. loading-asetusta ei voi vaihtaa näyttökoon perusteella samalla tavalla kuin picture-rakenteen kuvalähdettä. Älä lisää näyttökokoa tarkistavaa ohjelmaa vain yhden pyynnön säästämiseksi. Selvitä ensin, kuormittaako kyseinen lataus sivua merkittävästi.

Piilotettu galleriakuva ei automaattisesti tarkoita lykättyä latausta. Gallerian oma ohjelma voi esiladata kuvia niiden HTML-asetuksista riippumatta. Testaa gallerian nopea selaaminen ja palaaminen aiempaan kuvaan pelkän sivun vierittämisen lisäksi.

Miksi pääkuvan ei pidä odottaa?

Largest Contentful Paint (LCP) mittaa, kuinka pian ensimmäisen näkymän suurin sisältöelementti tulee näkyviin. Se on usein pääkuva, mutta voi olla myös tekstilohko. Selvitä mitattu elementti suorituskykyraportista ennen tärkeimmän kuvan valitsemista. Jos elementti on kuva, vältä sen viivästettyä latausta. Kun kuvan osoite on mukana palvelimen lähettämässä HTML:ssä, selain pääsee aloittamaan latauksen ajoissa. Jos JavaScript lisää osoitteen vasta myöhemmin, latauksen alku voi viivästyä.

Lazy loadingin poistaminen ei korjaa kaikkia hitaan pääkuvan syitä. Palvelimen vastaus, tiedoston koko ja kuvan näyttäminen voivat edelleen hallita viivettä. Googlen LCP-optimoinnin ohje erottaa nämä vaiheet. Pixilon Core Web Vitals -opas auttaa erottamaan latausongelman asettelun liikkumisesta.

Käytä fetchpriority="high"-prioriteettivihjettä harkitusti sille kuvalle, jonka olet tunnistanut tärkeäksi. Korkean prioriteetin antaminen gallerian kaikille kuville ei luo hyödyllistä järjestystä. Vihjeen lisääminen viivästetysti ladattavaan kuvaan ei myöskään korvaa viivästyksen poistamista näkyvältä pääkuvalta.

Tarkista sisällönhallinnan ja gallerian nykyinen toiminta

Tutki julkaistun sivun kuva ennen lazy loading -lisäosan asentamista. Sisällönhallinta, teema tai optimointipalvelu voi jo lisätä asetuksen. Katso lopullista HTML:ää ja oikeaa latauspyyntöä. Asetuksen nimi, kuten kuvien optimointi, ei yksin kerro käytössä olevaa lataustapaa.

Hallinnoi viivästettyä latausta yhdessä paikassa. Jos nykyinen ohjelma vaihtaa kuvien osoitteita, lisää niiden ympärille rakenteita tai esilataa gallerian kuvia, toinen mekanismi voi vaikeuttaa viiveen selvittämistä. Aloita yhdestä sivusta ja varmista, ettei pääkuvan latausta lykätä.

CSS-taustakuva on erillinen tapaus: img-elementin latausasetusta ei voi liittää taustakuvan määrittelyyn. Pyydä sivupohjan ylläpitäjää tarkistamaan, miten juuri tämä kuva löytyy. Kuvaelementin liittäminen näkyvään sisältölohkoon ei itsessään muuta teeman taustakuvan toimintaa.

Lisää lazy loading HTML-kuvaan

Kun tavallinen artikkelikuvitus on selvästi ensimmäisen näkymän alapuolella, säilytä kuvan oikea osoite src-kentässä ja lisää latausasetus. Esimerkkien polut ovat havainnollistavia: vaihda ne oman sivustosi tiedostoihin ja kirjoita sisältöön sopiva alt-teksti. Kerro siinä, mitä sisältöä havainnollistava kuva näyttää, ja jätä reseptin toimintaohjeet varsinaiseen tekstiin. Pelkälle koristekuvalle kuuluu tyhjä alt="".

<img
  src="/images/recipe-step-04.webp"
  width="1200"
  height="800"
  loading="lazy"
  alt="Taikina taitettuna täytteen päälle, reunat vielä avoimina"
>

Ensimmäisessä näkymässä oleva, LCP-kuvaksi mitattu valokuva tarvitsee toisen valinnan:

<img
  src="/images/finished-loaf.webp"
  width="1200"
  height="800"
  loading="eager"
  fetchpriority="high"
  alt="Vastapaistettu leipä, jossa on kullanruskea kuori"
>

eager tarkoittaa normaalia latausta. Myös loading-asetuksen jättäminen pois tarkoittaa yleensä samaa. Selkeä arvo voi auttaa, jos sivupohja lisää muutoin viivästetyn latauksen automaattisesti. Se ei tarkoita välitöntä valmistumista. MDN:n kuvaelementin ohje selittää asetukset.

Selain päättää, milloin viivästetysti ladattava kuva on riittävän lähellä näkyvää aluetta. Kuva voi latautua ennen näkymään saapumista, joten näkymän ulkopuolinen pyyntö ei yksin osoita asetuksen epäonnistumista. Älä sido testin hyväksyntää kiinteään vieritysetäisyyteen. Lisätietoa on web.dev:n lazy loading -ohjeessa.

Varaa kuvan tila ja säilytä responsiiviset versiot

Aseta width ja height vastaamaan lähdekuvan pikselimittoja: esimerkeissä tiedosto on 1200 × 800 pikseliä. Arvot kertovat mittasuhteet, mutta CSS voi silti näyttää kuvan pienempänä. Jos kopioit samat luvut erimuotoiselle kuvalle, sille voidaan varata väärän kokoinen tila. Ilman rajausta skaalautuvan kuvan mittasuhteet voi säilyttää responsiivisella tyylillä:

.article-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Lisää oikeaan kuvaan class="article-image" tai sovita sääntö sivustosi nykyiseen tyyliin. Jos ulkoasu käyttää kiinteää rajausta, varaa sen näyttötila. Testaa todellinen sivu: muu CSS voi ohittaa muuten järkevän HTML-määrittelyn.

Lazy loading ei korvaa srcset- ja sizes-asetuksia. Säilytä hyödylliset kuvaversiot, jotta selain voi valita sopivan tiedoston latauksen alkaessa. picture-rakenteessa latausasetus tulee sen img-elementtiin. Responsiivisten kuvien opas sisältää kokonaiset esimerkit koon valinnasta.

Näin testaat muutoksen julkaistulla sivulla

1. Kirjaa lähtötilanne. Tallenna sivun osoite, näyttökoko ja mitattu LCP-elementti. Kirjaa LCP-aika, pääkuvan pyynnön alkamishetki ja ennen vierittämistä siirrettyjen kuvien datamäärä. Merkitse, testaatko ensikäyntiä vai välimuistista latautuvaa sivua.
2. Tutki kuvapyynnöt. Avaa Network- eli verkkopaneeli ennen sivun päivittämistä ja rajaa näkymä kuviin. Kirjaa ensimmäisen näkymän tiedostot ja pyyntöjen alkamishetket.
3. Muuta yhtä lataussääntöä. Poista esimerkiksi pääkuvan viivästetty lataus tai ota se käyttöön artikkelin myöhemmille kuville.
4. Varmista julkaistu tulos. Tarkista kuvan lopulliset asetukset ja pyydetyt osoitteet tarvittavan välimuistin päivityksen jälkeen. Paikallinen sivupohjan muutos ei vielä vaikuta julkaistuun sivuun.
5. Toista testi ja vieritä. Vertaa vastaavia mittauksia. Vieritä sitten hitaasti ja nopeasti, käytä galleriaa ja avaa linkki suoraan alempaan osioon. Etsi tyhjiä alueita ja asettelun liikkumista.

Ensikäynnin vertailussa selaimen Disable cache -asetus auttaa poistamaan selaimen välimuistin vaikutuksen kehittäjätyökalujen ollessa auki. Se ei tyhjennä palvelimen tai CDN:n välimuistia. Chromen verkkopaneelin ohje selittää pyyntöjen tutkimista. Pidä verkkoyhteyden testiasetukset samoina ja vertaa useita mittauksia parhaan yksittäisen tuloksen sijaan.

Aloita vertailut sivun yläreunasta. Käytä samaa näyttökokoa, samoja verkkoyhteyden testiasetuksia ja yhtä pitkää seuranta-aikaa ennen vierittämistä. Vieritä vasta alkutulosten kirjaamisen jälkeen, jotta myöhempien kuvien lataukset eivät vääristä vertailua. Selaimen palauttama aiempi vierityskohta voi myös käynnistää alempana olevan kuvan latauksen heti.

Onnistunut muutos tuo tärkeän ensimmäisen näkymän saataville ajoissa ja näyttää myöhemmät kuvat niitä tarvittaessa. Varhaisten pyyntöjen vähentäminen auttaa vain, jos lukeminen ja liikkuminen säilyvät sujuvina. PageSpeed-opas auttaa suorituskykytulosten vertailussa.

Esimerkki: artikkeli, kansikuva ja kaksitoista kuvitusta

Pitkässä artikkelissa on kansikuva ensimmäisessä näkymässä ja kaksitoista valokuvaa alempana. Yleinen asetus määrittää kaikki kolmetoista kuvaa viivästetysti ladattaviksi. Kansikuva ilmestyy puhelimella myöhään, vaikka sen tiedostokoko on jo maltillinen. Tämä on havainnollistava työnkulku, ei mitattu nopeutus.

Varmista ensin, onko kansikuva raportin LCP-elementti. Poista siltä viivästetty lataus ja testaa tämä muutos erikseen. Säilytä myöhempien kuvien harkittu viivästys ja niille varattu näyttötila. Jos ensimmäinen kuvitus näkyy tietokoneen aloitusnäkymässä, anna senkin latautua normaalisti.

Vertaa julkaisun jälkeen kansikuvan pyynnön alkua ja LCP:tä samanlaisissa testeissä. Vieritä kaikki kaksitoista kuvitusta läpi, siirry osiolinkillä alemmaksi ja tarkista jokainen kuva. Jos kansikuva saapuu ajoissa mutta animaatio pitää sen piilossa, tutki näyttämisen viivettä latausasetuksen jatkuvan muuttamisen sijaan.

Pidä viivästetysti ladattavat kuvat löydettävinä

Käytä kuvaavaa alt-tekstiä ja kuvan oikeaa lähdeosoitetta. Jos ohjelma jättää tilalle pelkän paikkamerkin siihen asti, että joku napsauttaa tai vierittää, toteutus vaatii tarkemman selvityksen. Googlen lazy loading -ohje suosittelee toimintaa, joka lataa sisällön sen tullessa näkymään riippumatta käyttäjän vuorovaikutustapahtumasta.

Jos tämä huolettaa julkaistulla sivustolla, tutki renderöity sivu Search Consolen URL-tarkastuksella. Varmista, että tärkeiden kuvien osoitteet löytyvät renderöidystä HTML:stä. Suorituskykyasetus ei takaa jokaisen kuvan indeksointia tai parempia hakusijoituksia.

Usein kysytyt kysymykset

Kannattaako kaikki kuvat ladata viivästetysti?

Ei. Valitse sijainnin ja merkityksen perusteella. Ensimmäisen näkymän tarvitsevien kuvien, erityisesti LCP-kuvan, ei pidä odottaa viivästettyä latausta.

Pienentääkö lazy loading kuvatiedostoa?

Ei. Se muuttaa pyynnön ajankohtaa. Muuta erillisen kopion kokoa tai pakkausta, jos pikselimitat tai tiedostokoko ovat liian suuret.

Tarvitaanko JavaScript-kirjasto?

Selaimen oma lazy loading ei tarvitse erillistä kirjastoa tavallisille HTML-kuville. Jos JavaScript on poistettu käytöstä, selain ei lykkää latausta, vaan oikean lähdeosoitteen sisältävät kuvat latautuvat normaalisti. Jos ohjelma säilyttää kuvan ainoan osoitteen data-src-kentässä, tarvitaan erillinen vararatkaisu. Harkitse omaa toteutusta vain tiettyyn tarpeeseen ja testaa se huolellisesti.

Miksi osa näkymän ulkopuolisista kuvista latautuu heti?

Ne voivat olla riittävän lähellä selaimen latauskynnystä tai sivun toinen osa voi esiladata niitä. Katso Network-paneelin Initiator-kohdasta, mikä käynnisti pyynnön, ja tarkista gallerian tai teeman asetukset ennen toiminnan tulkitsemista virheeksi.

Korvaako async-dekoodaus lazy loadingin?

Ei. decoding-vihje liittyy kuvan purkamiseen ja näyttämiseen, kun taas loading liittyy latauksen lykkäämiseen. Yhden asetus ei kerro toisen toiminnasta.

Tiivistä tekoälylläChatGPT (avautuu uuteen välilehteen)Grok (avautuu uuteen välilehteen)Google (avautuu uuteen välilehteen)Perplexity (avautuu uuteen välilehteen)Claude (avautuu uuteen välilehteen)