M

MLOG

Eesti

Põhjalik juhend piltide ja komponentide viitlaadimiseks, parandades veebisaidi jõudlust ja kasutajakogemust globaalsele sihtrühmale.

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:

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">

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

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">

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);
});

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">

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:

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;

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)
  }
];

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>

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:

Rahvusvahelistumise kaalutlused

Viitlaadimise rakendamisel globaalsele sihtrühmale kaaluge neid rahvusvahelistumise tegureid:

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.