Slinkā ielāde: tīmekļa veiktspējas optimizēšana ar attēliem un komponentēm

Mūsdienu digitālajā vidē vietnes veiktspēja ir vissvarīgākā. Lietotāji sagaida ātru, atsaucīgu pieredzi, un meklētājprogrammas dod priekšroku vietnēm, kas to nodrošina. Viena no svarīgākajām metodēm veiktspējas uzlabošanai ir slinkā ielāde. Šis raksts sniedz visaptverošu rokasgrāmatu par attēlu un komponenšu slinko ielādi, palīdzot jums optimizēt savu vietni globālai auditorijai.

Kas ir slinkā ielāde?

Slinkā ielāde ir tehnika, kas atliek resursu (attēlu, iframe, komponenšu utt.) ielādi, līdz tie ir patiešām nepieciešami – parasti, kad tie gatavojas ienākt skatvietā. Tas nozīmē, ka tā vietā, lai ielādētu visus resursus uzreiz, pārlūkprogramma ielādē tikai tos resursus, kas lietotājam ir redzami sākotnējā lapas ielādē. Lietotājam ritinot lapu uz leju, tiek ielādēti vairāk resursu, kad tie kļūst redzami.

Iedomājieties to šādi: jūs gatavojaties ceļojumam. Tā vietā, lai no paša sākuma vilktu līdzi visu savu garderobi, jūs iesaiņojat tikai tās drēbes, kuras, jūsuprāt, būs nepieciešamas nekavējoties. Turpinot ceļojumu, jūs izsaiņojat papildu priekšmetus, kad tie jums kļūst vajadzīgi. Būtībā tā darbojas slinkā ielāde tīmekļa vietnēs.

Kāpēc izmantot slinko ielādi?

Slinkā ielāde piedāvā vairākas būtiskas priekšrocības:

• Uzlabots sākotnējās lapas ielādes laiks: Atliekot ārpus ekrāna esošo resursu ielādi, pārlūkprogramma var koncentrēties uz satura ielādi, kas lietotājam ir nekavējoties redzams. Tas nodrošina ātrāku sākotnējo lapas ielādes laiku, uzlabojot lietotāja pirmo iespaidu un samazinot atteikumu rādītājus.
• Samazināts joslas platuma patēriņš: Lietotāji lejupielādē tikai tos resursus, kurus viņi patiešām redz, samazinot joslas platuma patēriņu, īpaši lietotājiem mobilajās ierīcēs vai ar ierobežotiem datu plāniem. Tas ir īpaši svarīgi lietotājiem reģionos ar lēnāku interneta ātrumu vai dārgiem datiem.
• Zemāka servera slodze: Apkalpojot mazāk sākotnējo pieprasījumu, serveris piedzīvo zemāku slodzi, kas var uzlabot kopējo vietnes veiktspēju un mērogojamību.
• Labāka lietotāja pieredze: Ātrāka vietne nodrošina labāku lietotāja pieredzi, kas veicina lielāku iesaisti, konversijas un klientu apmierinātību.
• Uzlabots SEO: Meklētājprogrammas, piemēram, Google, uzskata lapas ielādes ātrumu par ranga faktoru. Slinkā ielāde var palīdzēt uzlabot jūsu vietnes SEO veiktspēju.

Attēlu slinkā ielāde

Attēli bieži ir lielākie resursi vietnē, padarot tos par galvenajiem kandidātiem slinkajai ielādei. Lūk, kā ieviest attēlu slinko ielādi:

Noklusējuma (Native) slinkā ielāde

Modernās pārlūkprogrammas (Chrome, Firefox, Safari un Edge) tagad atbalsta noklusējuma slinko ielādi, izmantojot loading atribūtu. Tas ir vienkāršākais un efektīvākais veids, kā veikt attēlu slinko ielādi.

Lai aktivizētu noklusējuma slinko ielādi, vienkārši pievienojiet loading="lazy" atribūtu savam <img> tagam:

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

              
                Copy
              
            
          

loading atribūtam var būt trīs vērtības:

• lazy: Atlikt attēla ielādi, līdz tas gatavojas ienākt skatvietā.
• eager: Ielādēt attēlu nekavējoties, neatkarīgi no tā atrašanās vietas lapā. (Šī ir noklusējuma uzvedība, ja atribūts nav norādīts.)
• auto: Ļaut pārlūkprogrammai izlemt, vai veikt attēla slinko ielādi.

Piemērs:

            <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
              
            
          

Šajā piemērā Londonas tilta, Tokijas panorāmas un Riodežaneiro attēli tiks ielādēti tikai tad, kad lietotājs ritinās līdz tiem. Tas ir ļoti noderīgi, it īpaši, ja lietotājs neritina līdz pašai lapas apakšai.

Slinkā ielāde ar JavaScript

Vecākām pārlūkprogrammām, kas neatbalsta noklusējuma slinko ielādi, varat izmantot JavaScript bibliotēkas vai rakstīt savu pielāgoto skriptu. Lūk, pamata piemērs, izmantojot Intersection Observer API:

            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
              
            
          

Paskaidrojums:

1. Mēs atlasām visus <img> elementus, kuriem ir data-src atribūts.
2. Mēs izveidojam jaunu IntersectionObserver instanci. Atzvanīšanas funkcija tiek izpildīta, kad novērots elements ienāk skatvietā vai iziet no tās.
3. Atzvanīšanas funkcijā mēs iterējam pār entries (elementiem, kas ir šķērsojuši skatvietu).
4. Ja elements šķērso skatvietu (entry.isIntersecting ir patiess), mēs iestatām attēla src atribūtu uz data-src atribūta vērtību.
5. Pēc tam mēs noņemam data-src atribūtu un pārtraucam attēla novērošanu, jo tas vairs nav nepieciešams.
6. Visbeidzot, mēs novērojam katru attēlu, izmantojot observer.observe(img).

HTML struktūra:

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

              
                Copy
              
            
          

Ievērojiet, ka faktiskais attēla URL ir ievietots data-src atribūtā, nevis src atribūtā. Tas neļauj pārlūkprogrammai nekavējoties ielādēt attēlu.

Slinkās ielādes bibliotēku izmantošana

Vairākas JavaScript bibliotēkas var vienkāršot attēlu slinkās ielādes procesu. Dažas populāras iespējas ietver:

• Lozad.js: Viegla un bez atkarībām slinkās ielādes bibliotēka.
• yall.js: Vēl viena slinkā ielādētāja (Yet Another Lazy Loader). Mūsdienīga slinkās ielādes bibliotēka, kas izmanto Intersection Observer.
• React Lazy Load: React komponente attēlu un citu komponenšu slinkajai ielādei.

Šīs bibliotēkas parasti nodrošina vienkāršu API slinkās ielādes inicializēšanai un piedāvā papildu funkcijas, piemēram, viettura attēlus un pārejas efektus.

Komponenšu slinkā ielāde

Slinkā ielāde nav paredzēta tikai attēliem; to var piemērot arī komponentēm, īpaši mūsdienu JavaScript ietvaros, piemēram, React, Angular un Vue. Tas ir īpaši noderīgi lielām vienas lapas lietojumprogrammām (SPA) ar daudzām komponentēm.

Slinkā ielāde React

React nodrošina iebūvētu React.lazy() funkciju komponenšu slinkajai ielādei. Šī funkcija ļauj dinamiski importēt komponentes, kuras pēc tam tiek ielādētas tikai tad, kad tās tiek renderētas.

            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
              
            
          

Paskaidrojums:

1. Mēs izmantojam React.lazy(), lai dinamiski importētu MyComponent. Funkcija import() atgriež solījumu (promise), kas atrisinās par komponentes moduli.
2. Mēs ietinam MyComponent <Suspense> komponentē. Suspense komponente ļauj jums parādīt rezerves lietotāja saskarni (šajā gadījumā "Loading..."), kamēr komponente tiek ielādēta.

Slinkā ielāde Angular

Angular atbalsta moduļu slinko ielādi, izmantojot loadChildren īpašību maršrutēšanas konfigurācijā.

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

              
                Copy
              
            
          

Paskaidrojums:

1. Mēs definējam maršrutu my-module ceļam.
2. Mēs izmantojam loadChildren īpašību, lai norādītu, ka MyModuleModule ir jāielādē slinki. Funkcija import() dinamiski importē moduli.
3. Metode then() tiek izmantota, lai piekļūtu modulim un atgrieztu MyModuleModule klasi.

Slinkā ielāde Vue.js

Vue.js atbalsta komponenšu slinko ielādi, izmantojot dinamiskos importus un component tagu.

            <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
              
            
          

Paskaidrojums:

1. Mēs izmantojam <component> tagu ar :is atribūtu, lai dinamiski renderētu komponenti.
2. mounted dzīves cikla āķī mēs izmantojam import() funkciju, lai dinamiski importētu MyComponent.vue.
3. Pēc tam mēs iestatām dynamicComponent datu īpašību uz moduļa noklusējuma eksportu.

Slinkās ielādes labākās prakses

Lai nodrošinātu, ka slinkā ielāde tiek ieviesta efektīvi, apsveriet šīs labākās prakses:

• Izmantojiet noklusējuma slinko ielādi, kad iespējams: Ja jūsu mērķauditorija ir modernas pārlūkprogrammas, izmantojiet noklusējuma loading atribūtu attēliem un iframe.
• Izvēlieties pareizo bibliotēku: Ja jums ir nepieciešams atbalstīt vecākas pārlūkprogrammas vai nepieciešamas papildu funkcijas, izvēlieties labi uzturētu un vieglu slinkās ielādes bibliotēku.
• Izmantojiet vietturus: Nodrošiniet viettura attēlus vai lietotāja saskarnes elementus, lai novērstu satura nobīdi, kamēr resursi tiek ielādēti. Tas uzlabo lietotāja pieredzi un samazina izkārtojuma nestabilitāti. Izmantojiet ļoti mazus (mazs KB izmērs) viettura attēlus vai pat vienkrāsainus blokus, kas atbilst attēla vidējai krāsai, kas galu galā tiks ielādēts.
• Optimizējiet attēlus: Pirms slinkās ielādes ieviešanas optimizējiet savus attēlus, tos saspiežot un izmantojot atbilstošus failu formātus (piemēram, WebP, JPEG, PNG).
• Rūpīgi pārbaudiet: Pārbaudiet savu slinkās ielādes implementāciju dažādās pārlūkprogrammās, ierīcēs un tīkla apstākļos, lai pārliecinātos, ka tā darbojas pareizi. Pievērsiet uzmanību lietotājiem ar zemākas klases ierīcēm (bieži vien vecākiem tālruņiem), lai nodrošinātu, ka attēlu ielāde neaizņem pārāk ilgu laiku.
• Apsveriet lapas augšējo daļu: Elementiem, kas atrodas virs locījuma (redzami sākotnējā lapas ielādē), izvairieties no slinkās ielādes. Šie elementi jāielādē nekavējoties, lai nodrošinātu ātru sākotnējo renderēšanu.
• Piešķiriet prioritāti kritiskiem resursiem: Identificējiet kritiskos resursus, kas ir būtiski sākotnējai lietotāja pieredzei, un ielādējiet tos nekavējoties. Tas varētu ietvert vietnes logotipu, navigācijas elementus un lapas galveno saturu.
• Pārraugiet veiktspēju: Izmantojiet veiktspējas uzraudzības rīkus, lai izsekotu slinkās ielādes ietekmi uz jūsu vietnes veiktspēju. Tas palīdzēs jums identificēt jebkādas problēmas un optimizēt implementāciju. Google's PageSpeed Insights un WebPageTest ir lieliski bezmaksas rīki vietnes veiktspējas mērīšanai.

Internacionalizācijas apsvērumi

Ieviešot slinko ielādi globālai auditorijai, apsveriet šos internacionalizācijas faktorus:

• Dažādi tīkla ātrumi: Lietotājiem dažādos reģionos var būt ievērojami atšķirīgi tīkla ātrumi. Optimizējiet savu slinkās ielādes stratēģiju, lai ņemtu vērā lēnākus savienojumus.
• Datu izmaksas: Dažos reģionos datu izmaksas ir augstas. Slinkā ielāde var palīdzēt samazināt datu patēriņu un uzlabot lietotāja pieredzi lietotājiem ar ierobežotiem datu plāniem.
• Ierīču iespējas: Lietotāji dažādos reģionos var izmantot dažādas ierīces ar atšķirīgām iespējām. Pārbaudiet savu slinkās ielādes implementāciju uz dažādām ierīcēm, lai nodrošinātu, ka tā darbojas pareizi.
• Satura piegādes tīkli (CDN): Izmantojiet CDN, lai piegādātu savas vietnes resursus no serveriem, kas atrodas visā pasaulē. Tas var uzlabot veiktspēju lietotājiem dažādos reģionos. Piemēram, Eiropas apskates objektu attēli ES lietotājiem, ja iespējams, būtu jāpasniedz no CDN galapunkta Eiropā.
• Attēlu formāti: Apsveriet iespēju izmantot modernus attēlu formātus, piemēram, WebP, kas piedāvā labāku kompresiju un kvalitāti nekā tradicionālie formāti, piemēram, JPEG un PNG. Tomēr apzinieties pārlūkprogrammu saderību; izmantojiet atbilstošus rezerves variantus vecākām pārlūkprogrammām, kas neatbalsta WebP.
• Pieejamība: Nodrošiniet, ka jūsu slinkās ielādes implementācija ir pieejama lietotājiem ar invaliditāti. Nodrošiniet atbilstošu alt tekstu attēliem un pārliecinieties, ka ielādes stāvoklis tiek paziņots palīgtehnoloģijām.

Noslēgums

Slinkā ielāde ir spēcīga tehnika vietnes veiktspējas optimizēšanai un lietotāja pieredzes uzlabošanai. Atliekot ārpus ekrāna esošo resursu ielādi, jūs varat samazināt sākotnējo lapas ielādes laiku, samazināt joslas platuma patēriņu un samazināt servera slodzi. Neatkarīgi no tā, vai veidojat nelielu personīgo vietni vai lielu uzņēmuma lietojumprogrammu, slinkajai ielādei vajadzētu būt jūsu veiktspējas optimizācijas stratēģijas galvenajai daļai. Ievērojot šajā rakstā izklāstītās labākās prakses un ņemot vērā internacionalizācijas faktorus, jūs varat nodrošināt, ka jūsu slinkās ielādes implementācija ir efektīva un nodrošina pozitīvu lietotāja pieredzi globālai auditorijai.

Pieņemiet slinko ielādi un atveriet ātrāku, efektīvāku un lietotājam draudzīgāku tīmekļa pieredzi visiem.