CSS Lazy Rule: Viivästetty lataus kuvia ja iframejä varten optimoidun verkkosuorituskyvyn saavuttamiseksi

Verkkokehityksen jatkuvasti kehittyvässä maisemassa verkkosivuston suorituskyvyn optimointi on ensiarvoisen tärkeää. Hitaasti latautuva verkkosivusto voi johtaa turhautuneisiin käyttäjiin, korkeampiin poistumisprosentteihin ja lopulta negatiiviseen vaikutukseen hakukonesijoitukseesi. Yksi tehokas tekniikka suorituskyvyn parantamiseksi on viivästetty lataus (lazy loading). Tämä opas tutkii, kuinka toteuttaa viivästetty lataus kuvia ja iframejä varten CSS:n avulla, tarjoten käytännön esimerkkejä ja parhaita käytäntöjä maailmanlaajuiselle yleisölle.

Mikä on viivästetty lataus?

Viivästetty lataus on tekniikka, joka lykkää resurssien (kuten kuvat ja iframet) lataamista, kunnes niitä tarvitaan. Toisin sanoen, sen sijaan, että kaikki verkkosivun resurssit ladattaisiin sivun alkuperäisen latauksen yhteydessä, ladataan vain käyttäjän näkymässä näkyvät resurssit. Kun käyttäjä vierittää sivua alaspäin, lisää resursseja ladataan tarpeen mukaan. Tämä lähestymistapa voi merkittävästi lyhentää sivun alkuperäistä latausaikaa, parantaa käyttökokemusta ja säästää kaistanleveyttä.

Viivästetyn latauksen edut

• Parannettu sivun latausaika: Lataamalla vain alun perin näkyvät resurssit, sivun alkuperäinen latausaika lyhenee, mikä johtaa nopeampaan verkkosivukokemukseen.
• Vähentynyt kaistanleveyden kulutus: Viivästetty lataus estää tarpeettomien resurssien lataamisen, joita käyttäjä ei ehkä edes näe, säästäen kaistanleveyttä sekä verkkosivustolle että käyttäjälle. Tämä on erityisen tärkeää käyttäjille, joilla on rajalliset datapaketit.
• Parannettu käyttökokemus: Nopeammat sivun latausajat ja sujuvampi vieritys edistävät parempaa yleistä käyttökokemusta. Käyttäjät hylkäävät todennäköisemmin verkkosivuston, joka latautuu nopeasti.
• Parannettu SEO: Hakukoneet suosivat nopeammin latautuvia verkkosivustoja. Viivästetty lataus voi auttaa parantamaan verkkosivustosi SEO-sijoitusta.
• Matalammat palvelinkustannukset: Vähentynyt kaistanleveyden kulutus voi johtaa matalampiin palvelinkustannuksiin, erityisesti verkkosivustoilla, joilla on suuri määrä kuvia ja iframejä.
• Parempi resurssien käyttö: Viivästetty lataus optimoi resurssien käytön lataamalla ne vain silloin, kun niitä tarvitaan.

CSS Viivästetty lataus: Nykyaikainen lähestymistapa

Nykyaikaiset selaimet tukevat nyt natiivia viivästettyä latausta käyttämällä HTML:n loading-attribuuttia. Tätä attribuuttia voidaan käyttää <img>- ja <iframe>-elementeissä, mikä tekee viivästetyn latauksen toteuttamisesta uskomattoman yksinkertaista ilman JavaScriptiä.

loading-attribuutti

loading-attribuutti hyväksyy kolme arvoa:

• lazy: Osoittaa, että selaimen tulee lykätä resurssin lataamista, kunnes se on lähellä näkymää.
• eager: Osoittaa, että selaimen tulee ladata resurssi välittömästi, riippumatta sen sijainnista näkymässä. Tämä on oletustoiminto.
• auto: Antaa selaimen päättää, lataako se viivästetysti vai ei. Selain toimii tyypillisesti ikään kuin `lazy` olisi määritetty.

Viivästetyn latauksen toteuttaminen kuville

Ladataksesi kuvan viivästetysti, lisää vain loading="lazy"-attribuutti <img>-tagiin:

            <img src="image.jpg" alt="Kuvan kuvaus" loading="lazy">
            

              
                Copy
              
            
          

Esimerkki:

            <img src="images/london-eye.jpg" alt="The London Eye" loading="lazy">
<img src="images/eiffel-tower.jpg" alt="The Eiffel Tower" loading="lazy">
<img src="images/great-wall.jpg" alt="The Great Wall of China" loading="lazy">
            

              
                Copy
              
            
          

Tässä esimerkissä London Eyen, Eiffel-tornin ja Kiinan muurin kuvat ladataan vasta, kun ne ovat tulossa näkyviin käyttäjän näkymässä.

Viivästetyn latauksen toteuttaminen iframeille

Samoin voit viivästetysti ladata iframejä lisäämällä loading="lazy"-attribuutin <iframe>-tagiin:

            <iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>
            

              
                Copy
              
            
          

Esimerkki:

            <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" loading="lazy"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.9554733630316!2d-0.1269456842202068!3d51.50735097964078!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604ce1854c4f1%3A0x6f72d6a9740a5af!2sBuckingham%20Palace!5e0!3m2!1sen!2suk!4v1684752824355!5m2!1sen!2suk" loading="lazy"></iframe>
            

              
                Copy
              
            
          

Tämä estää YouTube-videon ja Google Maps -iframen latautumisen, ennen kuin ne ovat lähellä näkymää, parantaen sivun alkuperäistä latausaikaa.

Edistyneet CSS-tekniikat viivästettyyn lataukseen

Vaikka loading-attribuutti on yksinkertaisin tapa toteuttaa viivästetty lataus, voit parantaa kokemusta edelleen käyttämällä CSS:ää paikkamerkkien ja visuaalisten vihjeiden tarjoamiseksi.

Paikkamerkkikuvat

Sen sijaan, että näytät tyhjän tilan kuvan latautuessa, voit käyttää paikkamerkkikuvaa. Tämä voi olla todellisen kuvan matalaresoluutioinen versio tai yleinen paikkamerkkigrafiikka.

Esimerkki:

            <img src="placeholder.jpg" data-src="image.jpg" alt="Kuvan kuvaus" loading="lazy">
            

              
                Copy
              
            
          

Tässä tapauksessa src-attribuutti sisältää paikkamerkkikuvan URL-osoitteen, kun taas data-src-attribuutti sisältää todellisen kuvan URL-osoitteen. JavaScriptiä (tai polyfilliä) voidaan käyttää korvaamaan `src` `data-src`-arvolla, kun kuva on tulossa näkyviin.

CSS-siirtymät

Voit käyttää CSS-siirtymiä luodaksesi sulavan häivytysefektin kuvan latautuessa. Tämä voi parantaa visuaalista ilmettä ja tehdä viivästetyn latauksen prosessista vähemmän häiritsevän käyttäjälle.

Esimerkki:

            img {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

img[loading="lazy"] {
   opacity: 1; /* Tai mikä tahansa lopullinen opasiteetti olisikaan */
}

            

              
                Copy
              
            
          

Tämä CSS-koodi asettaa kaikkien kuvien alkunopeudeksi 0 ja siirtää sitten nopeuden 1:ksi, kun kuvalla on `loading="lazy"`-attribuutti. Tämä vaatii kuitenkin JavaScriptin tai polyfillin toimiakseen oikein.

Selaintuki ja Polyfillit

loading-attribuutti on tuettu useimmissa nykyaikaisissa selaimissa. Vanhemmat selaimet eivät kuitenkaan välttämättä tue sitä. Varmistaaksesi, että viivästetty lataus toimii kaikissa selaimissa, voit käyttää polyfilliä. Polyfill on JavaScript-koodinpätkä, joka tarjoaa uudemman ominaisuuden toiminnallisuuden vanhemmissa selaimissa.

Intersection Observer API

Intersection Observer API on tehokas JavaScript API, joka antaa sinun havaita, milloin elementti tulee näkymään tai poistuu sieltä. Tätä APIa voidaan käyttää viivästetyn latauksen toteuttamiseen selaimissa, jotka eivät tue loading-attribuuttia.

Esimerkki (yksinkertaistettu):

            const images = document.querySelectorAll('img[loading="lazy"]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

images.forEach((img) => {
  observer.observe(img);
});
            

              
                Copy
              
            
          

Tämä koodi luo Intersection Observerin, joka valvoo kaikkia kuvia, joilla on loading="lazy"-attribuutti. Kun kuva tulee näkymään, observer korvaa `src`-attribuutin `data-src`-attribuutin arvolla, mikä käynnistää kuvan lataamisen. Observer lopettaa sitten kuvan valvomisen.

Parhaat käytännöt viivästettyyn lataukseen

• Priorisoi ensimmäisen näkymän sisältö: Varmista, että sisältö, joka on näkyvissä alkuperäisessä näkymässä, ladataan nopeasti. Viivästettyä latausta tulisi käyttää ensisijaisesti alle näkymässä olevan sisällön lataamiseen.
• Käytä asianmukaisia paikkamerkkejä: Valitse paikkamerkkikuvat, jotka ovat kevyitä ja visuaalisesti miellyttäviä. Vältä suuria tai monimutkaisia paikkamerkkejä, jotka voivat kumota viivästetyn latauksen edut.
• Harkitse käyttökokemusta: Huomioi käyttökokemus. Käytä CSS-siirtymiä luodaksesi sulavia häivytysefektejä ja vältä äkillisiä asettelumuutoksia kuvien latautuessa.
• Testaa perusteellisesti: Testaa viivästettyä lataustasi eri selaimilla ja laitteilla varmistaaksesi, että se toimii oikein eikä aiheuta odottamattomia ongelmia.
• Seuraa suorituskykyä: Käytä verkkosuorituskykytyökaluja seurataksesi viivästetyn latauksen vaikutusta verkkosivustosi latausaikaan ja yleiseen suorituskykyyn.
• Käsittele virheet siististi: Toteuta virheidenkäsittely tapauksissa, joissa kuvat eivät lataudu. Näytä käyttäjälle varakuvake tai viesti.
• Saavutettavuusnäkökohdat: Varmista, että viivästetty latauksesi on saavutettava vammaisille käyttäjille. Anna vaihtoehtoinen teksti kuville ja käytä ARIA-attribuutteja elementtien lataustilan välittämiseen.
• Vältä liiallista viivästettyä latausta: Vaikka viivästetty lataus voi parantaa suorituskykyä, liiallinen viivästetty lataus voi vaikuttaa negatiivisesti käyttökokemukseen. Lataa kriittiset resurssit nopeasti varmistaaksesi, että verkkosivusto pysyy reagoivana ja interaktiivisena.

Yleisiä sudenkuoppia, joita kannattaa välttää

• Ensimmäisen näkymän sisällön viivästetty lataus: Tämä voi viivästyttää kriittisen sisällön lataamista ja vaikuttaa negatiivisesti käyttökokemukseen.
• Suurten paikkamerkkikuvien käyttö: Tämä voi mitätöidä viivästetyn latauksen suorituskykyedut.
• Selaimen yhteensopivuuden laiminlyönti: Varmista, että viivästetty latauksesi toimii eri selaimilla ja laitteilla.
• Perusteellisen testauksen laiminlyönti: Testaa toteutusta mahdollisten ongelmien tunnistamiseksi ja korjaamiseksi.
• Suorituskyvyn seurannan laiminlyönti: Seuraa viivästetyn latauksen vaikutusta verkkosivustosi suorituskykyyn.

Viivästetty lataus ja SEO

Viivästetty lataus, kun se toteutetaan oikein, voi vaikuttaa positiivisesti SEO:hon. Parantamalla sivun latausaikaa se voi epäsuorasti parantaa verkkosivustosi sijoitusta hakukoneiden tuloksissa. On kuitenkin tärkeää varmistaa, että hakukoneiden indeksoijat voivat silti käyttää ja indeksoida kuviasi. <noscript>-tagin käyttö voi auttaa varmistamaan, että hakukoneet löytävät kuvat, vaikka JavaScript olisi poistettu käytöstä.

Esimerkki:

            <img data-src="image.jpg" alt="Kuvan kuvaus" loading="lazy">
<noscript><img src="image.jpg" alt="Kuvan kuvaus"></noscript>
            

              
                Copy
              
            
          

<noscript>-tagi tarjoaa vararatkaisun selaimille, jotka eivät tue JavaScriptiä tai joissa JavaScript on poistettu käytöstä. Tässä tapauksessa <noscript>-tagin sisällä oleva <img>-tagi näytetään viivästetysti ladatun kuvan sijaan.

Yhteenveto

Viivästetty lataus on tehokas tekniikka verkkosivuston suorituskyvyn optimointiin ja käyttökokemuksen parantamiseen. Lykkäämällä ei-kriittisten resurssien lataamista voit merkittävästi lyhentää sivun alkuperäistä latausaikaa, säästää kaistanleveyttä ja parantaa verkkosivustosi SEO-sijoitusta. loading-attribuutin käyttöönoton myötä viivästetyn latauksen toteuttamisesta on tullut helpompaa kuin koskaan. Noudattamalla tämän oppaan parhaita käytäntöjä voit tehokkaasti toteuttaa viivästetyn latauksen verkkosivustollasi ja hyötyä sen lukuisista eduista.

Muista priorisoida ensimmäisen näkymän sisältö, käyttää asianmukaisia paikkamerkkejä, testata perusteellisesti ja seurata suorituskykyä varmistaaksesi, että viivästetty latauksesi tuottaa parhaat mahdolliset tulokset käyttäjillesi missä tahansa he maailmassa ovatkaan.