Lazy Loading (slinkā ielāde)

Kas ir Lazy Loading?

Konkrēti, lazy loading ir paņēmiens, programmēšanas dizaina modelis, ko piemēro vietnēm, kurā elementi un resursi netiek ielādēti visi uzreiz, bet gan tiek izpildīti tikai vajadzības gadījumā jeb pēc pieprasījuma atbilstoši lietotāja darbībām, radot satura „atlikto ielādi”.

Šādā veidā resursi tiek optimizēti, un tāds saturs kā teksts, video, attēli un citi materiāli tiek ielādēts tikai tad, kad tas ir vajadzīgs, uzlabojot ātrumu, atmiņas izmantošanu un apstrādi, atsaucību un ielādes laikus. Tas ir pretstats pilnai ielādei, kad vietne vai lapa tiek ielādēta pilnībā, pat ja lietotājs neizmanto katru elementu.

Lazy loading vispārīgās priekšrocības

Tā kā lazy loading galvenais mērķis ir optimizēt elementu ielādi, tos ielādējot tikai tad, kad tie tiek izmantoti, pastāv vairākas priekšrocības, ko var apkopot šādi:

• ›Vietnes galveno elementu attēlošanas ātrums.
• ›Būtisks lietotāja pieredzes vietnē (UX) uzlabojums.
• ›Uzlabota veiktspēja mobilajās ierīcēs, īpaši tad, kad tām ir ierobežoti tīkla savienojuma resursi; aktīvs Lazy Loading ļaus pārlūkot lapas, kas šādos vājas pārklājuma apstākļos citādi nebūtu izmantojamas.
• ›Kopēja un pilnīga tādu resursu kā CPU, RAM un mobilo ierīču akumulatora optimizācija.
• ›Uzturēšanās laika palielinājums mūsu lapās, jo nav ielādes problēmu, netieši pārvēršas ranga uzlabojumos.
• ›Atlēcienu īpatsvara (bounce rate) samazinājums.

Līdzīgi lazy loading programmēšanas pieejai ir priekšrocības un jauninājumi arī no tehniskāka viedokļa, piemēram:

• ›Lazy loading ir pilnībā saderīgs ar JS ietvariem, piemēram, React un Angular, kā arī ar SVS platformām, piemēram, WordPress. Patiešām, nesen ir ziņots, ka attēlu lazy loading pēc noklusējuma tiks iekļauts WordPress 5.5. versijā.
• ›Pateicoties IntersectionObserver API, tas neslēpj attēlus no meklētājprogrammām.
• ›Atbalsts vairākiem satura veidiem, piemēram, attēliem un responsive klases resursiem.
• ›Tas ļauj indeksēt vietnes attēlus, kas ir būtiski SEO.
• ›Tas ir 100 % SEO draudzīgs resurss, jo tieši un netieši uzlabo daudzus svarīgus SEO aspektus.

Kā ieviest lazy loading platformā WordPress?

Ja mūsu vietne darbojas platformā WordPress, mums vajadzētu zināt, ka mums ir liela priekšrocība, jo pastāv daudzi risinājumi lazy loading ieviešanai mūsu lapās, lai tās ielādētos daudz ātrāk. Šajā ekrānuzņēmumā zemāk ir redzami daži iespējamie risinājumi, kas mums pieejami spraudņu repozitorijā:

Redzamāko WordPress spraudņu skats lazy loading ieviešanai.

Lai veiktu šo ieviešanu, mums ir vairākas iespējas:

• ›Izvēlēties īpašu lazy loading spraudni, piemēram, „Lazy loader”, „a3 lazy load”...
• ›Izvēlēties vietnes optimizācijas spraudni, piemēram, „WP Rocket”, kurā šī iespēja jau ir iekļauta pēc noklusējuma līdzās citiem uzlabojumiem.

Ar Lazy Loading saistītie SEO aspekti

Mēs jau zinām atliktās ielādes galveno uzdevumu un tās galvenās priekšrocības, kā arī to, kā tā ietekmē mūsu lapas veiktspējas, mūsu UX un SEO uzlabošanu.

Tagad atliktā ielāde ir jāizmanto gudri, lai no tās gūtu maksimālu labumu, jo, izmantota nepareizi, tā varētu radīt pretēju efektu.

Piemēram, lazy loading izmanto kešatmiņu, lai uzlabotu ātrumu, tāpēc, ja tur tiek uzglabāts pārāk daudz satura, var rasties palēninājumi vai kļūdas, ja tas nav ieviests pareizi, pat traucējot Google indeksēt lapas un elementus, kas var būtiski ietekmēt vietnes rangu. Daži padomi:

• ›Optimizējiet kešatmiņu un izmantojiet to gudri.
• ›Izmantojiet Google Search Console, lai pārbaudītu, kādu saturu Google rāpuļo vietnē.
• ›Pievienojiet ALT tekstu, lai katrs attēls būtu indeksējams pakalpojumā Google.
• ›Vienmēr izmantojiet IntersectionObserver API.
• ›Pievienojiet loading atribūtu iframe vai iegultajam saturam no citām lapām vai avotiem, pateicoties Chrome pārlūka Blink LazyLoad funkcijai. Tas attiecas uz attēliem, fotoattēliem, video, tekstu un citu saturu.

Lazy loading un UX

Runājot par vietni, gan tehniskā, gan vispārīgā optimizācija, lai nodrošinātu labu lietotāja pieredzi (UX), ir būtiska attiecībā uz ielādes laikiem, atsaucību, resursu izmantošanu un vispārīgo darbību. Ja vietne ir maz atsaucīga, tās atlēcienu īpatsvars būs augsts, un, ja tā piedāvā vāju lietotāja pieredzi, tas ietekmēs tās trafiku, redzamību un pat SEO.

Ar atlikto ielādi mērķis ir vienā solī krasi uzlabot vietnes UX, ielādējot tās saturu pakāpeniski un tad, kad lietotājam tas ir vajadzīgs, viņam ritinot lapu, neatkarīgi no tā, vai tie ir attēli vai teksts, kas optimizē resursu izmantošanu salīdzinājumā ar visas platformas ielādi, kas, iespējams, rādītu lietotājam nesvarīgus elementus.

Natīvais lazy loading (HTML) pārlūkā Chrome

Apliecinot nozīmi, ko Google piešķir UX, kopš 2020. gada un sākot ar sava pārlūka Chrome 75. versiju, ir iespējams pievienot natīvo lazy loading HTML lapas tagiem un to multivides saturam, piemēram, fotoattēliem, video un citiem.

Šādā veidā, automātiski pievienojot HTML lazy loading atribūtu, pārlūks Chrome saprot, ka lapas saturs tiks ielādēts atbilstoši lietotāja pārlūkošanai, nevis viss uzreiz, uzlabojot ātrumu un atsaucību. Lai to izmantotu, katram vizuālo un multivides resursu tagam, kā arī iframe elementiem tiek pievienots loading atribūts ar vērtību lazy:

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

<iframe src="video-player.html" loading="lazy"></iframe> Šo resursu var izmantot gan attēlos, kas veido lielu daļu informācijas, kura pārlūkam ir jālejupielādē, gan iframe elementos; atcerieties, ka tos izmantojam, lai iegultu ārējos resursus savā vietnē.

Ir svarīgi izcelt izmantošanu iframe elementos, jo tie mūsu vietnē var būt kritiski ielādes punkti.

Kā trūkums jāmin, ka natīvais lazy loading ir saderīgs tikai ar Chrome, lai gan tā izmantošanu var ieviest arī citos pārlūkos, izmantojot saderīgas bibliotēkas, gadījumā, ja atbalsta nav, kā tas ir Mozilla Firefox gadījumā.

Lazy loading izmantošanas veidi

Kā jau minējām, lazy loading ir vērsts uz elementu ielādes atlikšanu lapā, lai optimizētu tās atsaucību. Šajā ziņā rīka izmantošana ir vērsta uz visiem vizuālajiem resursiem, lai gan uzsvars tiek likts uz attēliem, video un iframe elementiem, kas var ietvert dokumentus un citus failus, — tas viss notiek, modificējot tagus un iekļaujot loading atribūtu ar vērtību lazy, optimizējot vietnes vispārīgo ātrumu, pat ja tai ir smagi elementi vai apjomīgs multivides saturs.

Vai jums ir jautājumi par lazy loading vai vēlaties to ieviest savā projektā? Esam jūsu rīcībā!

Dokumentācija un atsauces:

• ›Attēlu lazy loading
• ›Video lazy loading
• ›Natīvais lazy loading