CSS Lazy Rule: Piltide ja Iframe'ide laisa laadimise kasutamine veebilehe jõudluse optimeerimiseks

Pidevalt arenevas veebiarenduse maailmas on veebisaidi jõudluse optimeerimine ülimalt tähtis. Aeglaselt laadiv veebisait võib põhjustada pettunud kasutajaid, kõrgemat põrkemäära ja lõppkokkuvõttes negatiivset mõju teie otsingumootori järjestusele. Üks võimas tehnika jõudluse suurendamiseks on laisk laadimine. See juhend uurib, kuidas rakendada piltide ja iframe'ide jaoks laisa laadimist CSS-i abil, pakkudes praktilisi näiteid ja parimaid praktikaid ülemaailmsele publikule.

Mis on laisk laadimine?

Laisk laadimine on tehnika, mis lükkab ressursside (nagu pildid ja iframe'id) laadimise edasi, kuni neid vajatakse. Teisisõnu, selle asemel, et laadida kõik ressursid veebilehel, kui leht esmakordselt laaditakse, laaditakse ainult need ressursid, mis on kasutaja vaateväljas nähtavad. Kui kasutaja lehte allapoole kerib, laaditakse nõudmisel täiendavaid ressursse. See lähenemisviis võib oluliselt vähendada lehe esialgset laadimisaega, parandada kasutajakogemust ja säästa ribalaiust.

Laisa laadimise eelised

• Paranenud lehe laadimisaeg: Laadides esialgu ainult nähtavaid ressursse, väheneb lehe esialgne laadimisaeg, mis viib kiirema veebisaidi kogemuseni.
• Vähendatud ribalaiuse tarbimine: Laisk laadimine hoiab ära ressursside tarbetu allalaadimise, mida kasutaja isegi ei pruugi näha, säästes ribalaiust nii veebisaidile kui ka kasutajale. See on eriti oluline piiratud andmepakettidega kasutajatele.
• Täiustatud kasutajakogemus: Kiiremad lehe laadimisajad ja sujuvam kerimine aitavad kaasa paremale üldisele kasutajakogemusele. Kasutajad lahkuvad vähem tõenäoliselt veebisaidilt, mis laaditakse kiiresti.
• Paranenud SEO: Otsingumootorid eelistavad kiirema laadimisajaga veebisaite. Laisk laadimine võib aidata parandada teie veebisaidi SEO järjestust.
• Madalamad serverikulud: Vähendatud ribalaiuse tarbimine võib viia madalamate serverikuludeni, eriti veebisaitide puhul, millel on suur hulk pilte ja iframe'e.
• Parem ressursside kasutamine: Laisk laadimine optimeerib ressursside kasutamist, laadides neid ainult siis, kui neid vajatakse.

CSS Laisk laadimine: Kaasaegne lähenemisviis

Kaasaegsed brauserid toetavad nüüd HTML-is natiivset laisa laadimist, kasutades loading atribuuti. Seda atribuuti saab rakendada <img> ja <iframe> elementidele, muutes laisa laadimise rakendamise uskumatult lihtsaks, ilma et peaksite tuginema JavaScriptile.

Atribuut loading

Atribuut loading aktsepteerib kolme väärtust:

• lazy: Näitab, et brauser peaks lükkama ressursi laadimise edasi, kuni see on vaatevälja lähedal.
• eager: Näitab, et brauser peaks ressursi kohe laadima, olenemata selle positsioonist vaateväljas. See on vaikekäitumine.
• auto: Laseb brauseril otsustada, kas laadida laisalt või mitte. Brauser käitub tavaliselt nii, nagu oleks määratud `lazy`.

Piltide laisa laadimise rakendamine

Pildi laisalt laadimiseks lisage lihtsalt atribuut loading="lazy" sildile <img>:

            <img src="image.jpg" alt="Pildi kirjeldus" loading="lazy">
            

              
                Copy
              
            
          

Näide:

            <img src="images/london-eye.jpg" alt="London Eye" loading="lazy">
<img src="images/eiffel-tower.jpg" alt="Eiffeli torn" loading="lazy">
<img src="images/great-wall.jpg" alt="Hiina müür" loading="lazy">
            

              
                Copy
              
            
          

Selles näites laaditakse London Eye, Eiffeli torni ja Hiina müüri pilte ainult siis, kui need on kasutaja vaateväljas nähtavaks muutumas.

Iframe'ide laisa laadimise rakendamine

Sarnaselt saate iframe'e laisalt laadida, lisades atribuudi loading="lazy" sildile <iframe>:

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

              
                Copy
              
            
          

Näide:

            <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
              
            
          

See hoiab ära YouTube'i video ja Google Mapsi iframe'i laadimise, kuni need on vaatevälja lähedal, parandades lehe esialgset laadimisaega.

Täiustatud CSS-i tehnikad laisa laadimise jaoks

Kuigi atribuut loading on lihtsaim viis laisa laadimise rakendamiseks, saate kasutajakogemust veelgi täiustada, kasutades CSS-i kohatäidete ja visuaalsete vihjete pakkumiseks.

Kohatäite pildid

Selle asemel, et kuvada pildi laadimise ajal tühja ruumi, saate kasutada kohatäite pilti. See võib olla tegeliku pildi madala eraldusvõimega versioon või üldine kohatäitegraafika.

Näide:

            <img src="placeholder.jpg" data-src="image.jpg" alt="Pildi kirjeldus" loading="lazy">
            

              
                Copy
              
            
          

Sel juhul sisaldab atribuut src kohatäite pildi URL-i, samas kui atribuut data-src sisaldab tegeliku pildi URL-i. JavaScripti (või polütäidiseid) saab kasutada atribuudi `src` asendamiseks atribuudi `data-src` väärtusega, kui pilt on vaateväljas.

CSS-i üleminekud

Pildi laadimisel saate luua sujuva sissefadeerimise efekti, kasutades CSS-i üleminekuid. See võib parandada visuaalset atraktiivsust ja muuta laisa laadimise protsessi kasutaja jaoks vähem häirivaks.

Näide:

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

img[loading="lazy"] {
   opacity: 1; /* Või mis iganes peaks olema lõplik läbipaistmatus */
}

            

              
                Copy
              
            
          

See CSS-i kood määrab kõigi piltide esialgseks läbipaistmatuseks 0 ja seejärel muudab läbipaistmatuse 1-ks, kui pildil on atribuut loading="lazy". See aga nõuab JavaScripti või polütäidiseid, et see õigesti töötaks.

Brauseri tugi ja polütäidised

Atribuuti loading toetavad enamik kaasaegseid brausereid. Vanemad brauserid ei pruugi seda aga toetada. Tagamaks, et laisk laadimine töötab kõigis brauserites, saate kasutada polütäidist. Polütäidis on JavaScripti kood, mis pakub uuema funktsiooni funktsionaalsust vanemates brauserites.

Intersection Observer API

Intersection Observer API on võimas JavaScripti API, mis võimaldab teil tuvastada, kui element siseneb või väljub vaateväljast. Seda API-t saab kasutada laisa laadimise rakendamiseks brauserites, mis ei toeta atribuuti loading.

Näide (lihtsustatud):

            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
              
            
          

See kood loob Intersection Observeri, mis jälgib kõiki pilte, millel on atribuut loading="lazy". Kui pilt siseneb vaatevälja, asendab vaatleja atribuudi src atribuudi data-src väärtusega, käivitades pildi laadimise. Seejärel lõpetab vaatleja pildi jälgimise.

Laisa laadimise parimad praktikad

• Prioriseerige esmalt nähtav sisu: Veenduge, et sisu, mis on esialgses vaateväljas nähtav, laaditakse kohe. Laiska laadimist tuleks kasutada peamiselt esmalt nähtava sisu all oleva sisu jaoks.
• Kasutage sobivaid kohatäiteid: Valige kohatäite pildid, mis on kerged ja visuaalselt atraktiivsed. Vältige suurte või keerukate kohatäidete kasutamist, mis võivad laisa laadimise eeliseid eitada.
• Arvestage kasutajakogemusega: Olge teadlik kasutajakogemusest. Kasutage CSS-i üleminekuid, et luua sujuvaid sissefadeerimise efekte ja vältida ootamatuid nihkeid paigutuses, kui pildid laaditakse.
• Testige põhjalikult: Testige oma laisa laadimise rakendust erinevates brauserites ja seadmetes, et tagada selle õige toimimine ja et see ei tekita ootamatuid probleeme.
• Jälgige jõudlust: Kasutage veebi jõudluse tööriistu, et jälgida laisa laadimise mõju teie veebisaidi laadimisajale ja üldisele jõudlusele.
• Käsitsege vigu graatsiliselt: Rakendage veakäsitlust, et graatsiliselt käsitleda juhtumeid, kus piltide laadimine ebaõnnestub. Kuvage kasutajale varupilt või teade.
• Ligipääsetavuse kaalutlused: Veenduge, et teie laisa laadimise rakendus oleks ligipääsetav puuetega kasutajatele. Esitage piltide jaoks alternatiivtekst ja kasutage ARIA atribuute, et edastada elementide laadimisolekut.
• Vältige liigset laiska laadimist: Kuigi laisk laadimine võib parandada jõudlust, võib liigne laisk laadimine negatiivselt mõjutada kasutajakogemust. Laadige kriitilised ressursid kohe, et tagada veebisaidi reageerimisvõime ja interaktiivsus.

Levinud lõkse, mida vältida

• Esmalt nähtava sisu laisk laadimine: See võib viivitada kriitilise sisu laadimisega ja negatiivselt mõjutada kasutajakogemust.
• Suurte kohatäite piltide kasutamine: See võib eitada laisa laadimise jõudluse eeliseid.
• Brauseri ühilduvuse ignoreerimine: Veenduge, et teie laisa laadimise rakendus töötaks erinevates brauserites ja seadmetes.
• Põhjaliku testimise ebaõnnestumine: Testige oma rakendust, et tuvastada ja parandada potentsiaalsed probleemid.
• Jõudluse mittejälgimine: Jälgige laisa laadimise mõju teie veebisaidi jõudlusele.

Laisk laadimine ja SEO

Laisk laadimine, kui seda õigesti rakendada, võib avaldada positiivset mõju SEO-le. Parandades lehe laadimisaega, võib see kaudselt parandada teie veebisaidi järjestust otsingumootori tulemustes. Siiski on oluline tagada, et otsingumootori roomikud saaksid ikka teie piltidele juurde pääseda ja neid indekseerida. Sildi <noscript> kasutamine aitab tagada, et otsingumootorid saavad pilte tuvastada isegi siis, kui JavaScript on keelatud.

Näide:

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

              
                Copy
              
            
          

Silt <noscript> pakub varuvõimalust brauseritele, mis ei toeta JavaScripti või millel on JavaScript keelatud. Sel juhul kuvatakse sildi <noscript> sees olev silt <img> laisalt laaditud pildi asemel.

Järeldus

Laisk laadimine on võimas tehnika veebisaidi jõudluse optimeerimiseks ja kasutajakogemuse parandamiseks. Lükates edasi mittekriitiliste ressursside laadimist, saate oluliselt vähendada lehe esialgset laadimisaega, säästa ribalaiust ja parandada oma veebisaidi SEO järjestust. Atribuudi loading tulekuga on laisa laadimise rakendamine muutunud lihtsamaks kui kunagi varem. Järgides selles juhendis kirjeldatud parimaid praktikaid, saate oma veebisaidil tõhusalt laisa laadimise rakendada ja selle arvukalt eeliseid kasutada.

Ärge unustage prioriseerida esmalt nähtavat sisu, kasutage sobivaid kohatäiteid, testige põhjalikult ja jälgige jõudlust, et tagada, et teie laisa laadimise rakendus pakub teie kasutajatele parimaid võimalikke tulemusi, olenemata sellest, kus nad maailmas asuvad.