Tabla de contenidos
Disse tre ting er defineret i starten for dem, der ikke er helt klar over, hvad de er.
Doven indlæsning
Lazy load, også fejlagtigt kaldet “doven”, er et designmønster, der bruges til at forsinke indlæsningen eller gengivelsen af et objekt, indtil det rigtige tidspunkt for brug for at undgå unødvendig forudindlæsning af objekter, der måske ikke bliver brugt. Det er mest almindeligt brugt til billeder og bidrager til bedre indlæsningstider og båndbreddebesparelser.
Renderingen af hvert billede forsinkes, indtil der er brug for det, og indlæses, når du ruller gennem viewporten.
Visningsport
Viewport, som ikke har en nøjagtig oversættelse, men ofte omtales som en “viewport”, blev skabt af Apple i 2007 til deres iPhone og var et virtuelt vindue i stil med det, Nokia havde designet til Mini Map. Det var, og er stadig, et metatag, der havde til formål at give websider mulighed for at kommunikere til mobilbrowsere, hvordan de ønskede, at webbrowseren skulle gengive siden.
Uden dette metatag gengav iPhones websider som et 980 px bredt vindue, som brugeren var nødt til at zoome ind og ud af. Med dette metatag kan du gengive en side i dens faktiske størrelse og derefter tilpasse layoutet, så det giver den slags side, vi alle forventer at se, når vi bruger en mobilbrowser. Til sidst blev det et standardmetatag, der understøttes af de fleste enheder, og det er det, der bruges i dag til det, der kaldes responsivt design.
Litespeed-cache
LiteSpeed Web Server er en webserversoftware, og LiteSpeed Cache for WordPress (LSCWP) er dens alt-i-et-plugin til siteacceleration, som indeholder en unik cache på hele serveren og en samling optimeringsfunktioner til WordPress-sites, der er hostet på en server, der kører under LiteSpeed.
Upload af billeder
Ideelt set skal alle billeder indlæses med forsinkelse, undtagen dem, der allerede er i viewporten, når siden indlæses, dvs. det, der vises ved første øjekast på skærmen, før du scroller.
Dette har et problem. Siden kan se grim ud ved første indlæsning, da billederne ikke vises, før der ikke er nogen bevægelse, og du er nødt til at udelukke de første to eller tre, der vises.
Selvom WordPress allerede har indbygget udskudt indlæsning siden version 5.5, og vi kan gøre dette med mange andre plugins såsom Perfmatters, er det ikke så enkelt at kontrollere Viewport for at begrænse, hvilke billeder du vil have vist, og hvilke, da vi kan bede den om ikke at udskyde indlæsningen af for eksempel de første to, tre eller fire, men vi kan ikke indstille eller ekskludere specifikke billeder for hver side på en enkel måde, og vi kan kun gøre det i bulk.
VPI
Den 25. juli tilføjede LiteSpeed i version 5.0-opdateringen af sit plugin en fleksibel mulighed for at løse dette, som de har kaldt VPI (Viewport Images).
VPI-tjenesten undersøger en URL og bestemmer, hvilke billeder der er synlige på en 1300×900 pixel skærm til desktopvisninger, og hvilke billeder der er synlige på en 480×800 skærm til mobilvisninger. Den returnerer en liste over disse billeder til LiteSpeed-pluginet, og LiteSpeed-pluginet udelukker dem fra langsom indlæsning, næste gang den cacher den pågældende URL.
Resultatet er en side, der gengives helt over folden, mens alle billeder under folden fortsætter med at opføre sig som før. Siden bevarer sin gode sidehastighedsscore, mens menneskelige besøgende møder en første fuld skærm med indhold.
Konfiguration
For at bruge denne nye tjeneste skal du naturligvis aktivere Lazy Load i pluginet.
VPI’s konfiguration er enkel, den har kun to kontakter.
Når viewport images (herefter VPI) er aktiveret, og cron er sat til ON, vil VPI-billederne blive genereret i baggrunden via en cron-baseret kø.
Hvis du ikke ønsker at aktivere cron, skal du behandle VPI-køen manuelt. Det kan du gøre via knappen“Manually run VPI queue“, som vises, når der er URL’er i køen, eller fra hoveddashboardet via indstillingen“Force cron“.
Det interessante og virkelig nyttige ved denne nye mulighed er, at du nu, både i den klassiske editor og i Gutenberg, i hvert indlæg og på hver side vil finde en ny boks i LiteSpeed-indstillingerne, hvor du helt kan deaktivere denne mulighed og fjerne alle billeder fra Viewport for at finjustere den efter din smag.
Alle billeder, der vises i disse bokse, vil ikke blive indlæst senere.
Hvis inputtet endnu ikke er blevet behandlet for VPI, vil begge bokse være tomme, men du kan manuelt tilføje billeder, som du ønsker, eller slette billeder fra begge bokse og tvinge en ny VPI-beregning.
Det gode og det mindre gode
Den store fordel ved LiteSpeeds VPI er utvivlsomt, at vi hurtigt og nemt kan beslutte, hvilke specifikke billeder vi ikke ønsker, at den udskudte indlæsning skal gælde for, og indstille det manuelt for hver side.
Ulempen er, at denne mulighed kommer i tillæg til QUIC.clouds andre WordPress-optimeringstjenester som Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) og Image Optimisation, som vi tilbydes et begrænset gratis gebyr for, hvilket måske ikke altid er nok, og derefter skal du købe kreditter, selvom de ikke er dyre.
Jeg besluttede at teste det for at sammenligne resultatet med det, der tilbydes af den indbyggede Lazy Load i WordPress Core og Perfmatters (med faste udelukkelser efter mængde), og i øjeblikket kan jeg se en forbedring inden for den lille margin, der allerede var tilbage.
Det endelige visuelle resultat er nøjagtigt det samme som med Perfmatters, da du blot kan ændre farven på pladsholderen fra grå til hvid og justere varigheden af“fade in”-effekten efter din smag med denne CSS.
/* Fade for Litespeed Lazy Load - DEL 1 - Før 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;
