Lazy Loading (laisk laadimine)
Veebiplatvormide, näiteks veebisaitide kasutamisel muutuvad laadimiskiirus ja optimeerimine hädavajalikuks, sest kasutajad nõuavad üha suuremat kiirust ja reageerimisvõimet.
Just seetõttu omandab lehe disainimuster, mida tuntakse kui lazy loading, üha suuremat tähtsust. Aga mis täpselt on lazy loading (edasilükatud laadimine)?
Just seda me allpool käsitlemegi.
Mis on Lazy Loading?
Täpsemalt on lazy loading tehnika, veebisaitidele rakendatav programmeerimise disainimuster, mille puhul elemente ja ressursse ei laadita kõiki korraga, vaid neid käivitatakse vastavalt vajadusele ehk nõudmisel vastavalt kasutaja tegevusele, luues sisu „edasilükatud laadimise“.
Sel viisil optimeeritakse ressursse ja selline sisu nagu tekst, videod, pildid ja muu materjal laaditakse alles siis, kui seda vajatakse, parandades kiirust, mälukasutust ja töötlemist, reageerimisvõimet ning laadimisaegu. See on vastandiks täislaadimisele, mille puhul sait või leht laaditakse täielikult, isegi kui kasutaja ei kasuta iga elementi.
Lazy loadingu üldised eelised
Kuna lazy loadingu peamine eesmärk on optimeerida elementide laadimist, laadides need alles siis, kui neid kasutatakse, on sellel mitmeid eeliseid, mille võib kokku võtta järgmiselt:
- Veebisaidi põhielementide kuvamise kiirus.
- Märkimisväärne kasutajakogemuse (UX) paranemine saidil.
- Parem jõudlus mobiilseadmetes, eriti kui neil on piiratud võrguühenduse ressursid; aktiivne Lazy Loading võimaldab sirvida lehti, mis selliste kehvade levitingimuste korral oleksid muidu kasutuskõlbmatud.
- Ressursside, näiteks CPU, RAM-i ja mobiilseadmete aku, üldine ja täielik optimeerimine.
- Meie lehtedel viibimise aja pikenemine, mida laadimisprobleemide puudumine kaudselt muudab edetabelikohtade paranemiseks.
- Põrkemäära (bounce rate) vähenemine.
Sarnaselt on lazy loadingu programmeerimislähenemisel eeliseid ja uuendusi ka tehnilisemast vaatenurgast, näiteks:
- Lazy loading on täielikult ühilduv JS raamistikega nagu React ja Angular, samuti CMS-platvormidega nagu WordPress. Tegelikult on hiljuti teatatud, et piltide lazy loading lisatakse vaikimisi WordPressi versiooni 5.5.
- Tänu IntersectionObserver API-le ei peida see pilte otsingumootorite eest.
- Tugi mitut tüüpi sisule, näiteks piltidele ja responsive-klassi ressurssidele.
- See võimaldab saidi pilte indekseerida, mis on SEO jaoks ülioluline.
- See on 100% SEO-sõbralik ressurss, kuna parandab otseselt ja kaudselt paljusid SEO võtmekohti.
Kuidas juurutada lazy loading WordPressis?
Kui meie sait on WordPressis, peaksime teadma, et meil on suur eelis, sest lazy loadingu juurutamiseks meie lehtedel on palju lahendusi, et need laaditaks palju kiiremini. Allolev ekraanipilt näitab mõningaid võimalikke lahendusi, mis meil pluginate hoidlas olemas on:
Ülevaade silmapaistvamatest WordPressi pluginatest lazy loadingu juurutamiseks.
Selle juurutamise läbiviimiseks on meil mitu võimalust:
- Valida spetsiaalne lazy loadingu plugin, näiteks „Lazy loader“, „a3 lazy load“...
- Valida veebi optimeerimise plugin, näiteks „WP Rocket“, milles on see valik koos muude täiendustega juba vaikimisi kaasas.
Lazy Loadinguga seotud SEO aspektid
Me juba teame edasilükatud laadimise peamist ülesannet ja selle põhieeliseid ning seda, kuidas see mõjutab meie lehe jõudluse, meie UX-i ja SEO paranemist.
Nüüd tuleb edasilükatud laadimist kasutada nutikalt, et sellest maksimumi võtta, sest valesti kasutades võib see põhjustada vastupidise efekti.
Näiteks kasutab lazy loading kiiruse parandamiseks vahemälu, seega kui sinna salvestatakse liiga palju sisu, võivad valesti juurutamise korral tekkida aeglustused või vead, mis takistavad isegi Google'il lehti ja elemente indekseerida, millel võib olla tõsine mõju saidi edetabelikohale. Mõned näpunäited:
- Optimeeri vahemälu ja kasuta seda nutikalt.
- Kasuta Google Search Console'i, et kontrollida, millist sisu Google saidil roomab.
- Lisa ALT-tekst, et Google saaks iga pildi indekseerida.
- Kasuta alati IntersectionObserver API-t.
- Lisa loading-atribuut iframe'ile või teistelt lehtedelt või allikatest põimitud sisule tänu Chrome'i brauseri Blink LazyLoad funktsioonile. See kehtib piltide, fotode, videote, teksti ja muu sisu kohta.
Lazy loading ja UX
Veebisaidi puhul on hea kasutajakogemuse (UX) pakkumiseks hädavajalik nii tehniline kui ka üldine optimeerimine seoses laadimisaegade, reageerimisvõime, ressursikasutuse ja üldise käitumisega. Kui sait ei ole eriti reageeriv, on selle põrkemäär kõrge, ja kui see pakub kehva kasutajakogemust, mõjutab see selle liiklust, nähtavust ja isegi SEO-d.
Edasilükatud laadimise eesmärk on parandada saidi UX-i ühe sammuga märkimisväärselt, laadides selle sisu järk-järgult ja siis, kui kasutaja seda lehte kerides vajab, olgu tegemist piltide või tekstiga, mis optimeerib ressursikasutust võrreldes kogu platvormi laadimisega, mis tõenäoliselt näitaks kasutaja jaoks ebaolulisi elemente.
Natiivne lazy loading (HTML) Chrome'is
Näidates, kui suurt tähtsust Google UX-ile omistab, on alates 2020. aastast ja oma Chrome'i brauseri versioonist 75 alates võimalik lisada natiivne lazy loading HTML-lehe siltidele ja nende multimeediasisule, näiteks fotodele, videotele jm.
Sel viisil, lisades automaatselt HTML lazy loadingu atribuudi, saab Chrome'i brauser aru, et lehe sisu laaditakse vastavalt kasutaja sirvimisele, mitte kõike korraga, parandades kiirust ja reageerimisvõimet. Selle kasutamiseks lisatakse igale visuaalsete ja multimeediaressursside sildile ning iframe'idele loading-atribuut väärtusega lazy:
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> Seda ressurssi saab kasutada nii piltides, mis moodustavad suure osa teabest, mida brauser peab alla laadima, kui ka iframe'ides; pea meeles, et kasutame neid väliste ressursside põimimiseks oma saidile.
Oluline on rõhutada kasutamist iframe'ides, sest need võivad olla meie saidil kriitilised laadimispunktid.
Miinusena tuleb märkida, et natiivne lazy loading ühildub ainult Chrome'iga, kuigi selle kasutamist saab juurutada ka teistes brauserites ühilduvate teekide kaudu juhul, kui tugi puudub, nagu see on Mozilla Firefoxi puhul.
Lazy loadingu kasutusalad
Nagu me juba mainisime, keskendub lazy loading lehe elementide laadimise edasilükkamisele, et optimeerida selle reageerimist. Selles mõttes on tööriista kasutus suunatud kõikidele visuaalsetele ressurssidele, kuigi rõhk pannakse piltidele, videotele ja iframe'idele, mis võivad sisaldada dokumente ja muid faile, — kõik see toimub siltide muutmise ja loading-atribuudi väärtusega lazy lisamise kaudu, optimeerides saidi üldist kiirust isegi siis, kui sellel on rasked elemendid või mahukas multimeediasisu.
Kas sul on lazy loadingu kohta küsimusi või soovid seda oma projektis juurutada? Oleme sinu käsutuses!
Dokumentatsioon ja viited:
Autor: David Kaufmann
Olen viimased 10+ aastat olnud täielikult SEO-sse haaratud — ja ausalt öeldes ei tahaks ma seda teisiti.
Minu karjäär jõudis uuele tasemele, kui töötasin vanem-SEO-spetsialistina Chess.com-is — ühel 100 külastatuimast veebisaidist kogu internetis. Sellises mahus töötamine, hõlmates miljoneid lehti, kümneid keeli ja üht konkurentsitihedaimat SERPs, õpetas mulle asju, mida ükski kursus ega sertifikaat kunagi ei suudaks. See kogemus muutis minu arusaama sellest, milline suurepärane SEO tegelikult välja näeb — ja sai aluseks kõigele, mille olen sellest ajast peale üles ehitanud.
Sellest kogemusest lähtudes asutasin SEO Alive — agentuuri brändidele, kes suhtuvad orgaanilisse kasvu tõsiselt. Me ei ole siin selleks, et müüa dashboards ja igakuiseid aruandeid. Me oleme siin selleks, et luua strateegiaid, mis päriselt tulemusi liigutavad, ühendades klassikalise SEO parima osa põneva uue Generative Engine Optimization (GEO) maailmaga — tagades, et teie bränd ilmub mitte ainult Google'i sinistes linkides, vaid ka AI genereeritud vastustes, mida ChatGPT, Perplexity ja Google AI Overviews iga päev miljonitele inimestele edastavad.
Ja kuna ma ei leidnud tööriista, mis mõlemat neist maailmadest korralikult hallanuks, ehitasin selle ise — SEOcrawl, enterprise SEO intelligence platvormi, mis toob kokku rankings, tehnilised auditid, backlinks jälgimise, crawl tervise ja AI brändi nähtavuse jälgimise ühte kohta. See on platvorm, mille olemasolu ma alati soovisin.
Avastage rohkem selle autori sisu
