Tabla de contenidos
Ezt a három dolgot az elején definiáljuk azok számára, akiknek nem teljesen világos, hogy mik ezek.
Lusta betöltés
A Lazy load, vagy szó szerinti fordításban tévesen "lusta" néven is emlegetett tervezési minta, amelyet arra használnak, hogy egy objektum betöltését vagy renderelését a megfelelő felhasználási időpontig késleltessék, hogy elkerüljék az esetleg nem használt objektumok felesleges előtöltését. Leggyakrabban képek esetében használják, és hozzájárul a jobb betöltési időkhöz és a sávszélesség megtakarításához.
Az egyes képek renderelése késleltetve van, amíg szükség van rá, a betöltés a nézetablakon való görgetés során történik.
Nézetablak
AViewport, amelynek nincs pontos fordítása, de gyakran "nézetablakként" emlegetik, az Apple 2007-ben hozta létre az iPhone számára, és egy virtuális ablak volt, amely hasonló volt a Nokia által a Mini Map számára tervezetthez. Ez egy meta tag volt, és még mindig az, amely arra szolgált, hogy a weboldalaknak módot biztosítson arra, hogy kommunikálják a mobil böngészőkkel, hogy a webböngésző hogyan szeretné, ha az oldal megjelenítené az oldalt.
E meta-tag nélkül az iPhone-ok a weboldalakat egy 980 px széles ablakként jelenítették meg, amelyet a felhasználónak ki és be kellett nagyítania. Ezzel a meta taggel az oldalt a tényleges méretben lehet megjeleníteni, majd az elrendezést úgy alakítani, hogy olyan oldalt kapjunk, amilyet mindannyian elvárunk a mobilböngésző használatakor. Végül a legtöbb eszköz által támogatott szabványos meta-taggá vált, és ez az, amit ma az úgynevezett reszponzív tervezéshez használnak.
Litespeed Cache
A LiteSpeed Web Server egy webkiszolgáló szoftver, a LiteSpeed Cache for WordPress (LSCWP) pedig annak mindenre kiterjedő webhelygyorsító bővítménye, amely egyedülálló, az egész szerverre kiterjedő gyorsítótárat és optimalizálási funkciók gyűjteményét kínálja a LiteSpeed alatt futó szerveren üzemeltetett WordPress webhelyek számára.
Képek feltöltése
Ideális esetben minden képnek késleltetve kellene betöltődnie, kivéve azokat, amelyek már az oldal kezdeti betöltésekor a nézetablakban vannak, azaz amelyek első pillantásra megjelennek a képernyőn, mielőtt görgetnénk.
Ezzel van egy probléma. Az oldal csúnyán nézhet ki az első betöltéskor, mivel a képek addig nem jelennek meg, amíg nincs mozgás, és ki kell zárni az első két-három megjelenő képet.
Bár a WordPress már az 5.5-ös verzió óta rendelkezik natív halasztott betöltéssel, és ezt sok más pluginnal is megtehetjük, például a Perfmatters-szel, a Viewport vezérlése, hogy korlátozzuk, mely képeket szeretnénk, hogy megjelenjenek, és melyeket nem olyan egyszerű, mivel meg tudjuk mondani neki, hogy ne töltse be halasztottan például az első kettőt, hármat vagy négyet, de nem tudjuk egyszerűen beállítani vagy kizárni az egyes oldalakhoz tartozó konkrét képeket, és csak tömegesen tudjuk ezt megtenni.
VPI
Július 25-én a LiteSpeed a plugin 5.0-s verziófrissítésében egy rugalmas lehetőséget adott a probléma megoldására, amit VPI-nek (Viewport Images) nevezett el.
A VPI szolgáltatás megvizsgálja az URL-t, és meghatározza, hogy asztali nézetek esetén mely képek láthatók 1300×900 pixeles képernyőn, mobil nézetek esetén pedig mely képek láthatók 480×800-as képernyőn. Visszaadja e képek listáját a LiteSpeed plugin számára, és a LiteSpeed plugin kizárja őket a lassú betöltésből, amikor legközelebb gyorsítótárba helyezi az adott URL-t.
Az eredmény egy olyan oldal lesz, amely teljesen a hajtás felett renderel, míg a hajtás alatti képek továbbra is úgy viselkednek, mint korábban. Az oldal megtartja a jó oldalsebességi pontszámát, miközben az emberi látogatók az első teljes képernyőnyi tartalommal találkoznak.
Konfiguráció
Az új szolgáltatás használatához természetesen aktiválni kell a Lazy Load -ot a bővítményben.
A VPI konfigurációja egyszerű, csak két kapcsoló van.
Ha a viewport képek (a továbbiakban VPI) engedélyezve vannak, és a cron be van kapcsolva, a VPI képek a háttérben generálódnak egy cron-alapú várólistán keresztül.
Ha nem akarja engedélyezni a cron-t, akkor a VPI várólistát manuálisan kell feldolgoznia. Ezt megteheti a"Manuálisan futtatni a VPI várólistát" gomb segítségével, amely akkor jelenik meg, amikor URL-ek vannak a várólistában, vagy a fő műszerfalon a"Force cron" opcióból.
Az érdekes és igazán hasznos dolog ezzel az új opcióval kapcsolatban az, hogy mostantól mind a klasszikus szerkesztőben, mind a Gutenbergben minden egyes bejegyzésben és oldalon találsz egy új dobozt a LiteSpeed beállítások között, ahol teljesen kikapcsolhatod ezt az opciót, és eltávolíthatsz minden képet a Viewportból, hogy finomhangold a saját ízlésed szerint.
Az ezekben a dobozokban megjelenő képek nem fognak halasztottan betöltődni.
Ha a bemenet még nem került feldolgozásra a VPI szempontjából, mindkét mező üresen fog megjelenni, bár manuálisan tetszés szerint képeket adhat hozzá, vagy törölhet képeket mindkét mezőből, és kikényszerítheti a VPI újraszámítását.
A jó és a kevésbé jó
Kétségtelen, hogy a LiteSpeed VPI nagy előnye, hogy gyorsan és egyszerűen, egy szeszélyből eldönthetjük, hogy mely konkrét képeket nem akarjuk, hogy a halasztott betöltés érvényesüljön, és ezt manuálisan állíthatjuk be minden egyes oldalra.
A bökkenő az, hogy ez a lehetőség a QUIC. cloud egyéb WordPress-optimalizálási szolgáltatásai, mint a Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) és Image Optimization mellett van, amelyekhez korlátozottan ingyenes díjat kapunk, ami nem biztos, hogy mindig elég, és utána krediteket kell vásárolnunk, bár ezek nem drágák.
Úgy döntöttem, hogy tesztelem, hogy összehasonlítsam az eredményt a WordPress Core és a Perfmatters natív Lazy Load-ja által kínáltal (fix kizárásokkal mennyiség szerint), és egyelőre javulást látok azon a kis margón belül, ami már megmaradt.
A végső vizuális eredmény pontosan ugyanaz, mint a Perfmatters esetében, mivel ezzel a CSS-szel egyszerűen megváltoztathatod a helyőrző színét szürkéről fehérre, és tetszésed szerint állíthatod be a"beolvadás" effektus időtartamát.
/* Fade for Litespeed Lazy Load - 1. RÉSZ - Lazy Load előtt */
img[data-lazyloaded]{
opacitás: 0;
}
/* 2. RÉSZ - Lusta betöltés után */
img.litespeed-loaded{
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}
