Kaikkien sivun kuvien ei tarvitse latautua yhtä aikaa. Kuvien viivästetty lataus (lazy loading) lykkää niiden kuvien latausta, jotka eivät ole vielä näkyvissä kävijän näkymässä, jolloin selain keskittyy sisältöön, jonka kävijä oikeasti näkee, sen sijaan että lataisi koko sivun kerralla. Sivuilla, joilla on paljon kuvia, tämä muutos yksin voi lyhentää alkulatausaikaa merkittävästi ja parantaa mittareita, joilla on väliä sekä kävijäkokemukselle että hakusijoituksille. Tässä artikkelissa selitetään, mitä viivästetty lataus on, miten se toimii teknisesti, mitä kannattaa ja mitä ei kannata ladata viivästetysti ja miten se vaikuttaa Core Web Vitals -pisteisiin.
Kun selain lataa sivun ilman viivästettyä latausta, se lataa jokaisen sivun kuvan riippumatta siitä, onko mikään niistä vielä näkyvissä. Kävijä, joka avaa sivun ja lähtee heti, käynnistää silti kaikkien näkyvän alueen alapuolella olevien kuvien latauksen. Se on hukkaan menevää kaistaa, ja se hidastaa sen kaiken latautumista, mitä kävijä näkyvän alueen yläpuolella oikeasti näkee. Viivästetty lataus muuttaa tämän niin, että ladataan vain parhaillaan näkyvä sisältö. Siitä, miten tämä liittyy sivun latausnopeuden kokonaiskuvaan, kerrotaan artikkelissa miten lyhennät verkkosivustosi latausaikaa.
Mitä viivästetty lataus on?
Viivästetty lataus on tekniikka, joka lykkää ei-kriittisten resurssien latausta, kunnes niitä tarvitaan. Kuvien kohdalla se tarkoittaa, että kuvaa ei ladata ennen kuin kävijä vierittää lähelle sitä. Sen sijaan, että selain pyytäisi jokaisen kuvan sivun latautuessa, se pyytää vain kuvat, jotka ovat näkyvissä tai tulossa näkyviin kävijän käyttäessä sivua.
Mitä viivästetty lataus muuttaa latausjaksossa
- Ilman viivästettyä latausta: selain pyytää kaikki kuvat, kun sivu latautuu ensimmäistä kertaa, riippumatta siitä, ovatko ne näkymässä
- Viivästetyn latauksen kanssa: selain pyytää vain kuvat, jotka ovat nykyisessä näkymässä tai sen lähellä. Loput pyydetään kävijän vierittäessä niitä kohti
- Siirretyn datan kokonaismäärä koko sivun vierityksen aikana on sama, mutta alkulataus on huomattavasti kevyempi
- Kävijät, jotka eivät vieritä sivulla tietyn pisteen ohi, eivät koskaan käynnistä sellaisten kuvien latausta, joihin he eivät koskaan pääse
Miten viivästetty lataus toimii teknisesti?
Kuvien viivästetyn latauksen voi toteuttaa kahdella tavalla: selaimen natiivilla attribuutilla ja JavaScript-pohjaisilla ratkaisuilla.
Natiivi viivästetty lataus
- Kaikki merkittävät selaimet tukevat natiivia viivästettyä latausta
loading="lazy"-attribuutilla, joka lisätään suoraan kuvan tagiin - JavaScriptiä tai ulkoisia kirjastoja ei tarvita. Selain hoitaa latauskäyttäytymisen natiivisti
- Tämä on nykyään verkon vakiotapa kuvien viivästettyyn lataukseen, ja sen toteuttaminen vaatii vähän teknistä osaamista
- Selain päättää, milloin kuvan lataus aloitetaan, sen etäisyyden perusteella näkymästä, ja raja vaihtelee hieman selaimien välillä
JavaScript-pohjainen viivästetty lataus
- Ennen kuin natiivi viivästetty lataus oli laajasti tuettu, kehittäjät käyttivät JavaScript-kirjastoja, jotka seurasivat vierityskohtaa ja käynnistivät kuvien lataukset, kun kuvat tulivat näkymään
- Intersection Observer API on JavaScriptin vakiotapa, joka havaitsee, kun elementti tulee näkymään tai poistuu siitä, turvautumatta vieritystapahtumien kuuntelijoihin
- JavaScript-pohjaista viivästettyä latausta käytetään edelleen monimutkaisemmissa tilanteissa, kuten CSS:ssä asetettujen taustakuvien tai videosisällön viivästetyssä lataamisessa
- Tavallisille kuvaelementeille natiivi viivästetty lataus
loading="lazy"-attribuutilla on yksinkertaisempi ja luotettavampi
Mitä muuta kuin kuvia voi ladata viivästetysti?
Iframet
loading="lazy"-attribuutti toimii myös iframeilla kaikissa merkittävissä selaimissa- Iframeihin upotetut kartat, lomakkeet ja kolmannen osapuolen sisältö voi lykätä, kunnes kävijä vierittää niiden luo
- Tämä on erityisen hyödyllistä sivuilla, joiden alaosassa on upotettuja karttoja tai kolmannen osapuolen widgettejä, koska niihin liittyy usein raskaita ulkoisia skriptejä
Video
- Videotiedostot ovat huomattavasti suurempia kuin kuvat ja voivat vaikuttaa merkittävästi alkulatausaikaan, kun ne sijoitetaan näkyvän alueen alapuolelle
- Videon viivästetty lataus vaatii JavaScript-toteutuksen, koska natiivi
loading-attribuutti ei koske video-elementtejä - Yleinen tapa on ladata aluksi vain pienoiskuva tai julistekuva ja aloittaa videotiedoston lataus vasta, kun kävijä on vuorovaikutuksessa sen kanssa tai vierittää sen luo
Komponentit ja osiot
- JavaScript-painotteisissa sovelluksissa kokonaisia sivun osioita tai komponentteja voi ladata viivästetysti, eli niiden koodia ja sisältöä ei haeta ennen kuin kävijä saavuttaa kyseisen sivun osan
- Tämä on edistynyt tekniikka, jota käytetään monimutkaisissa verkkosovelluksissa ja jonka hoitaa tyypillisesti kehys eikä sitä toteuteta käsin
Mitä ei pidä ladata viivästetysti?
Viivästetty lataus parantaa suorituskykyä, kun sitä käytetään oikein, mutta väärään paikkaan käytettynä se aiheuttaa ongelmia sen sijaan, että korjaisi niitä.
Näkyvän alueen kuvat
- Pääkuva, logo tai mikä tahansa näkyvä visuaalinen sisältö, joka näkyy sivun auetessa, täytyy ladata heti
- Viivästetyn latauksen käyttö näkyvän alueen kuviin viivästyttää LCP:tä, mikä heikentää Core Web Vitals -pisteitä ja kävijäkokemusta
- Sääntö on suoraviivainen: kaiken, mikä näkyy ilman vieritystä, pitää latautua heti. Kaiken näkyvän alueen alapuolella olevan voi ladata viivästetysti
Näkyvän alueen rajan lähellä olevat kuvat
- Juuri näkyvän alueen alapuolella olevat kuvat voivat ilmestyä nopeasti, kun kävijä alkaa vierittää. Jos viivästettyä latausta käytetään liian aggressiivisesti, nämä kuvat voivat yhä latautua, kun kävijä saavuttaa ne, jolloin tyhjä paikkamerkki näkyy hetken
- Natiivi viivästetty lataus hoitaa tämän käyttämällä rajaa ja aloittamalla kuvien latauksen ennen kuin ne ovat kokonaan näkymässä sen sijaan, että odotettaisiin viimeiseen hetkeen
Kriittinen sisältö nopeasti latautuvilla sivuilla
- Sivuilla, joilla on hyvin vähän sisältöä ja vain muutama kuva, latausjakso on jo nopea. Viivästetty lataus lisää monimutkaisuutta ilman merkittävää hyötyä näissä tapauksissa
- Viivästetty lataus on arvokkaimmillaan sivuilla, joilla on paljon kuvia tai pitkää vieritettävää sisältöä
Miten viivästetty lataus vaikuttaa Core Web Vitalsiin?
Viivästetyllä latauksella on suora vaikutus kahteen Core Web Vitals -mittariin eikä vaikutusta kolmanteen, kun sitä käytetään oikein.
Largest Contentful Paint (LCP)
- Viivästettyä latausta ei pidä koskaan käyttää elementtiin, joka on todennäköisesti LCP-ehdokas, tyypillisesti pääkuvaan
- Oikein käytettynä viivästetty lataus vähentää alkulatauksen aikana kaistasta kilpailevien resurssien määrää, mikä voi parantaa LCP:tä antamalla näkyvän alueen sisällön latautua nopeammin
- Väärin näkyvän alueen kuviin käytettynä viivästetty lataus heikentää LCP:tä suoraan viivyttämällä suurinta näkyvää elementtiä
Interaction to Next Paint (INP)
- Alussa ladattavien kuvien määrän vähentäminen tarkoittaa vähemmän verkkoliikennettä, joka kilpailee JavaScriptin suorituksen kanssa kriittisen latausikkunan aikana
- Tämä voi epäsuorasti vähentää pääsäikeen estoa ja parantaa INP-pisteitä sivuilla, jotka latasivat aiemmin monta kuvaa samanaikaisesti
Cumulative Layout Shift (CLS)
- Viivästetty lataus ei vaikuta CLS:ään suoraan, mutta viivästetysti ladatut kuvat ilman määriteltyjä leveys- ja korkeusattribuutteja voivat aiheuttaa asettelun siirtymiä latautuessaan
- Aseta viivästetysti ladatuille kuville aina nimenomaiset mitat, jotta selain varaa oikean tilan ennen kuvan latautumista
Täydellisen erittelyn siitä, miten LCP, INP ja CLS pisteytetään ja mitkä rajat ovat, löydät artikkelista mitä Core Web Vitals on.
Vaikuttaako viivästetty lataus hakukoneoptimointiin?
Oikein toteutettuna viivästetty lataus ei vahingoita hakukoneoptimointia ja voi edistää parempaa hakusuorituskykyä parantuneiden sivunopeuspisteiden kautta.
Miten hakukoneet käsittelevät viivästetysti ladattua sisältöä
- Hakukoneiden robotit _blocked_öivät sivut samankaltaisesti kuin selaimet ja voivat indeksoida viivästetysti ladattua sisältöä
- Viivästetysti ladatut kuvat ovat edelleen läpikäytävissä ja voivat näkyä kuvahaun tuloksissa
- Hakukoneoptimoinnin hyöty tulee ensisijaisesti nopeusparannuksista, jotka viivästetty lataus mahdollistaa. Sivuilla, joilla on paremmat Core Web Vitals -pisteet, joita viivästetty lataus voi auttaa parantamaan, on sijoitusetu
Alt-teksti koskee edelleen
- Viivästetysti ladattuihin kuviin tarvitaan sama alt-teksti kuin mihin tahansa muuhun kuvaan. Alt-attribuutti pitäisi täyttää kuvan kuvauksella riippumatta siitä, ladataanko se viivästetysti
- Ohjeita tehokkaan alt-tekstin kirjoittamiseen löydät artikkelista miten käytät kuvia verkkosivustollasi
Miten lisäät viivästetyn latauksen verkkosivustollesi?
Yksittäisille kuville HTML:ssä
- Lisää
loading="lazy"jokaiseen kuvan tagiin, joka on näkyvän alueen alapuolella - Varmista, että jokaisella viivästetysti ladatulla kuvalla on nimenomaiset
width- jaheight-attribuutit asettelun siirtymien estämiseksi kuvien latautuessa - Älä lisää
loading="lazy"pääkuvaan tai mihinkään kuvaan, joka näkyy ilman vieritystä
Verkkosivustoalustasi kautta
- Monet verkkosivustorakentimet käyttävät viivästettyä latausta automaattisesti näkyvän alueen alapuolisiin kuviin ilman manuaalista toteutusta
- Tarkista alustasi suorituskykydokumentaatiosta, hoidetaanko tämä automaattisesti, ennen kuin lisäät sen käsin
Täydellisen oppaan kuvien optimointiin viivästetyn latauksen lisäksi, mukaan lukien tiedostomuodot, pakkaus ja responsiivinen mitoitus, löydät artikkelista miten optimoit kuvat nopeampaa latausta varten.
Näin WEMASY hoitaa viivästetyn latauksen
WEMASYn Sivustonrakentaja käyttää viivästettyä latausta automaattisesti näkyvän alueen alapuolisiin kuviin kaikilla sivuilla. Näkyvän alueen kuvat, mukaan lukien pääkuvat ja kaikki ilman vieritystä näkyvä sisältö, jätetään viivästetyn latauksen ulkopuolelle, jotta ne _blocked_öidään heti. Kuvat tarjotaan myös oletuksena määritellyin mitoin, mikä estää asettelun siirtymät, kun viivästetysti ladatut kuvat latautuvat paikoilleen.
Viivästetty lataus toimii yhdessä kuvien pakkauksen ja CDN-toimituksen kanssa jokaisessa WEMASY-tilauksessa. Nämä kolme parannusta yhdessä vähentävät sekä sivun alkupainoa että kuvien toimitusaikaa, mikä edistää suoraan nopeampaa LCP:tä ja parempia Core Web Vitals -pisteitä analytiikkanäkymässä.
Katso, mitä kuuluu mukaan, sivulta WEMASYn Sivustonrakentaja tai tutustu tilausvaihtoehtoihin hinnoittelusivulla.
Usein kysytyt kysymykset
Mitä viivästetty lataus on?
Viivästetty lataus on tekniikka, joka lykkää kuvien ja muiden resurssien latausta, kunnes kävijä on lähellä niiden näkemistä. Sen sijaan, että selain lataisi jokaisen sivun kuvan sivun auetessa, se lataa vain kuvat, jotka ovat näkyvissä tai näkymän lähellä. Sivulla alempana olevat kuvat ladataan kävijän vierittäessä niitä kohti. Tämä vähentää alussa ladattavan datan määrää ja antaa näkyvän sisällön latautua nopeammin. WEMASYn Sivustonrakentajalla voit ottaa tämän käyttöön suoraan omalla sivustollasi.
Haittaako viivästetty lataus hakukoneoptimointia?
Ei. Oikein toteutettuna viivästetty lataus ei vahingoita hakukoneoptimointia. Hakukoneiden robotit voivat indeksoida viivästetysti ladattuja kuvia ja sisältöä. Vaikutus hakukoneoptimointiin on yleensä myönteinen, koska viivästetty lataus parantaa sivun nopeusmittareita, joita hakukoneet käyttävät sijoitussignaaleina. Keskeinen vaatimus on, ettei viivästettyä latausta käytetä näkyvän alueen sisältöön, mikä viivästyttäisi Largest Contentful Paintia ja heikentäisi Core Web Vitals -pisteitä.
Pitäisikö kaikki sivun kuvat ladata viivästetysti?
Ei. Kuvat, jotka näkyvät sivun auetessa eli näkyvän alueen yläpuolella, pitää ladata heti. Viivästetyn latauksen käyttö näihin kuviin viivästyttää Largest Contentful Paint -pisteitä, mikä heikentää Core Web Vitalsia ja kävijäkokemusta. Vain näkyvän alueen alapuoliset kuvat hyötyvät viivästetystä latauksesta. Käytännössä tämä tarkoittaa yleensä, ettei pääkuvaan ja sivun yläosan näkyvään sisältöön pidä koskaan lisätä viivästetyn latauksen attribuuttia.
Miten lisään viivästetyn latauksen kuviin?
Tavallisille kuvaelementeille lisää attribuutti loading="lazy" suoraan kuvan tagiin. Kaikki merkittävät selaimet tukevat tätä natiivisti ilman JavaScript-kirjastoa. Varmista, että jokaiselle viivästetysti ladatulle kuvalle on asetettu myös nimenomaiset width- ja height-attribuutit, jotta selain varaa oikean tilan ennen kuvan latautumista ja vältät asettelun siirtymät. Älä lisää viivästettyä latausta pääkuvaan tai mihinkään ilman vieritystä näkyvään kuvaan.
Toimiiko viivästetty lataus mobiilissa?
Kyllä. Natiivia viivästettyä latausta loading="lazy"-attribuutilla tukevat kaikki merkittävät mobiiliselaimet. Se on erityisen hyödyllinen mobiilissa, koska mobiiliyhteydet ovat hitaampia ja vaihtelevampia kuin tietokoneen yhteydet, mikä tekee alkusivupainon vähentämisestä vaikuttavampaa. Mobiilikävijät, jotka eivät vieritä sivun koko pituutta, hyötyvät myös siitä, ettei heidän tarvitse ladata kuvia, joihin he eivät koskaan pääse.
Mitä eroa on viivästetyllä latauksella ja esilatauksella?
Viivästetty lataus lykkää resurssien latausta, kunnes niitä tarvitaan. Esilataus tekee päinvastoin: se kehottaa selainta lataamaan tietyn resurssin mahdollisimman aikaisin, ennen kuin se normaalisti kohdattaisiin latausjaksossa. Esilatausta käytetään kriittisille resursseille, kuten pääkuvalle tai keskeisille fonteille, jotta ne latautuvat mahdollisimman nopeasti. Nämä kaksi tekniikkaa täydentävät toisiaan: esilataa kriittiset näkyvän alueen resurssit ja lataa kaikki näkyvän alueen alapuolinen viivästetysti.