Aceste trei lucruri sunt definite de la început pentru cei care nu știu foarte bine ce sunt.
Încărcare leneșă
Încărcarea leneșă, denumită greșit și "lazy" pentru o traducere literală, este un model de proiectare utilizat pentru a amâna încărcarea sau redarea unui obiect până la momentul potrivit de utilizare pentru a evita preîncărcarea inutilă a obiectelor care ar putea să nu fie utilizate. Este cel mai frecvent utilizat pentru imagini și contribuie la îmbunătățirea timpilor de încărcare și la economisirea lățimii de bandă.
Redarea fiecărei imagini este întârziată până când este necesară, încărcându-se pe măsură ce se derulează prin viewport.
Viewport
Viewport, care nu are o traducere exactă, dar este adesea denumit "viewport", a fost creat de Apple în 2007 pentru iPhone și era o fereastră virtuală similară celei pe care Nokia o concepuse pentru Mini Map. A fost, și încă mai este, un meta tag destinat să ofere o modalitate prin care paginile web să comunice browserelor mobile modul în care doreau ca acestea să redea pagina.
Fără această metaetichetă, telefoanele iPhone redau paginile web ca o fereastră de 980 px lățime din care utilizatorul trebuia să mărească sau să micșoreze imaginea. Cu această metaetichetă, aveți posibilitatea de a reda o pagină la dimensiunea sa reală și apoi de a adapta aspectul pentru a oferi tipul de pagină pe care ne așteptăm cu toții să o vedem atunci când folosim un browser mobil. În cele din urmă, a devenit un meta tag standard acceptat de majoritatea dispozitivelor și este cel folosit astăzi pentru ceea ce este cunoscut sub numele de responsive design.
Litespeed Cache
LiteSpeed Web Server este un software pentru servere web, iar LiteSpeed Cache for WordPress (LSCWP) este pluginul său de accelerare a site-urilor all-in-one, oferind o memorie cache unică la nivelul întregului server și o colecție de caracteristici de optimizare pentru site-urile WordPress găzduite pe un server care rulează sub LiteSpeed.
Încărcarea imaginilor
În mod ideal, toate imaginile ar trebui să se încarce amânat, cu excepția celor care se află deja în viewport atunci când pagina se încarcă inițial, adică ceea ce este afișat la prima vedere pe ecran înainte de a derula.
Acest lucru are o problemă. Pagina poate arăta urât la prima încărcare, deoarece imaginile nu sunt afișate până când nu mai există nicio mișcare și trebuie să excludeți primele două sau trei care sunt afișate.
Deși WordPress are deja încărcare amânată nativă încă de la versiunea 5.5 și putem face acest lucru cu multe alte pluginuri, cum ar fi Perfmatters, controlul Viewport pentru a limita imaginile pe care doriți să le afișați și care dintre ele nu este atât de simplu, deoarece putem să-i spunem să nu încarce amânat, de exemplu, primele două, trei sau patru, dar nu putem seta sau exclude imagini specifice pentru fiecare pagină într-un mod simplu și putem face acest lucru doar în bloc.
VPI
Pe 25 iulie, LiteSpeed a adăugat în actualizarea versiunii 5.0 a plugin-ului său o opțiune flexibilă pentru a rezolva acest lucru, pe care a numit-o VPI (Viewport Images).
Serviciul VPI examinează o adresă URL și determină ce imagini sunt vizibile pe un ecran de 1300×900 pixeli pentru vizualizări desktop și ce imagini sunt vizibile pe un ecran de 480×800 pentru vizualizări mobile. Acesta returnează o listă a acestor imagini către pluginul LiteSpeed, iar pluginul LiteSpeed le exclude de la încărcarea lentă data viitoare când va pune în cache acel URL.
Rezultatul este o pagină care se afișează complet deasupra pliului, în timp ce toate imaginile de sub pliu continuă să se comporte ca înainte. Pagina își păstrează scorul bun de viteză a paginii, în timp ce vizitatorii umani întâlnesc un prim ecran complet de conținut.
Configurație
Pentru a utiliza acest nou serviciu, trebuie, evident, să activați Lazy Load în plugin.
Configurația VPI este simplă, are doar două comutatoare.
Atunci când imaginile viewport (în continuare VPI) sunt activate și cron este setat la ON, imaginile VPI vor fi generate în fundal prin intermediul unei cozi bazate pe cron.
Dacă nu doriți să activați cron, va trebui să procesați coada VPI manual. Puteți face acest lucru de la butonul"Manually run VPI queue" (Executați manual coada VPI) care va apărea atunci când există URL-uri în coadă sau din tabloul de bord principal de la opțiunea"Force cron" (Forțați cron).
Ceea ce este interesant și cu adevărat util la această nouă opțiune este că acum, atât în editorul clasic, cât și în Gutenberg, în fiecare postare și pagină veți găsi o nouă casetă în opțiunile LiteSpeed unde puteți dezactiva complet această opțiune și elimina orice imagine din Viewport pentru a o ajusta în mod fin pe placul dumneavoastră.
Orice imagine care apare în aceste căsuțe nu va fi încărcată în mod amânat.
În cazul în care datele de intrare nu au fost încă procesate pentru VPI, ambele căsuțe vor apărea goale, deși puteți adăuga manual imagini după cum doriți sau puteți șterge imagini din ambele căsuțe și forța o recalculare a VPI.
Cele bune și cele mai puțin bune
Fără îndoială, marele avantaj al VPI-ului de la LiteSpeed este posibilitatea de a decide rapid și ușor, după bunul plac, ce imagini specifice nu dorim să se aplice încărcarea amânată și de a le seta manual pentru fiecare pagină.
Capcana este că această opțiune se adaugă celorlalte servicii de optimizare a WordPress de la QUIC.cloud, cum ar fi Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) și Image Optimisation pentru care ni se oferă o taxă gratuită limitată, care s-ar putea să nu fie întotdeauna suficientă, iar ulterior trebuie să cumpărăm credite, deși acestea nu sunt scumpe.
Am decis să o testez pentru a compara rezultatul cu cel oferit de Lazy Load nativ din WordPress Core și Perfmatters (cu excluderi fixe în funcție de cantitate) și, pentru moment, pot observa o îmbunătățire în cadrul marjei mici care a rămas deja.
Rezultatul vizual final este exact același ca și în cazul Perfmatters, deoarece puteți schimba pur și simplu culoarea indicatorului de poziție din gri în alb și puteți ajusta durata efectului"fade in" după bunul plac cu acest CSS.
/* Fade for Litespeed Lazy Load - PARTEA 1 - Înainte de Lazy Load */
img[data-lazyloaded]{
opacitate: 0;
}
/* PARTEA 2 - După Lazy Load */
img.litespeed-loaded{
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
tranziție: opacity .5s linear 0.2s;
opacitate: 1;
}
