Lusta képek betöltése: Complete Guide Plus 3 megvalósítási módszer

Lusta képek betöltése: Complete Guide Plus 3 megvalósítási módszer

Lusta képek betöltése: Complete Guide Plus 3 megvalósítási módszer
СОДЕРЖАНИЕ
02 июня 2020

Lusta képek betöltése: Teljes útmutató


Ahogy a funkcionalitás és az interaktivitás növekszik az interneten, az elmúlt években folyamatosan növekedett a weboldal mérete. 2018 elején, az átlagos oldalméret az interneten több mint 2 MB volt! Hogyan harcolhatok ezzel? Egy kicsit úgy nevezett lusta képek betöltése az egyik jobb megoldás.

Ebben az útmutatóban áttekintjük az összes bonyolult kép a lusta betöltésről, és beszéljen a megvalósításának három különböző módjáról.

Kezdjük a jövőbeni tartalomjegyzékkel:

  • Miért számít a lusta rakodás??
  • Mi a lusta betöltése??
  • A lusta betöltés előnyei
  • Mit kell figyelembe venni lusta képek betöltésekor?
  • 1. lehetőség: A lusta rakodást a semmiből végezze el (kezdőbarát: ⭐ / 5)
  • 2. lehetőség: Használjon JavaScript plugint (kezdőbarát: ⭐⭐ / 5)
  • 3. lehetőség: Használjon WordPress bővítményt (kezdőbarát: ⭐⭐⭐⭐⭐ / 5)
  • Következtetés

Miért számít a lusta rakodás??

A weboldal hatalmas terhelése elsősorban képeket, szkripteket, stíluslapokat, betűkészleteket és videókat tartalmaz. A képek azonban egy tipikus weboldal méretének több mint 60% -át teszik ki. A képek kritikus jelentőséggel bírnak egy weboldal kialakítása szempontjából is, így nem olyan, mintha megszabadulhat tőlük.

Optimalizálás nélkül a felhasználó böngészője letölti az összes erőforrást, mielőtt egy oldalt teljesen megjelenít. Ez megnövekszik a betöltési időkhöz, ami elvonhatja az embereket. A WooCommerce becslése szerint hogy az e-kereskedelem által nyújtott weboldal sebességének minden 100 méteres javulása esetén 1% -kal növelheti a bevételt.

Ilyen forgatókönyvben minden értelmet megtesz a teheridő optimalizálása érdekében. És mivel a képek az elsődleges tényezők a weblap méretének, ezekkel kezdve jó ötlet. Itt játszik szerepet a lusta rakodás.

Mi a lusta betöltése??

A lusta betöltés működésének megértéséhez itt található egy gyors animált GIF, amely bemutatja, hogyan jelennek meg a képek a CodeinWP-n.

Lusta képek betöltése - DemoLusta betöltési bemutató a CodeinWP-n

Amikor az oldal betöltődik, az összes képet nem töltik le azonnal. Amikor lefelé görget egy képhez, először lát egy homályos verziót, és a tényleges kép a háttérbe kezdődik. Ez a homályos kép a végkép alacsony felbontású változata, a méret egy részén. A kép letöltésének és megjelenítésének halasztása, amíg a felhasználó átgördül rajta, pontosan úgynevezett lusta töltés.

Habár "lusta" általában negatívan társítják, a lusta betöltés valójában jó gyakorlat, és az oldal általános optimalizálásával csökkenti az oldalbetöltési időket.

Jegyzet. Ebben a bejegyzésben a lusta képek betöltése folyamatát vizsgáljuk, de a lusta betöltése nem korlátozódik csupán a képekre – ugyanazt az ötletet használhatja más források, például videók, megjegyzések megjelenítésénél is (egy teljes szakasz található, hogyan kell ezt csinálni ban ben ez a poszt), és még betűtípusokat.

A lusta betöltés előnyei

Mivel a weboldal betöltési ideje nagymértékben hozzájárul az elhagyáshoz, a lusta képek feltöltése jelentősen megnövelheti a felhasználókat, akik az oldalon maradnak, amíg el nem töltődik, ami végül magasabb eladásokhoz vagy konverziókhoz vezethet.

A lusta képek betöltésének másik jelentős előnye az alacsonyabb kiszolgálói számlák. Csak azokat a képeket szolgálja ki, amelyeket a néző gördít át, és megtakarítja a sávszélességet azokon az oldalaknál, amelyeket nem nézett meg. Mivel a képek az oldal súlyának domináns részét képezik, ez potenciálisan alacsonyabb kiszolgálói költségeket eredményezhet.

Az összes kép elülső betöltése potenciálisan káros lehet az olvasók számára is. Ha a felhasználó korlátlan adattervvel rendelkezik az interneten, akkor ennek valószínűleg nem számít. A korlátozott adatokkal rendelkező tervek esetében azonban a néző adatait lusta képek betöltése révén menti a néző adatait.

Mit kell figyelembe venni lusta képek betöltésekor?

Most, hogy úgy döntött, hogy a lusta betöltést a webhelyén a megfelelő módon hajtja végre, engedje át néhány fontos szempontot, hogyan lehet ezt megtenni..

Azonosítsa azokat a képeket, amelyeket szeretne betölteni

Nem minden kép ideális a lusta betöltéshez. Például nem szeretné, ha lustán betölti azokat, amelyek a terv felépítéséhez nélkülözhetetlenek, és mindent helyes megjelenítéshez be kell töltenie..

A lusta betöltésekor csak azokat a képeket szabad figyelembe venni, amelyek nem jelennek meg a képernyőn, és nem járulnak hozzá az oldal szerkezetéhez. Általában ezek a képek a  elemek, amelyek megjelennek az oldal törzsében.

Válasszon képet helyőrzőket

A következő dolog, amelyet figyelembe kell venni, az a közbenső kép vagy szín, amelyet akkor kell megjeleníteni, amikor a képet betöltik, miután a néző átgördült rajta. A kép betöltési ideje attól függ, hogy milyen nagy a kép, és akár néhány másodpercet is igénybe vehet. Ezért mérlegelnie kell, hogy mit szeretne használni a betöltési idő alatt.

Kétféle irány van, amelyet a fejlesztők általában figyelembe vesznek ebben a tekintetben:

  • Használja háttérként a kép domináns színét
  • Használjon alacsony minőségű képet

alacsony restartású helyőrzőPélda a képek alacsony minőségű változataira, mint helyettesítőkre a lusta betöltéshez

A helyes választás itt az Ön webhelyének kialakításától és attól függ, hogy mit szeretne megjeleníteni a felhasználónak, amikor a kép betöltődik.

Bár az egyik módszer a képek betöltése, mihelyt belépnek a nézet portba, érdemes lehet egy pufferidőt hozzáadni, mielőtt ez megtörténik – hogy a felhasználó soha ne látja a helyőrzőt.

Vigyázzon, ha képeket tölt be az oldal felépítésétől

Mielőtt egy kép betöltődne, előfordulhat, hogy 0 képpont méretben jelenik meg. Ez nem ideális a tervezési struktúra fenntartásához.

Ez könnyen megváltoztathatja az oldal elrendezését és a szöveg helyzetét. Egy egyszerű megoldás az, ha azonnal hozzáadja a képhez a megfelelő méretet – ez biztosítja, hogy a kép elem mérete megegyezzen a betöltés után.

A fenti megfontolások hiányában nézzük meg most, hogyan valósíthatjuk meg a lusta betöltést a WordPress webhelyen.

1. lehetőség: A lusta rakodást a semmiből végezze el

Először nézzük meg, hogyan lehet ezt beépülő modulok használata nélkül megtenni. Ezt az opciót azoknak ajánljuk, akiknek tetszik a JavaScript. Ideális esetben a következő lépéseket kell megtenni:

  1. A kép betöltésének megakadályozása az oldal betöltésekor: Ha a kép URL-jét vagy elérési útját adja meg a  címkével, a képet a böngésző töltheti le az oldal betöltése során. Annak megakadályozása érdekében, hogy a böngésző letöltje a képet, meg kell adnia a kép helyét a data-src attribútumban.  címke helyett.
  2. Regisztrálja az eseménykezelő funkcióit a JavaScript-ben, hogy ellenőrizze az elemek két eseményt: betöltése és görgetése.
  3. Amikor egy elem bekerül a nézet portba, töltse be az data-src elem értékét az src elembe, amely a böngészőt a kép betöltésére indítja.

E folyamat egyszerű végrehajtását magyarázta Robin Osborne és a demo elérhető a CodePen oldalon.

1.1. Lehetőség: Használja az metszéspont-megfigyelő API-t

A kereszteződés megfigyelő API segít azonosítani a DOM elemeket, amelyek az adott időpontban a nézetablakban vannak. Ez egy tisztább módszer a lusta terhelés végrehajtására anélkül, hogy eseménykezelő funkciókat írnánk. A lusta terhelés végrehajtására szolgáló kódsorok száma is jelentősen csökken. A böngésző kompatibilitása azonban továbbra is probléma.

A Google Developers Blog magyarázza a kereszteződés-megfigyelő API megvalósítását ez a CodePen bemutató.

2. lehetőség: Használjon JavaScript plugint

A fentiekben tárgyalt két lehetőség középszintű ismerete szükséges a JavaScriptről. Ha a lusta betöltés könnyebb megvalósítását szeretné elvégezni anélkül, hogy egy nagy plugint kellene betöltenie a szerverre, akkor kipróbálhatja az egyszerű Java plugint, Blazy.

Az bLazy könyvtár 2 KB-nál kisebb méret nem jelent további terhelést a hasznos rakományon, miközben lehetővé teszi a lusta betöltött képek egyszerű kezelését.

A bLazy könyvtár használatához meg kell inicializálni  elemek a következő attribútumokkal:

  • osztály: állítsa be az összes osztályt  b-lusta címkék
  • src: link a helyőrző képhez
  • data-src: link a betöltött képhez
  • data-src-small: link a képhez, hogy 420 pixel vastagabb képernyőkre töltsön be

Inicializálnia kell a bLazy könyvtárat csupán néhány sornyi kódban, és minden kép lusta betöltéssel jelenik meg..

; (függvény () {
// Inicializálás
var bLazy = új Blazy ();
}) ();

A CodePen bemutató elérhető itt.

3. lehetőség: Használjon WordPress bővítményt

Van néhány lehetőség odakint, amelyek lusta rakodást eredményezhetnek. Leginkább:

Ezek a bővítmények automatikusan kezelik a lusta betöltést. Mindegyikhez tartozik néhány szép oldalsó funkció.

Például a WP Rocket által készített Lazy Load szintén lusta tölti be a YouTube videókat, és miniatűrre cseréli őket.

Az Optimole mellett a ThemeIsle család legújabb kiegészítéseként sziklaszilárd képoptimalizálást is végez (amint itt teszteltük) meglehetősen fejlett funkciókkal. Például dinamikus átméretezést ad a felhasználó képernyőmérete alapján.


Képoptimalizálás és lusta terhelés: Optimole Képoptimalizálás & Lazy Load – készítette Optimole

Szerzői): Optimole

Aktuális változat: 2.3.1

Utolsó frissítés: 2020. április 21

optimole-wp.zip


96% Értékelések


50.000 + telepítések


WP 4.7 + szükséges

Mint a legtöbb pluginnél, a lusta betöltéshez csak telepítse a plugint, és engedélyezze a funkciót a plugin vezérlőpultján:

Optimole a lusta képek betöltésekor

Következtetés

Ez a bejegyzés feltárta a lusta képek betöltésének szükségességét és előnyeit. Három különféle módszert tárgyaltunk a lusta betöltés végrehajtásáról a WordPress webhelyen:

  • Ha középfokú JavaScript-jártassággal rendelkezik, a lusta betöltést a nulláról végrehajthatja
  • Ha ismer valamilyen programozást, de nem kíván plugint, könnyű JavaScript könyvtárat, a bLazy opció
  • Ha egy kattintással szeretne megoldást találni a lusta képek feltöltésére a webhelyére, kérjen egy plugint, például az Optimole

Mit gondolsz a lusta rakodásról? Megpróbálta használni webhelye teljesítményének javítására?

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector