Viitlaadimine: Veebi jõudluse optimeerimine piltide ja komponentidega

Tänapäeva digitaalses maailmas on veebilehe jõudlus ülioluline. Kasutajad ootavad kiireid ja reageerivaid kogemusi ning otsingumootorid eelistavad veebisaite, mis seda pakuvad. Üks oluline tehnika jõudluse parandamiseks on viitlaadimine. See artikkel pakub põhjalikku juhendit piltide ja komponentide viitlaadimiseks, aidates teil optimeerida oma veebisaiti globaalsele sihtrühmale.

Mis on viitlaadimine?

Viitlaadimine on tehnika, mis lükkab ressursside (pildid, iframe'id, komponendid jne) laadimise edasi, kuni neid tegelikult vaja läheb – tavaliselt siis, kui need on sisenemas vaateaknasse. See tähendab, et selle asemel, et laadida kõik varad kohe alguses, laadib brauser esmasel lehe laadimisel ainult need ressursid, mis on kasutajale nähtavad. Kui kasutaja lehekülge allapoole kerib, laaditakse juurde rohkem ressursse, kui need nähtavale ilmuvad.

Mõelge sellest nii: kujutage ette, et pakite reisi jaoks. Selle asemel, et kogu oma garderoobi algusest peale kaasa vedada, pakite ainult need riided, mida teate, et vajate kohe. Reisi edenedes pakite lahti täiendavaid esemeid, kui neid vajate. Põhimõtteliselt nii töötab viitlaadimine veebisaitide puhul.

Miks kasutada viitlaadimist?

Viitlaadimine pakub mitmeid olulisi eeliseid:

• Parem esmane lehe laadimisaeg: Väljaspool ekraani olevate ressursside laadimise edasilükkamisega saab brauser keskenduda selle sisu laadimisele, mis on kasutajale kohe nähtav. See toob kaasa kiirema esmase lehe laadimisaja, parandades kasutaja esmamuljet ja vähendades põrkemäära.
• Vähenenud andmemahu tarbimine: Kasutajad laadivad alla ainult need ressursid, mida nad tegelikult näevad, vähendades andmemahu tarbimist, eriti mobiilseadmete kasutajate või piiratud andmemahuga pakettide puhul. See on eriti oluline kasutajatele piirkondades, kus on aeglasem internetiühendus või kallid andmesidepaketid.
• Madalam serveri koormus: Serveerides vähem esialgseid päringuid, kogeb server madalamat koormust, mis võib parandada veebisaidi üldist jõudlust ja skaleeritavust.
• Parem kasutajakogemus: Kiirem veebisait pakub paremat kasutajakogemust, mis toob kaasa suurema kaasatuse, konversioonide arvu ja kliendirahulolu.
• Parem SEO: Otsingumootorid nagu Google arvestavad lehe laadimiskiirust järjestusfaktorina. Viitlaadimine võib aidata parandada teie veebisaidi SEO jõudlust.

Piltide viitlaadimine

Pildid on sageli veebisaidi suurimad varad, mis teeb neist peamised kandidaadid viitlaadimiseks. Siin on, kuidas piltide viitlaadimist rakendada:

Natiivne viitlaadimine

Tänapäevased brauserid (Chrome, Firefox, Safari ja Edge) toetavad nüüd natiivset viitlaadimist, kasutades loading atribuuti. See on lihtsaim ja tõhusaim viis piltide viitlaadimiseks.

Natiivse viitlaadimise lubamiseks lisage lihtsalt loading="lazy" atribuut oma <img> sildile:

            <img src="image.jpg" alt="My Image" loading="lazy">
            

              
                Copy
              
            
          

loading atribuudil võib olla kolm väärtust:

• lazy: Lükka pildi laadimine edasi, kuni see on sisenemas vaateaknasse.
• eager: Laadi pilt kohe, olenemata selle asukohast lehel. (See on vaikimisi käitumine, kui atribuut puudub.)
• auto: Lase brauseril otsustada, kas pilti viitlaadida.

Näide:

            <img src="london_bridge.jpg" alt="London Bridge" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Skyline" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">
            

              
                Copy
              
            
          

Selles näites laaditakse Londoni silla, Tokyo silueti ja Rio de Janeiro pildid alles siis, kui kasutaja nendeni kerib. See on äärmiselt kasulik, eriti kui kasutaja ei keri lehe kõige alumisse ossa.

Viitlaadimine JavaScriptiga

Vanemate brauserite jaoks, mis ei toeta natiivset viitlaadimist, saate kasutada JavaScripti teeke või kirjutada oma kohandatud skripti. Siin on põhiline näide, kasutades Intersection Observer API-d:

            const images = document.querySelectorAll('img[data-src]');

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

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

              
                Copy
              
            
          

Selgitus:

1. Valime kõik <img> elemendid, millel on data-src atribuut.
2. Loome uue IntersectionObserver instantsi. Tagasikutse funktsioon käivitatakse, kui jälgitav element siseneb vaateaknasse või väljub sellest.
3. Tagasikutse funktsiooni sees itereerime üle entries (elemendid, mis on vaateaknaga ristunud).
4. Kui element ristub (entry.isIntersecting on tõene), määrame pildi src atribuudi väärtuseks data-src atribuudi väärtuse.
5. Seejärel eemaldame data-src atribuudi ja lõpetame pildi jälgimise, kuna seda pole enam vaja.
6. Lõpuks jälgime iga pilti, kasutades observer.observe(img).

HTML struktuur:

            <img data-src="image.jpg" alt="My Image">
            

              
                Copy
              
            
          

Pange tähele, et tegelik pildi URL on paigutatud data-src atribuuti, mitte src atribuuti. See takistab brauseril pildi kohest laadimist.

Viitlaadimise teekide kasutamine

Mitmed JavaScripti teegid võivad piltide viitlaadimise protsessi lihtsustada. Mõned populaarsed valikud on:

• Lozad.js: Kergekaaluline ja sõltuvusteta viitlaadimise teek.
• yall.js: Yet Another Lazy Loader. Kaasaegne viitlaadimise teek, mis kasutab Intersection Observerit.
• React Lazy Load: Reacti komponent piltide ja muude komponentide viitlaadimiseks.

Need teegid pakuvad tavaliselt lihtsat API-d viitlaadimise käivitamiseks ja pakuvad lisafunktsioone, nagu kohatäitepildid ja üleminekuefektid.

Komponentide viitlaadimine

Viitlaadimine ei ole ainult piltide jaoks; seda saab rakendada ka komponentidele, eriti kaasaegsetes JavaScripti raamistikes nagu React, Angular ja Vue. See on eriti kasulik suurte ühe lehe rakenduste (SPA-de) puhul, kus on palju komponente.

Viitlaadimine Reactis

React pakub sisseehitatud React.lazy() funktsiooni komponentide viitlaadimiseks. See funktsioon võimaldab teil komponente dünaamiliselt importida, mis laaditakse alles siis, kui neid renderdatakse.

            import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

Selgitus:

1. Kasutame React.lazy(), et dünaamiliselt importida MyComponent. Funktsioon import() tagastab lubaduse (promise), mis laheneb komponendi mooduliga.
2. Mähime MyComponent'i <Suspense> komponendi sisse. Suspense komponent võimaldab teil kuvada varu-kasutajaliidest (antud juhul "Laen...") sel ajal, kui komponenti laaditakse.

Viitlaadimine Angularis

Angular toetab moodulite viitlaadimist, kasutades marsruutimise konfiguratsioonis loadChildren omadust.

            const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];
            

              
                Copy
              
            
          

Selgitus:

1. Määratleme marsruudi my-module tee jaoks.
2. Kasutame loadChildren omadust, et määrata, et MyModuleModule tuleks viitlaadida. Funktsioon import() impordib mooduli dünaamiliselt.
3. Meetodit then() kasutatakse moodulile juurdepääsuks ja MyModuleModule klassi tagastamiseks.

Viitlaadimine Vue.js-is

Vue.js toetab komponentide viitlaadimist, kasutades dünaamilisi importimisi ja component silti.

            <template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>
            

              
                Copy
              
            
          

Selgitus:

1. Kasutame <component> silti koos :is atribuudiga, et komponenti dünaamiliselt renderdada.
2. Elutsükli konksus mounted kasutame import() funktsiooni, et dünaamiliselt importida MyComponent.vue.
3. Seejärel määrame dynamicComponent andmeomaduse mooduli vaikimisi ekspordiks.

Viitlaadimise parimad tavad

Et tagada viitlaadimise tõhus rakendamine, kaaluge neid parimaid tavasid:

• Kasutage võimalusel natiivset viitlaadimist: Kui teie sihtrühmaks on kaasaegsed brauserid, kasutage piltide ja iframe'ide jaoks natiivset loading atribuuti.
• Valige õige teek: Kui peate toetama vanemaid brausereid või vajate lisafunktsioone, valige hästi hooldatud ja kergekaaluline viitlaadimise teek.
• Kasutage kohatäiteid: Pakkuge kohatäitepilte või kasutajaliidese elemente, et vältida sisu nihkumist ressursside laadimisel. See parandab kasutajakogemust ja vähendab paigutuse ebastabiilsust. Kasutage väga väikeseid (madala KB suurusega) kohatäitepilte või isegi lihtsalt ühevärvilisi plokke, mis vastavad lõpuks laaditava pildi keskmisele värvile.
• Optimeerige pilte: Enne viitlaadimise rakendamist optimeerige oma pildid, tihendades neid ja kasutades sobivaid failivorminguid (nt WebP, JPEG, PNG).
• Testige põhjalikult: Testige oma viitlaadimise rakendust erinevates brauserites, seadmetes ja võrgutingimustes, et tagada selle korrektne toimimine. Pöörake tähelepanu madalama jõudlusega seadmete (sageli vanemad telefonid) kasutajatele, et pildid ei laadiks liiga kaua.
• Arvestage lehe ülaosaga (the fold): Vältige viitlaadimist elementide puhul, mis asuvad lehe ülaosas (nähtavad esmasel lehe laadimisel). Need elemendid tuleks laadida innukalt (eagerly), et tagada kiire esmane renderdamine.
• Eelistage kriitilisi ressursse: Tuvastage kriitilised ressursid, mis on esmase kasutajakogemuse jaoks hädavajalikud, ja laadige need innukalt. Nende hulka võivad kuuluda veebisaidi logo, navigeerimiselemendid ja lehe põhisisu.
• Jälgige jõudlust: Kasutage jõudluse jälgimise tööriistu, et jälgida viitlaadimise mõju teie veebisaidi jõudlusele. See aitab teil tuvastada probleeme ja optimeerida oma rakendust. Google'i PageSpeed Insights ja WebPageTest on suurepärased tasuta tööriistad saidi jõudluse mõõtmiseks.

Rahvusvahelistumise kaalutlused

Viitlaadimise rakendamisel globaalsele sihtrühmale kaaluge neid rahvusvahelistumise tegureid:

• Erinevad võrgukiirused: Erinevates piirkondades olevatel kasutajatel võivad olla oluliselt erinevad võrgukiirused. Optimeerige oma viitlaadimise strateegia, et arvestada aeglasemate ühendustega.
• Andmeside kulud: Mõnes piirkonnas on andmeside kulud kõrged. Viitlaadimine aitab vähendada andmekulu ja parandada kasutajakogemust piiratud andmemahuga pakettidega kasutajatele.
• Seadmete võimekus: Erinevates piirkondades olevad kasutajad võivad kasutada erineva võimekusega seadmeid. Testige oma viitlaadimise rakendust mitmesugustes seadmetes, et tagada selle korrektne toimimine.
• Sisuedastusvõrgud (CDN-id): Kasutage CDN-i, et edastada oma veebisaidi varasid serveritest, mis asuvad üle maailma. See võib parandada jõudlust kasutajatele erinevates piirkondades. Näiteks Euroopa vaatamisväärsuste pildid tuleks ELi kasutajatele serveerida võimalusel Euroopas asuvast CDN-i lõpp-punktist.
• Pildivormingud: Kaaluge kaasaegsete pildivormingute, nagu WebP, kasutamist, mis pakuvad paremat tihendust ja kvaliteeti kui traditsioonilised vormingud nagu JPEG ja PNG. Olge siiski teadlik brauserite ühilduvusest; kasutage sobivaid varuvariante vanemate brauserite jaoks, mis WebP-d ei toeta.
• Juurdepääsetavus: Tagage, et teie viitlaadimise rakendus oleks juurdepääsetav puuetega kasutajatele. Pakkuge piltidele sobiv alt-tekst ja tagage, et laadimise olek edastatakse abitehnoloogiatele.

Kokkuvõte

Viitlaadimine on võimas tehnika veebisaidi jõudluse optimeerimiseks ja kasutajakogemuse parandamiseks. Väljaspool ekraani olevate ressursside laadimise edasilükkamisega saate vähendada esmast lehe laadimisaega, vähendada andmemahu tarbimist ja alandada serveri koormust. Olenemata sellest, kas ehitate väikest isiklikku veebisaiti või suurt ettevõtte rakendust, peaks viitlaadimine olema teie jõudluse optimeerimise strateegia oluline osa. Järgides selles artiklis kirjeldatud parimaid tavasid ja arvestades rahvusvahelistumise tegureid, saate tagada, et teie viitlaadimise rakendus on tõhus ja pakub positiivset kasutajakogemust globaalsele sihtrühmale.

Võtke viitlaadimine omaks ja avage kiirem, tõhusam ja kasutajasõbralikum veebikogemus kõigile.