Tabla de contenidos
Dessa tre saker definieras från början för dem som inte är helt på det klara med vad de är.
Lat belastning
Lazy load, även felaktigt kallat "lazy" för en bokstavlig översättning, är ett designmönster som används för att fördröja laddningen eller renderingen av ett objekt tills rätt tidpunkt för användning för att undvika onödig förladdning av objekt som kanske inte används. Det används oftast för bilder och bidrar till bättre laddningstider och bandbreddsbesparingar.
Renderingen av varje bild fördröjs tills den behövs och laddas när du scrollar genom viewporten.
Visningsfönster
Viewport, som inte har någon exakt översättning, men ofta kallas för "viewport", skapades av Apple 2007 för iPhone och var ett virtuellt fönster som liknade det som Nokia hade utformat för Mini Map. Det var, och är fortfarande, en metatagg som var avsedd att göra det möjligt för webbsidor att kommunicera till mobila webbläsare hur de ville att webbläsaren skulle återge sidan.
Utan denna metatagg visade iPhones webbsidor som ett 980 px brett fönster som användaren var tvungen att zooma in och ut från. Med den här metataggen kan du återge en sida i dess faktiska storlek och sedan anpassa layouten för att ge den typ av sida som vi alla förväntar oss att se när vi använder en mobil webbläsare. Så småningom blev det en standardmetatagg som stöds av de flesta enheter och är den som används idag för det som kallas responsiv design.
Litespeed Cache
LiteSpeed Web Server är en webbserverprogramvara och LiteSpeed Cache för WordPress (LSCWP) är dess allt-i-ett-plugin för webbplatsacceleration, som har en unik serverövergripande cache och en samling optimeringsfunktioner för WordPress-webbplatser som finns på en server som körs under LiteSpeed.
Ladda upp bilder
Helst ska alla bilder laddas med fördröjd laddning, förutom de som redan finns i viewporten när sidan laddas, dvs. det som visas vid första anblicken på skärmen innan du scrollar.
Detta har ett problem. Sidan kan se ful ut vid den första laddningen eftersom bilderna inte visas förrän det inte finns någon rörelse och du måste utesluta de första två eller tre som visas.
Även om WordPress redan har inbyggd uppskjuten laddning sedan version 5.5 och vi kan göra detta med många andra plugins som Perfmatters, kontrollera Viewport för att begränsa vilka bilder du vill ska visas och vilka är inte så enkelt, eftersom vi kan berätta för den att inte uppskjuten laddning till exempel de första två, tre eller fyra, men vi kan inte ställa in eller utesluta specifika bilder för varje sida på ett enkelt sätt och vi kan bara göra det i bulk.
VPI
Den 25 juli lade LiteSpeed i 5.0-uppdateringen av sitt plugin till ett flexibelt alternativ för att åtgärda detta som de har kallat VPI (Viewport Images).
VPI-tjänsten undersöker en URL och avgör vilka bilder som är synliga på en 1300×900 pixelskärm för skrivbordsvisningar och vilka bilder som är synliga på en 480×800-skärm för mobilvisningar. Den returnerar en lista över dessa bilder till LiteSpeed-pluginet, och LiteSpeed-pluginet utesluter dem från långsam laddning nästa gång den cachar den webbadressen.
Resultatet är en sida som renderas helt ovanför vecket, medan alla bilder under vecket fortsätter att bete sig som tidigare. Sidan behåller sin goda sidhastighetspoäng, medan mänskliga besökare möter en första helskärm med innehåll.
Konfiguration
För att använda denna nya tjänst måste du naturligtvis aktivera Lazy Load i pluginet.
VPI:s konfiguration är enkel, den har bara två strömbrytare.
När vyportsbilder (hädanefter VPI) är aktiverade och cron är inställt på ON, kommer VPI-bilderna att genereras i bakgrunden via en cron-baserad kö.
Om du inte vill aktivera cron måste du bearbeta VPI-kön manuellt. Du kan göra detta från knappen"Kör VPI-kön manuellt" som visas när det finns URL:er i kön eller från huvudinstrumentpanelen från alternativet"Tvinga cron".
Det intressanta och riktigt användbara med det här nya alternativet är att nu, både i den klassiska redigeraren och i Gutenberg, i varje inlägg och sida hittar du en ny ruta i LiteSpeed-alternativen där du helt kan inaktivera det här alternativet och ta bort alla bilder från Viewport för att finjustera det efter eget tycke och smak.
Bilder som visas i dessa rutor kommer inte att laddas i efterhand.
Om indata ännu inte har bearbetats för VPI visas båda rutorna tomma, men du kan manuellt lägga till bilder som du vill eller ta bort bilder från båda rutorna och tvinga fram en ny VPI-beräkning.
Det goda och det mindre goda
Den stora fördelen med LiteSpeeds VPI är utan tvekan att vi snabbt och enkelt kan bestämma vilka specifika bilder vi inte vill att den uppskjutna laddningen ska gälla för och ställa in det manuellt för varje sida.
Haken är att detta alternativ är utöver QUIC.clouds andra WordPress-optimeringstjänster som Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) och Image Optimisation för vilka vi erbjuds en begränsad gratisavgift, vilket kanske inte alltid är tillräckligt, och därefter måste du köpa krediter, även om de inte är dyra.
Jag bestämde mig för att testa det för att jämföra resultatet med det som erbjuds av den inbyggda Lazy Load av WordPress Core och Perfmatters (med fasta uteslutningar av kvantitet) och för tillfället kan jag se en förbättring inom den lilla marginal som redan var kvar.
Det slutliga visuella resultatet är exakt detsamma som med Perfmatters, eftersom du helt enkelt kan ändra färgen på platshållaren från grå till vit och justera varaktigheten för"fade in"-effekten efter eget tycke med denna CSS.
/* Fade för Litespeed Lazy Load - DEL 1 - Före Lazy Load */
img[data-lazyloaded]{
opacity: 0;
}
/* DEL 2 - Efter Lazy Load */
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;
}
