Lazy Load i Viewport w LiteSpeed

 
Lazy Load i Viewport w LiteSpeed

Te trzy rzeczy są zdefiniowane na początku dla tych, którzy nie do końca wiedzą, czym one są.

Lazy Load

Lazy load, również błędnie nazwany „leniwym” dla dosłownego tłumaczenia, jest wzorcem projektowym używanym do opóźnienia ładowania lub renderowania obiektu do właściwego czasu użycia, aby uniknąć niepotrzebnego wstępnego ładowania obiektów, które mogą nie być używane. Jest on najczęściej używany do obrazów i przyczynia się do lepszego czasu ładowania i oszczędności przepustowości.

Renderowanie każdego obrazu jest opóźnione do momentu, gdy jest potrzebne, ładując się w miarę przewijania przez rzutnię

Viewport

Viewportktóry nie ma dokładnego tłumaczenia, ale często jest określany jako „graficzne okno”, został stworzony przez Apple w 2007 roku dla swojego iPhone’a i był wirtualnym oknem podobnym do tego, które Nokia zaprojektowała dla Mini Mapy. Był to, i nadal jest, meta tag, który miał zapewnić sposób, w jaki strony internetowe mogą komunikować się z przeglądarkami mobilnymi, w jaki sposób chcą, aby przeglądarka internetowa renderowała stronę.

Bez tego meta tagu iPhone’y renderowały strony internetowe jako okno o szerokości 980 px, które użytkownik musiał powiększać i zmniejszać. Dzięki temu meta tagowi możesz renderować stronę w jej rzeczywistym rozmiarze, a następnie dostosować układ, aby zapewnić rodzaj strony, którą wszyscy oczekujemy zobaczyć podczas korzystania z przeglądarki mobilnej. Ostatecznie stał się standardowym meta tagiem obsługiwanym przez większość urządzeń i jest tym, który jest używany dzisiaj do tego, co jest znane jako responsywne projektowanie.

Litespeed Cache

LiteSpeed Web Server to oprogramowanie do obsługi serwerów internetowych i LiteSpeed Cache dla WordPressa (LSCWP) to jego wtyczka przyspieszająca witrynę typu „wszystko w jednym”, która zawiera unikalną pamięć podręczną całego serwera i zbiór funkcji optymalizacyjnych dla stron korzystających z WordPressa i hostowanych na serwerze z systemem LiteSpeed.

Ładowanie obrazów

W idealnej sytuacji wszystkie obrazy powinny ładować się z opóźnieniem, z wyjątkiem tych, które znajdują się już w rzutni, gdy strona ładuje się początkowo, czyli tego, co jest widoczne na pierwszy rzut oka na ekranie, zanim przewiniemy.

To ma problem. Strona może wyglądać brzydko przy pierwszym załadowaniu, ponieważ obrazy nie są pokazywane, dopóki nie ma ruchu i musisz wykluczyć pierwsze dwa lub trzy, które są wyświetlane

Chociaż WordPress ma natywne odroczone ładowanie od wersji 5.5 i możemy to zrobić z wieloma innymi wtyczkami np Perfmatterskontrola Viewport w celu ograniczenia, które obrazy mają być wyświetlane, a które nie, nie jest taka prosta, ponieważ możemy powiedzieć mu, aby nie odraczał ładowania np. obrazów, które chcemy wyświetlić, ale nie możemy ustawić lub wykluczyć obrazów, które chcemy wyświetlić pierwsze dwa, trzy lub czteryale nie możemy w prosty sposób ustawić lub wykluczyć konkretnych obrazów dla każdej strony i możemy to zrobić tylko za pomocą luzem.

VPI

25 lipca LiteSpeed dodał w aktualizacji swojej wtyczki do wersji 5.0 elastyczną opcję naprawiającą to, którą nazwał VPI (Viewport Images).

Usługa VPI bada adres URL i określa, które obrazy są widoczne na ekranie o rozdzielczości 1300×900 pikseli dla widoków desktopowych oraz które obrazy są widoczne na ekranie o rozdzielczości 480×800 dla widoków mobilnych. Zwraca listę tych obrazów do wtyczki LiteSpeed, a wtyczka LiteSpeed wyklucza je z powolnego ładowania następnym razem, gdy buforuje ten adres URL.

Rezultatem jest strona, która renderuje się całkowicie powyżej fałdy, podczas gdy wszystkie obrazy poniżej fałdy nadal zachowują się jak wcześniej. Strona zachowuje swój dobry wynik szybkości strony, podczas gdy ludzcy odwiedzający napotykają pierwszy pełny ekran treści.

Konfiguracja

Aby skorzystać z tej nowej usługi, trzeba oczywiście aktywować Lazy Load w pluginie.

Konfiguracja VPI jest prosta, posiada tylko dwa przełączniki.

Lazy Load y Viewport en Litespeed

Kiedy obrazy rzutni (dalej VPI) są włączone i cron jest ustawiony na ON, obrazy VPI będą generowane w tle poprzez kolejkę opartą na cronie.

Jeśli nie chcesz włączyć crona, będziesz musiał ręcznie przetworzyć kolejkę VPI. Możesz to zrobić z przycisku„Ręcznie uruchom kolejkę VPI„, który pojawi się, gdy w kolejce są adresy URL lub z głównego pulpitu nawigacyjnego z opcji„Wymuś cron„.

Lazy Load i Viewport w LiteSpeed

Ciekawą i naprawdę przydatną rzeczą w tej nowej opcji jest to, że teraz, zarówno w klasycznym edytorze, jak i w Gutenbergu, w każdym poście i stronie znajdziesz nowe pole w opcjach LiteSpeed, w którym możesz całkowicie wyłączyć tę opcję i usunąć wszelkie obrazy z Viewportu, aby dostroić go do swoich upodobań.

Lazy Load i Viewport w LiteSpeed

Wszelkie obrazy, które pojawią się w tych polach, nie zostaną odroczone do załadowania

Jeśli dane wejściowe nie zostały jeszcze przetworzone na potrzeby VPI, oba pola będą puste, choć możesz ręcznie dodać obrazy według własnego uznania lub usunąć obrazy z obu pól i wymusić ponowne obliczenie VPI.

Ci dobrzy i ci mniej dobrzy

Bez wątpienia wielką zaletą VPI firmy LiteSpeed jest możliwość szybkiego i łatwego decydowania o tym, do których konkretnie obrazów nie chcemy stosować odroczonego ładowania i ustawiania go ręcznie dla każdej strony.

Haczyk polega na tym, że ta opcja jest dodatkiem do innych usług optymalizacji WordPressa z QUIC.cloud takie jak Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) i Image Optimisation, za które otrzymujemy ograniczoną darmową opłatę, która nie zawsze może wystarczyć, a potem trzeba kupić kredyty, choć niedrogi.

Postanowiłem go przetestować, aby porównać wynik z natywnym Lazy Load z WordPress Core i Perfmatters (z ustalonymi wykluczeniami na ilość) i jak dotąd widzę poprawę w ramach niewielkiego marginesu, który już pozostał.

Lazy Load i Viewport w LiteSpeed

Końcowy efekt wizualny jest dokładnie taki sam, jak ten osiągnięty za pomocą Perfmatters, ponieważ po prostu zmieniasz kolor placeholder z szarego na biały i dostosować czas trwania efektu„fade in” za pomocą tego 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;
}


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad
Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting

Grandes personan que patrocinan.

Patreon

Recibe contenido extra y adelantos desde sólo un dolarcito al mes como ya hacen estos amables lectores:

César D. Rodas - Jorge Zamuz - David Jubete Rafa Morata - Sasha Pardo - Ángel Mentor - Jorge Ariño - Vlad SabouPedro - Álvaro RGV - Araq