Egy oldal nem minden képének kell egyszerre betöltenie. A képek lusta betöltése késlelteti azoknak a képeknek a letöltését, amelyek még nem láthatók a látogató nézetablakában, így a böngésző arra a tartalomra összpontosít, amelyet a látogató ténylegesen lát, ahelyett hogy az egész oldalt egyszerre töltené be. A sok képet tartalmazó oldalaknál már ez az egy változtatás is jelentősen csökkentheti a kezdeti betöltési időt, és javíthatja azokat a mutatókat, amelyek a látogatói élmény és a keresési helyezések szempontjából is számítanak. Ez a cikk elmagyarázza, mi a lusta betöltés, hogyan működik műszakilag, mit kell és mit nem kell lustán betölteni, és hogyan hat a Core Web Vitals pontszámokra.
Amikor a böngésző lusta betöltés nélkül tölt be egy oldalt, az oldal minden képét letölti, függetlenül attól, hogy bármelyik látható-e már. Az a látogató, aki megnyit egy oldalt, és azonnal elmegy, így is elindítja a hajtás alatti összes kép letöltését. Ez pazarolt sávszélesség, és lelassítja a hajtás feletti tartalom betöltését, amelyet a látogató valójában lát. A lusta betöltés ezt úgy változtatja meg, hogy csak a jelenleg látható tartalom töltődik le. Hogy ez hogyan illeszkedik az oldalbetöltési sebesség tágabb képébe, azt a weboldalad betöltési idejének csökkentéséről szóló cikkben olvashatod.
Mi a lusta betöltés?
A lusta betöltés olyan technika, amely a nem kritikus erőforrások betöltését addig halasztja, amíg szükség nem lesz rájuk. A képeknél ez azt jelenti, hogy a kép nem töltődik le, amíg a látogató a közelébe nem görget. Ahelyett hogy a böngésző az oldal betöltésekor minden képet lekérne, csak azokat a képeket kéri le, amelyek láthatók, vagy hamarosan láthatóvá válnak, ahogy a látogató használja az oldalt.
Mit változtat a lusta betöltés a betöltési sorozaton
- Lusta betöltés nélkül: a böngésző az oldal első betöltésekor minden képet lekér, függetlenül attól, hogy a nézetablakban vannak-e
- Lusta betöltéssel: a böngésző csak azokat a képeket kéri le, amelyek az aktuális nézetablakban vagy a közelében vannak. A többit akkor kéri le, amikor a látogató feléjük görget
- Az átvitt adatok teljes mennyisége a teljes oldal végiggörgetése során ugyanannyi, de a kezdeti betöltés lényegesen könnyebb
- Azok a látogatók, akik nem görgetnek egy bizonyos pont fölé az oldalon, soha nem indítják el azoknak a képeknek a letöltését, amelyeket sosem érnek el
Hogyan működik a lusta betöltés műszakilag?
A képek lusta betöltésének megvalósítására két mód van: a natív böngészőattribútum és a JavaScript-alapú megoldások.
Natív lusta betöltés
- Minden nagyobb böngésző támogatja a natív lusta betöltést a közvetlenül a képcímkéhez adott
loading="lazy"attribútumon keresztül - Nincs szükség JavaScriptre vagy külső könyvtárakra. A böngésző natívan kezeli a betöltési viselkedést
- Ez ma a képek lusta betöltésének szokásos módszere a weben, és minimális műszaki tudást igényel a megvalósítása
- A böngésző a nézetablaktól mért távolsága alapján dönti el, mikor kezdje betölteni a képet, ez a küszöb böngészőnként kissé eltér
JavaScript-alapú lusta betöltés
- Mielőtt a natív lusta betöltés széles körben támogatott lett, a fejlesztők JavaScript-könyvtárakat használtak, amelyek figyelték a görgetési pozíciót, és elindították a képek betöltését, amikor azok a nézetablakba léptek
- Az Intersection Observer API a szokásos JavaScript-megoldás, amely észleli, amikor egy elem belép a nézetablakba vagy kilép belőle, görgetési eseményfigyelők nélkül
- A JavaScript-alapú lusta betöltést még mindig használják összetettebb helyzetekben, például a CSS-ben beállított háttérképek vagy videótartalom lusta betöltésénél
- A szokásos képelemeknél a
loading="lazy"natív lusta betöltés egyszerűbb és megbízhatóbb
Mi tölthető lustán a képeken kívül?
Iframe-ek
- A
loading="lazy"attribútum az iframe-eken is működik minden nagyobb böngészőben - Az iframe-ekben lévő beágyazott térképek, űrlapok és harmadik féltől származó tartalmak halaszthatók, amíg a látogató oda nem görget
- Ez különösen hasznos az olyan oldalaknál, amelyeknek az alján beágyazott térképek vagy harmadik féltől származó modulok vannak, mert ezek gyakran nehéz külső szkripteket vonnak maguk után
Videó
- A videófájlok lényegesen nagyobbak a képeknél, és a hajtás alatt elhelyezve nagy hatással lehetnek a kezdeti betöltési időre
- A videó lusta betöltéséhez JavaScript-megoldás kell, mivel a natív
loadingattribútum nem vonatkozik a videóelemekre - Gyakori megoldás, hogy kezdetben csak egy bélyegképet vagy plakátképet töltenek be, és a videófájl betöltését csak akkor kezdik meg, amikor a látogató interakcióba lép vele, vagy odagörget
Összetevők és szakaszok
- A sok JavaScriptet használó alkalmazásokban egész oldalszakaszok vagy összetevők tölthetők lustán, vagyis a kódjukat és tartalmukat addig nem kérik le, amíg a látogató el nem éri az oldal azon részét
- Ez haladó technika, amelyet összetett webalkalmazásokban használnak, és jellemzően a keretrendszer kezeli, nem kézzel valósítják meg
Mit nem szabad lustán betölteni?
A lusta betöltés helyesen alkalmazva javítja a teljesítményt, de rossz helyen alkalmazva problémákat okoz, nem javít.
A hajtás feletti képek
- A nyitókép, a logó vagy bármilyen kiemelkedő vizuális tartalom, amely az oldal első megnyitásakor látható, azonnal be kell hogy töltődjön
- Ha a hajtás feletti képekre lusta betöltést alkalmazol, késleltetsz az LCP mutatót, ami rontja a Core Web Vitals pontszámokat és a látogatói élményt
- A szabály egyértelmű: minden, ami görgetés nélkül látható, azonnal töltsön be. Minden, ami a hajtás alatt van, tölthető lustán
A hajtáshoz közeli képek
- A látható terület alatti képek gyorsan megjelenhetnek, amikor a látogató görgetni kezd. Ha a lusta betöltést túl agresszíven alkalmazzák, ezek a képek még töltődhetnek, amikor a látogató eléri őket, így rövid ideig üres helyőrző látszik
- A natív lusta betöltés ezt küszöbértékkel kezeli: a képek betöltését azelőtt elkezdi, hogy teljesen a nézetablakba kerülnének, ahelyett hogy az utolsó pillanatig várna
Kritikus tartalom a gyorsan betöltő oldalakon
- A nagyon kevés tartalmú, csak néhány képet tartalmazó oldalaknál a betöltési sorozat már így is gyors. A lusta betöltés ilyenkor bonyolultságot ad érdemi haszon nélkül
- A lusta betöltés a sok képet vagy hosszú, görgethető tartalmat tartalmazó oldalakon a leghasznosabb
Hogyan hat a lusta betöltés a Core Web Vitals mutatókra?
A lusta betöltés helyesen alkalmazva két Core Web Vitals mutatóra közvetlenül hat, a harmadikra nem.
Largest Contentful Paint (LCP)
- A lusta betöltést soha nem szabad arra az elemre alkalmazni, amely valószínűleg az LCP-jelölt, jellemzően a nyitóképre
- Helyesen alkalmazva a lusta betöltés csökkenti a kezdeti betöltés alatt a sávszélességért versengő erőforrások számát, ami javíthatja az LCP-t azzal, hogy a hajtás feletti tartalom gyorsabban töltődik be
- Ha a hajtás feletti képekre helytelenül alkalmazzák, a lusta betöltés közvetlenül rontja az LCP-t azzal, hogy késlelteti a legnagyobb látható elemet
Interaction to Next Paint (INP)
- Ha kevesebb kép töltődik be kezdetben, kevesebb hálózati tevékenység versenyez a JavaScript-végrehajtással a kritikus betöltési ablakban
- Ez közvetve csökkentheti a főszál blokkolását, és javíthatja az INP pontszámokat azokon az oldalakon, amelyek korábban egyszerre sok képet töltöttek be
Cumulative Layout Shift (CLS)
- A lusta betöltés nem hat közvetlenül a CLS-re, de a meghatározott szélesség- és magasságattribútumok nélküli, lustán betöltött képek elrendezésmozgást okozhatnak betöltésükkor
- A lustán betöltött képeknél mindig adj meg kifejezett méreteket, hogy a böngésző a kép betöltése előtt lefoglalja a megfelelő helyet
Az LCP, az INP és a CLS pontozásának és küszöbértékeinek teljes áttekintéséhez olvasd el a Core Web Vitals mutatókról szóló cikket.
Hat a lusta betöltés az SEO-ra?
Helyesen megvalósítva a lusta betöltés nem árt az SEO-nak, és a javuló oldalsebesség-pontszámokon keresztül hozzájárulhat a jobb keresési teljesítményhez.
Hogyan kezelik a keresők a lustán betöltött tartalmat
- A keresőbejárók a böngészőkhöz hasonlóan jelenítik meg az oldalakat, és indexelni tudják a lustán betöltött tartalmat
- A lustán betöltött képek továbbra is bejárhatók, és megjelenhetnek a képkeresési találatokban
- Az SEO-előny elsősorban a lusta betöltés által lehetővé tett sebességjavulásból ered. A jobb Core Web Vitals pontszámú oldalak, amelyeket a lusta betöltés segíthet javítani, rangsorolási előnyt élveznek
Az alt szöveg továbbra is érvényes
- A lustán betöltött képekhez ugyanúgy kell alt szöveg, mint bármelyik másikhoz. Az alt attribútumot ki kell tölteni a kép leírásával, függetlenül attól, hogy lustán töltődik-e
- A hatékony alt szöveg írásához a képek weboldalon való használatáról szóló cikk ad útmutatót
Hogyan adhatsz lusta betöltést a weboldaladhoz?
Egyes képeknél HTML-ben
- Add hozzá a
loading="lazy"attribútumot minden olyan képcímkéhez, amely a hajtás alatt van - Gondoskodj róla, hogy minden lustán betöltött képnek legyen kifejezett
widthésheightattribútuma, hogy megelőzd az elrendezésmozgást a képek betöltésekor - Ne add hozzá a
loading="lazy"attribútumot a nyitóképhez vagy bármelyik, görgetés nélkül látható képhez
A weboldalplatformodon keresztül
- Sok weboldalépítő automatikusan alkalmaz lusta betöltést a hajtás alatti képekre, kézi megvalósítás nélkül
- Nézd meg a platformod teljesítménydokumentációját, hogy megerősítsd, automatikusan kezeli-e, mielőtt kézzel hozzáadnád
A lusta betöltésen túli képoptimalizálás teljes útmutatójáért, a fájlformátumokat, a tömörítést és a reszponzív méretezést is beleértve, olvasd el a képek gyorsabb betöltéshez való optimalizálásáról szóló cikket.
Hogyan kezeli a WEMASY a lusta betöltést
A WEMASY weboldalépítője az összes oldalon automatikusan alkalmaz lusta betöltést a hajtás alatti képekre. A hajtás feletti képeket, köztük a nyitóképeket és a görgetés nélkül látható tartalmat, kizárja a lusta betöltésből, hogy azonnal megjelenjenek. A képeket alapból meghatározott méretekkel szolgálja ki, ami megelőzi az elrendezésmozgást, amikor a lustán betöltött képek a helyükre töltődnek.
A lusta betöltés a képtömörítéssel és a CDN-kézbesítéssel együtt működik minden WEMASY csomagban. Ez a három fejlesztés együtt csökkenti mind a kezdeti oldalsúlyt, mind a képek kézbesítési idejét, ami közvetlenül hozzájárul a gyorsabb LCP-hez és a jobb Core Web Vitals pontszámokhoz az analitikai vezérlőpulton.
Nézd meg, mi tartozik hozzá, a WEMASY weboldalépítőnél, vagy nézd át a csomagokat az árak oldalon.
Gyakran ismételt kérdések
Mi a lusta betöltés?
A lusta betöltés olyan technika, amely a képek és más erőforrások letöltését addig halasztja, amíg a látogató a megtekintésük közelébe nem ér. Ahelyett hogy az oldal első megnyitásakor minden képet betöltene, a böngésző csak azokat a képeket tölti be, amelyek láthatók, vagy a nézetablak közelében vannak. Az oldalon lejjebb lévő képek akkor töltődnek be, amikor a látogató feléjük görget. Ez csökkenti a kezdetben letöltött adatok mennyiségét, és lehetővé teszi, hogy a látható tartalom gyorsabban töltődjön be. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon is beállíthatod.
Árt a lusta betöltés az SEO-nak?
Nem. Helyesen megvalósítva a lusta betöltés nem árt az SEO-nak. A keresőbejárók indexelni tudják a lustán betöltött képeket és tartalmat. Az SEO-ra gyakorolt hatás általában pozitív, mert a lusta betöltés javítja az oldalsebesség-mutatókat, amelyeket a keresők rangsorolási jelekként használnak. A kulcsfeltétel, hogy a lusta betöltést ne alkalmazzák a hajtás feletti tartalomra, mert az késleltetné a Largest Contentful Paint mutatót, és negatívan hatna a Core Web Vitals pontszámokra.
Egy oldal minden képét lustán kell betölteni?
Nem. Azoknak a képeknek, amelyek az oldal első megnyitásakor láthatók, a hajtás felettieknek, azonnal be kell töltődniük. Ha ezekre a képekre lusta betöltést alkalmazol, késlelteted a Largest Contentful Paint pontszámot, ami rontja a Core Web Vitals mutatókat és a látogatói élményt. Csak a hajtás alatti képeknek használ a lusta betöltés. A gyakorlatban ez általában azt jelenti, hogy a nyitóképre és az oldal felső részének bármely kiemelkedő tartalmára soha nem szabad a lusta betöltési attribútumot alkalmazni.
Hogyan adhatok lusta betöltést a képekhez?
A szokásos képelemeknél add hozzá a loading="lazy" attribútumot közvetlenül a képcímkéhez. Minden nagyobb böngésző natívan támogatja ezt, JavaScript-könyvtár nélkül. Gondoskodj róla, hogy minden lustán betöltött képnek kifejezett width és height attribútuma is legyen, hogy a böngésző a kép betöltése előtt lefoglalja a megfelelő helyet, és elkerülje az elrendezésmozgást. Ne adj lusta betöltést a nyitóképhez vagy bármelyik, görgetés nélkül látható képhez.
Működik a lusta betöltés mobilon?
Igen. A loading="lazy" attribútummal történő natív lusta betöltést minden nagyobb mobilböngésző támogatja. Mobilon különösen előnyös, mert a mobilkapcsolatok lassabbak és változékonyabbak az asztali kapcsolatoknál, így a kezdeti oldalsúly csökkenésének nagyobb a hatása. Azok a mobilos látogatók is nyernek, akik nem görgetik végig az oldalt, mert nem töltik le azokat a képeket, amelyeket sosem érnek el.
Mi a különbség a lusta betöltés és az előtöltés között?
A lusta betöltés az erőforrások letöltését addig halasztja, amíg szükség nem lesz rájuk. Az előtöltés az ellenkezőjét teszi: azt mondja a böngészőnek, hogy egy konkrét erőforrást a lehető legkorábban töltsön le, mielőtt a betöltési sorozatban normál esetben találkozna vele. Az előtöltést a kritikus erőforrásoknál, például a nyitóképnél vagy a kulcsfontosságú betűtípusoknál használják, hogy a lehető leggyorsabban töltsenek be. A két technika kiegészíti egymást: töltsd elő a kritikus hajtás feletti erőforrásokat, és töltsd lustán mindazt, ami a hajtás alatt van.