A Google Keresési Podcast -on történő keresésének nemrégiben bekövetkező epizódjában Martin Splitt és John Mueller megvitatták, amikor a lusta betöltés segít, és mikor lassíthatja az oldalakat.
A Splitt egy valós példát használt a fejlesztők.google.com webhelyen egy közös mintázat szemléltetésére: minden kép lusta alapértelmezés szerint késleltetheti a legnagyobb tartalomfestéket (LCP), ha a soronkénti látványt tartalmazza.
Splitt mondta:
„Az a tartalomkezelő rendszer, amelyet a fejlesztőkhöz.google.com webhelyen használunk, az összes képet lusta betöltéshez adja meg, ami nem nagyszerű.”
A Splitt a példát arra használja, hogy elmagyarázza, miért kockázatos a lusta-betöltő hős képek: azt mondja a böngészőnek, hogy várjon a legszembetűnőbb elemre, amely visszaszoríthatja az LCP-t, és elrendezést okozhat, ha a méretek nem vannak beállítva.
Splitt mondta:
„Ha lusta betöltést használ egy azonnal látható képen, akkor valószínűleg hatással lesz a legnagyobb tartalommal ellátott festékére. Ez olyan, mint szinte garantált.”
Hogyan késik a lusta terhelés az LCP -t
Az LCP azt a pillanatot méri, hogy a kezdeti nézetablakban a legnagyobb szöveget vagy képet festették.
Általában a böngésző előterhelésének szkennelője korán találja meg a hős képét, és kiemelt prioritással tölti be, így gyorsan festhet.
Amikor hozzáadod loading="lazy" Ugyanazon hősre megváltoztatja a böngésző ütemezését:
- A képet alacsonyabb prioritásnak tekintik, tehát más források először kezdődnek.
- A böngésző vár az elrendezésig és az egyéb munka előrehaladásáig, mielőtt a hős képet kérné.
- A hős ezután a szkriptek, stílusok és egyéb eszközök után a sávszélességért versenyez.
Ez a késleltetés később megváltoztatja a legnagyobb elem festési idejét, ami növeli az LCP -t.
A lassú hálózatokon vagy a CPU korlátozott eszközökön a hatás észrevehetőbb. Ha hiányzik a szélesség és a magasság, akkor a késői kép is elrendezheti az elrendezést, és úgy érzi, hogy „zavaró”.
SEO kockázat néhány könyvtárral
A böngészők most támogatják a beépítést loading Attribútum a képekhez és az iframe -khez, amely a szokásos forgatókönyvekben eltávolítja a nehéz javascript igényét. A WordPress alapértelmezés szerint elfogadta a natív lusta betöltést, segítve a terjedést.
Splitt mondta:
„A böngészők natív attribútumot kaptak a képekhez és az iframákhoz, a betöltési attribútumhoz … ami a böngészőt gondozza a lusta betöltésről.”
A régebbi vagy egyedi lusta betöltő könyvtárak elrejthetik a kép URL-jeit a nem szabványos attribútumokban. Ha az igazi URL soha nem száll be src vagy srcset A HTML Google -renderékben a képeket nem kaphatják meg az indexelés céljából.
Splitt mondta:
„Láttuk több lusta betöltési könyvtárat … amelyek valamilyen adatforrás-attribútumot használnak, nem pedig a forrás attribútumot … ha nem a forrás attribútumban van, akkor nem fogjuk felvenni, ha valamilyen egyedi attribútumban van.”
Hogyan lehet ellenőrizni az oldalait
Használja a Search Consol URL -ellenőrzését a megjelenített HTML és erősítse meg, hogy a soronkénti képek és a lusta betöltött modulok standard attribútumokra oldódnak. Kerülje a képernyőképen való támaszkodást.
A Splitt tanácsos:
„Ha a megjelenített HTML úgy néz ki, mintha a képcímke forrás attribútumában található összes kép URL -t tartalmazza … akkor jól leszel.”
Rangsorolási hatás
A Splitt a rangsorolás hatásait szerénynek tartja. Az alapvető webes életmódok hozzájárulnak a rangsoroláshoz, de a legtöbb esetben „apró perces tényezőnek” nevezte.
Mit kell tenned a következőkben
- Tartsa a hősöket és más soronkénti képeket lelkesen, szélességgel és magassággal.
- Használja a bennszülöttet
loading="lazy"a sor alatti képekhez és az iframákhoz. - Ha az előnézetek, videók vagy dinamikus szakaszok könyvtárára támaszkodik, ellenőrizze, hogy a végső jelölés a standard attribútumokban valós URL -eket tesz ki, és erősítse meg a megjelenített HTML -ben.
Előre nézve
A lusta betöltés szelektíven hasznos. Kezelje ezt a nem kritikus tartalom opt-in-jének.
Ellenőrizze a megvalósítását a renderelt HTML segítségével, és nézze meg, hogy az LCP hogyan tendenciákat mutat az idő múlásával.
