Lazy Loading (tingusis įkėlimas)
Naudojantis internetinėmis platformomis, tokiomis kaip svetainės, įkėlimo greitis ir optimizavimas tampa esminiais dalykais, o naudotojai reikalauja vis daugiau greičio ir reagavimo spartos.
Būtent dėl to puslapio dizaino šablonas, žinomas kaip lazy loading, įgyja vis didesnę reikšmę. Bet kas tiksliai yra lazy loading (atidėtasis įkėlimas)?
Būtent tai ir aptarsime toliau.
Kas yra Lazy Loading?
Konkrečiai, lazy loading – tai technika, programavimo dizaino šablonas, taikomas svetainėms, kai elementai ir ištekliai įkeliami ne visi iš karto, o vykdomi tik prireikus arba pagal poreikį pagal naudotojo veiksmus, taip sukuriant „atidėtąjį“ turinio įkėlimą.
Tokiu būdu ištekliai optimizuojami, o toks turinys kaip tekstas, vaizdo įrašai, paveikslėliai ir kita medžiaga įkeliami tik tada, kai jų reikia, taip gerinant greitį, atminties naudojimą ir apdorojimą, reagavimo spartą bei įkėlimo laiką. Tai priešinga pilnam įkėlimui, kai svetainė ar puslapis įkeliamas visas, net jei naudotojas panaudoja ne visus elementus.
Bendrieji lazy loading privalumai
Kadangi pagrindinis lazy loading tikslas – optimizuoti elementų įkėlimą juos pateikiant tik tada, kai jie naudojami, esama daugybės privalumų, kuriuos galima apibendrinti taip:
- Pagrindinių svetainės elementų atvaizdavimo greitis.
- Reikšmingas naudotojo patirties svetainėje (UX) pagerėjimas.
- Geresnis našumas mobiliuosiuose įrenginiuose, ypač kai jų tinklo ryšio ištekliai riboti; įjungtas Lazy Loading leis naršyti puslapiuose, kurie esant tokioms prastoms ryšio sąlygoms kitaip būtų nepasiekiami.
- Bendras ir visapusiškas išteklių, tokių kaip CPU, RAM ir mobiliųjų įrenginių akumuliatoriaus energija, optimizavimas.
- Buvimo mūsų puslapiuose laiko pailgėjimas, nesant įkėlimo problemų, netiesiogiai virsta reitingo pagerėjimu.
- Atmetimo rodiklio (bounce rate) sumažėjimas.
Panašiai lazy loading programavimo metodas turi privalumų ir naujovių ir techniniu požiūriu, pavyzdžiui:
- Lazy loading visiškai suderinamas su JS karkasais, tokiais kaip React ir Angular, taip pat su TVS platformomis, tokiomis kaip WordPress. Iš tiesų neseniai pranešta, kad paveikslėlių lazy loading bus įtrauktas pagal numatytuosius nustatymus į WordPress 5.5 versiją.
- Dėka IntersectionObserver API jis neslepia paveikslėlių nuo paieškos sistemų.
- Palaikoma daug turinio tipų, tokių kaip paveikslėliai ir responsive klasės ištekliai.
- Jis leidžia indeksuoti svetainės paveikslėlius, o tai gyvybiškai svarbu SEO.
- Tai 100 % SEO palankus išteklius, nes tiesiogiai ir netiesiogiai pagerina daugelį svarbių SEO aspektų.
Kaip įdiegti lazy loading WordPress platformoje?
Jei mūsų svetainė veikia WordPress platformoje, turėtume žinoti, kad turime didelį pranašumą, nes yra daug sprendimų lazy loading įdiegti mūsų puslapiuose, kad jie kraudavosi kur kas greičiau. Šioje ekrano nuotraukoje žemiau matyti keli galimi sprendimai, kuriuos turime papildinių saugykloje:
Ryškiausių WordPress papildinių, skirtų lazy loading įdiegti, vaizdas.
Šiam diegimui atlikti turime keletą galimybių:
- Pasirinkti specialų lazy loading papildinį, tokį kaip „Lazy loader“, „a3 lazy load“...
- Pasirinkti svetainės optimizavimo papildinį, tokį kaip „WP Rocket“, kuriame ši parinktis kartu su kitais patobulinimais jau įtraukta pagal numatytuosius nustatymus.
Su Lazy Loading susiję SEO aspektai
Jau žinome pagrindinę atidėtojo įkėlimo paskirtį ir jo esminius privalumus bei tai, kaip jis prisideda prie mūsų puslapio našumo, mūsų UX ir SEO gerinimo.
Dabar atidėtąjį įkėlimą reikia naudoti sumaniai, kad iš jo išgautume daugiausiai, nes naudojamas netinkamai jis galėtų sukelti priešingą efektą.
Pavyzdžiui, lazy loading naudoja podėlį (cache) greičiui pagerinti, todėl jei ten saugoma per daug turinio, gali kilti lėtėjimų ar klaidų, jei įdiegta neteisingai, netgi sutrukdyti Google indeksuoti puslapius ir elementus, o tai gali smarkiai paveikti svetainės reitingą. Keletas patarimų:
- Optimizuokite podėlį ir naudokite jį sumaniai.
- Naudokite Google Search Console, kad patikrintumėte, kokį turinį Google nuskaito svetainėje.
- Pridėkite ALT tekstą, kad kiekvieną paveikslėlį Google galėtų indeksuoti.
- Visada naudokite IntersectionObserver API.
- Pridėkite loading atributą prie iframe ar įterpto turinio iš kitų puslapių ar šaltinių, dėka Chrome naršyklės Blink LazyLoad funkcijos. Tai taikoma paveikslėliams, nuotraukoms, vaizdo įrašams, tekstui ir kitam turiniui.
Lazy loading ir UX
Kalbant apie svetainę, tiek techninis, tiek bendrasis optimizavimas siekiant užtikrinti gerą naudotojo patirtį (UX) yra būtinas – tai apima įkėlimo laiką, reagavimo spartą, išteklių naudojimą ir bendrą veikimą. Jei svetainė reaguoja lėtai, jos atmetimo rodiklis bus aukštas, o jei ji teikia prastą naudotojo patirtį, tai paveiks jos srautą, matomumą ir net SEO.
Naudojant atidėtąjį įkėlimą, siekiama vienu žingsniu smarkiai pagerinti svetainės UX, įkeliant jos turinį palaipsniui ir tada, kai naudotojui to prireikia jam slenkant puslapį – tai gali būti paveikslėliai ar tekstas – o tai optimizuoja išteklių naudojimą, palyginti su visos platformos įkėlimu, kuomet tikriausiai būtų rodomi naudotojui nesvarbūs elementai.
Natyvusis lazy loading (HTML) naršyklėje Chrome
Demonstruodamas, kokią svarbą Google teikia UX, nuo 2020 metų ir pradedant nuo Chrome naršyklės 75 versijos, galima pridėti natyvųjį lazy loading prie HTML puslapio žymų ir jų multimedijos turinio, tokio kaip nuotraukos, vaizdo įrašai ir kt.
Tokiu būdu, automatiškai pridėjus HTML lazy loading atributą, Chrome naršyklė supranta, kad puslapio turinys bus įkeliamas pagal naudotojo naršymą, o ne viskas iš karto, taip gerinant greitį ir reagavimo spartą. Norint jį naudoti, prie kiekvienos vizualinių ir multimedijos išteklių žymos, taip pat iframe elementų, pridedamas loading atributas su reikšme lazy:
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> Šis išteklius gali būti naudojamas tiek paveikslėliuose, kurie sudaro didelę dalį informacijos, kurią naršyklei reikia atsisiųsti, tiek iframe elementuose; prisiminkite, kad juos naudojame išoriniams ištekliams įterpti į mūsų svetainę.
Svarbu pabrėžti naudojimą iframe elementuose, nes jie mūsų svetainėje gali būti kritiniai įkėlimo taškai.
Kaip trūkumą reikėtų paminėti, kad natyvusis lazy loading suderinamas tik su Chrome, nors jį galima įdiegti ir kitose naršyklėse per suderinamas bibliotekas, jei jose nėra palaikymo, kaip yra Mozilla Firefox atveju.
Lazy loading panaudojimo būdai
Kaip jau minėjome, lazy loading orientuotas į elementų įkėlimo atidėjimą puslapyje siekiant optimizuoti jo reagavimą. Šia prasme įrankio panaudojimas sutelktas į visus vizualinius išteklius, nors pagrindinis dėmesys skiriamas paveikslėliams, vaizdo įrašams ir iframe elementams, galintiems apimti dokumentus ir kitus failus – visa tai keičiant žymas ir įtraukiant loading atributą su reikšme lazy bei optimizuojant bendrą svetainės greitį, net jei ji turi sunkių elementų ar didelės apimties multimedijos turinio.
Turite klausimų apie lazy loading arba norite jį įdiegti savo projekte? Esame Jūsų paslaugoms!
Dokumentacija ir šaltiniai:
Autorius: David Kaufmann
Pastaruosius 10+ metų praleidau visiškai apsėstas SEO — ir, tiesą sakant, nenorėčiau, kad būtų kitaip.
Mano karjera pakilo į naują lygį, kai dirbau vyresniuoju SEO specialistu Chess.com — vienoje iš 100 lankomiausių svetainių visame internete. Darbas tokiu mastu, apimant milijonus puslapių, dešimtis kalbų ir vieną konkurencingiausių SERPs, išmokė mane to, ko joks kursas ar sertifikatas niekada nebūtų galėjęs. Ta patirtis pakeitė mano supratimą apie tai, kaip iš tikrųjų atrodo puikus SEO — ir tapo pagrindu viskam, ką nuo tada sukūriau.
Iš tos patirties įkūriau SEO Alive — agentūrą prekės ženklams, kurie rimtai žiūri į organinį augimą. Mes čia ne tam, kad pardavinėtume dashboards ir mėnesines ataskaitas. Mes čia tam, kad kurtume strategijas, kurios iš tikrųjų daro poveikį, sujungdami tai, kas geriausia klasikiniame SEO, su jaudinančiu nauju Generative Engine Optimization (GEO) pasauliu — užtikrindami, kad jūsų prekės ženklas pasirodytų ne tik Google mėlynosiose nuorodose, bet ir AI sugeneruotuose atsakymuose, kuriuos ChatGPT, Perplexity ir Google AI Overviews kasdien pateikia milijonams žmonių.
Ir kadangi neradau įrankio, kuris tinkamai valdytų abu šiuos pasaulius, sukūriau jį pats — SEOcrawl, enterprise SEO intelligence platformą, kuri vienoje vietoje sujungia rankings, techninius auditus, backlinks stebėseną, crawl būklę ir AI prekės ženklo matomumo sekimą. Tai platforma, apie kurios egzistavimą visada svajojau.
Atraskite daugiau šio autoriaus turinio
