Queste tre cose sono definite all'inizio per coloro che non hanno chiaro cosa siano.
Lazy Load
Il caricamento pigro, chiamato anche erroneamente "lazy" per una traduzione letterale, è un modello di progettazione che viene utilizzato per ritardare il caricamento o il rendering di un oggetto fino al momento giusto dell'utilizzo, per evitare un pre-caricamento non necessario di oggetti che potrebbero non essere utilizzati. È più comunemente utilizzato per le immagini e contribuisce a migliorare i tempi di caricamento e a risparmiare la larghezza di banda.
Il rendering di ogni immagine viene ritardato fino a quando non è necessario, caricandosi man mano che si scorre la finestra di visualizzazione
Viewport
Viewport, che non ha una traduzione esatta, ma è spesso chiamato "finestra grafica", è stato creato da Apple 2007 per il suo iPhone era una finestra virtuale simile a quella che Nokia aveva progettato per Mini Map. Si trattava di un meta tag che aveva lo scopo di fornire un modo per le pagine web di comunicare ai browser mobili come volevano che il browser web rendesse la pagina.
Senza questo meta tag, gli iPhone visualizzavano le pagine web come una finestra larga 980 px che l'utente doveva ingrandire e rimpicciolire. Con questo meta tag, si può eseguire il rendering di una pagina alle sue dimensioni reali e poi adattare il layout per fornire il tipo di pagina che tutti ci aspettiamo di vedere quando si utilizza un browser mobile. Alla fine è diventato un meta tag standard supportato dalla maggior parte dei dispositivi ed è quello utilizzato oggi per il cosiddetto responsive design.
Cache Litespeed
LiteSpeed Web Server è un server web e un software web server per WordPress (LSCWP) LiteSpeed Cache per WordPress (LSCWP) è il suo plugin di accelerazione del sito tutto in uno, che presenta una cache unica a livello di server e una serie di funzioni di ottimizzazione per i siti che utilizzano WordPress e sono ospitati su un server WordPress.
Caricamento delle immagini
Idealmente, tutte le immagini dovrebbero essere caricate in differita, ad eccezione di quelle che si trovano già nella finestra di visualizzazione al momento del caricamento iniziale della pagina, vale a dire ciò che viene visualizzato a prima vista sullo schermo prima dello scorrimento.
Questo ha un problema. La pagina può apparire sgradevole al primo caricamento, poiché le immagini non vengono mostrate fino a quando non c'è alcun movimento e bisogna escludere le prime due o tre che vengono mostrate
Sebbene WordPress abbia il caricamento differito nativo dalla versione 5.5 e questo può essere fatto con molti altri plugin, come ad esempio Perfmattersil controllo Viewport per limitare quali immagini in particolare si desidera visualizzare e quali no non è così semplice, perché possiamo dirgli di non eseguire il caricamento differito, ad esempio, delle immagini che vogliamo visualizzare, ma non possiamo impostare o escludere le immagini che vogliamo visualizzare i primi due, tre o quattroma non possiamo impostare o escludere immagini specifiche per ogni pagina in modo semplice e possiamo farlo solo con l'opzione alla rinfusa.
VPI
Il 25 luglio, LiteSpeed ha aggiunto nell'aggiornamento della versione 5.0 del suo plugin un'opzione flessibile per risolvere questo problema, che ha chiamato VPI (Viewport Images).
Il servizio VPI esamina un URL e determina quali immagini sono visibili su uno schermo di 1300×900 pixel per le visualizzazioni desktop e quali immagini sono visibili su uno schermo di 480×800 per le visualizzazioni mobile. Restituisce un elenco di queste immagini al plugin LiteSpeed, e il plugin LiteSpeed le esclude dal caricamento lento la volta successiva che memorizza nella cache quell'URL.
Il risultato è una pagina che viene visualizzata completamente sopra la piega, mentre tutte le immagini sotto la piega continuano a comportarsi come prima. La pagina mantiene il suo buon punteggio di velocità di pagina, mentre i visitatori umani incontrano una prima schermata completa di contenuti.
Configurazione
Per utilizzare questo nuovo servizio, naturalmente, è necessario attivare Lazy Load pigro nel plugin.
La sua configurazione è molto semplice, basta attivarla e ha solo due interruttori.
Quando le immagini viewport (di seguito VPI) sono abilitate e cron è impostato su ON, le immagini VPI saranno generate in background tramite una coda basata su cron.
Se non desidera attivare cron, dovrà elaborare la coda VPI manualmente. Può farlo dal pulsante"Esegui manualmente la coda VPI" che apparirà quando ci sono UR nella coda. Oppure, dalla dashboard principale, dall'opzione"Forza cron".
La cosa interessante e davvero utile di questa nuova opzione è che ora, sia nell'editor classico che in Gutenberg, in ogni post e pagina troverà un nuovo riquadro nelle opzioni LiteSpeed, dove potrà disattivare completamente questa opzione e rimuovere qualsiasi immagine dalla finestra di visualizzazione, per regolare il tutto a suo piacimento.
Le immagini che appaiono in queste caselle non saranno caricate in differita
Se l'input non è ancora stato elaborato per il VPI, entrambe le caselle appariranno vuote, anche se può aggiungere manualmente le immagini che desidera o eliminare le immagini da entrambe le caselle e forzare un ricalcolo del VPI.
I buoni e i meno buoni
Senza dubbio, il grande vantaggio del VPI di LiteSpeed è quello di poter decidere in modo semplice e rapido quali sono le immagini specifiche a cui non vogliamo applicare il caricamento differito e impostarlo manualmente per ogni pagina.
Il problema è che questa opzione si aggiunge agli altri servizi di ottimizzazione di WordPress di QUIC.cloud come Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) e Image Optimisation, per i quali ci viene offerta una quota gratuita limitata, che potrebbe non essere sempre sufficiente, e successivamente bisogna acquistare dei crediti, anche se non costoso.
Ho deciso di testarlo per confrontare il risultato con il Lazy Load nativo di WordPress Core e Perfmatters (con esclusioni fisse per quantità) e finora posso notare un miglioramento all'interno del piccolo margine che era già stato lasciato.
Il risultato visivo finale è esattamente lo stesso di quello ottenuto con Perfmatters, in quanto è sufficiente cambiare il colore del segnaposto da grigio a bianco e regolare la durata dell'effetto"fade in" con questo CSS.
/* Fade para Lazy Load de Litespeed - PART 1 - Before Lazy Load */
img[data-lazyloaded]{
opacity: 0;
}
/* PART 2 - Upon 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;
}
