Litespeed Cache (Cykl) – cz.7 Page Optimization (Ustawienia mediów, VPI, Media Excludes)

Cześć, kontynuujemy cykl i dzisiaj bierzemy na tapetę ustawienia we wtyczce Litespeed Cache, a dokładnie ustawienia Page Optimiztion. Bez zbędnego gadania, zapraszam.

Cykl mam nadzieję jest już Wam dobrze znany, jeżeli jednak przegapiłeś ostatni artykuł, możesz to w prosty sposób nadrobić, przechodząc pod link Litespeed Cache (Cykl) – cz.6 Page Optimization (Optymizacja JS i HTML)

Ustawienia mediów

Optymalizacja obrazów i multimediów to jeden z kluczowych elementów przyspieszania działania strony internetowej. Wtyczka LiteSpeed Cache oferuje zaawansowane narzędzia w sekcji Ustawienia Mediów, które pomagają zredukować obciążenie serwera i poprawić wrażenia użytkowników. Dzięki odpowiedniemu dostosowaniu ustawień, takich jak Lazy Load, LQIP czy ustawienia własnego Placeholder’a zanim załadują się całe obrazki.

W tym artykule przeanalizujemy poszczególne opcje dostępne w tej konfiguracji, wyjaśnię jak działają i podpowiem, jak je skonfigurować, aby uzyskać najlepsze rezultaty.

Leniwe ładowanie obrazków

Funkcja Lazy Load w LiteSpeed Cache pozwala na wczytywanie obrazów dopiero wtedy, gdy są widoczne dla użytkownika na ekranie (w obszarze widoku, tzw. viewport). Obrazy znajdujące się dalej na stronie są ładowane jedynie w momencie przewijania, co znacząco zmniejsza początkowe obciążenie strony i skraca czas jej wstępnego ładowania.

Informujemy: Włączenie tej funkcji automatycznie wyłącza domyślną opcję Lazy Load w WordPressie, aby uniknąć potencjalnych konfliktów.

Basic Image Placeholder

Po włączeniu funkcji Lazy Load w LiteSpeed Cache, domyślnie wyświetlany jest szary prostokąt jako tymczasowy placeholder w miejscu, gdzie obraz ma się pojawić. jeżeli jednak zależy Ci na bardziej oryginalnym rozwiązaniu, możesz dodać własny obraz w formacie base64.

Wystarczy wprowadzić odpowiedni kod base64 w ustawieniach wtyczki. Alternatywnie, możesz zdefiniować placeholder przy użyciu stałej LITESPEED_PLACEHOLDER w pliku wp-config.php.

Dzięki temu masz pełną kontrolę nad wizualnym aspektem ładowania obrazów na swojej stronie.

Responsywny element zastępczy

Funkcja Responsive Image Placeholders pozwala na wykorzystanie tymczasowych obrazów w przypadkach, gdy dla grafik na stronie zostały określone atrybuty szerokości i wysokości. Placeholdery są generowane w takich samych wymiarach jak docelowe obrazy, co znacząco ogranicza problemy z przeskakiwaniem układu strony podczas ładowania.

Dzięki temu rozwiązaniu użytkownicy doświadczają bardziej płynnego ładowania strony, a jej układ pozostaje stabilny, niezależnie od prędkości internetu czy wielkości docelowych obrazów.

Responsive Placeholder SVG

Jeśli zdecydujesz się na lokalne generowanie placeholderów, możesz określić grafikę w formacie SVG, która zostanie automatycznie przekształcona na placeholder w formacie base64 w czasie rzeczywistym.

Responsive Placeholder Color

To ustawienie pozwala na wybór odpowiedniego koloru dla placeholder’a.

LQIP Cloud Generator

Funkcja Low Quality Image Placeholder (LQIP), dostępna dzięki usłudze QUIC.cloud, pozwala na generowanie unikalnych placeholderów. Są to rozmyte i zminimalizowane wersje oryginalnych obrazów w wysokiej jakości, które wyświetlane są jako tymczasowe zamienniki podczas ładowania docelowych grafik.

LQIP Quality

Tutaj możesz ustawić jakość wygenerowanych obrazków w LQIP, im wyższa wartość tym lepszy obrazek, jednak lepszy obrazek = więcej czasu w jego załadowanie. Można wybrać zakres od 1 do 20, gdzie 4 to wartość domyślna.

LQIP Minimum Dimensions

Dzięki temu ustawieniu można wykluczyć obrazki do generowania LQIP o mniejszych rozmiarach, niż przez nas ustawione. Nie wszystko potrzebuje placeholder’a (zupełnie subiektywnie).

Generate LQIP In Background

Automatycznie generuj LQIP w tle dzięki kolejki cron.

Lazy Load Iframeów

Pozwala na leniwe ładowanie… iframe’ów.

Add Missing Sizes

Fajne ustawienie, które rozwiąże problemy jeżeli mamy na stronie niezdefiniowane rozmiarowo obrazki. Uchroni przed przeskakiwaniem obrazków przy ładowaniu strony.

WordPress Image Quality Control

Ważne ustawienie kompresji dla obrazków w całym WordPress’ie. Należy zwrócić szczególną uwagę gdy potrzebujemy dodać obrazki z jak najwyższą jakością, wtedy wprowadzona wartość powinna być jak najwyższa. Domyślna wartość to 82 (%).

Informujemy: jeżeli Twoja strona wydaje się działać zaskakująco wolno zwróć uwagę na 8 czynników, które spowalniają Twoja stronę.

VPI

Teraz gwałtownie o funkcjonalności VPI, czyli Viewport Images.

Viewport Images

Funkcja Viewport Images (VPI), oferowana przez usługę QUIC.cloud, umożliwia wykluczenie obrazów widocznych „ponad linią załamania” (above-the-fold) z mechanizmu lazy loading. Dla każdej przesłanej do kolejki strony, QUIC.cloud identyfikuje obrazy, które będą widoczne w obszarze widoku użytkownika zaraz po załadowaniu strony.

Te obrazy, nazywane Viewport Images (VPI), są wczytywane razem z treścią strony, aby zapewnić lepsze wrażenia użytkownika. Wszystkie pozostałe obrazy, znajdujące się poniżej linii załamania (below-the-fold), przez cały czas korzystają z lazy loading, co optymalizuje czas ładowania strony i zmniejsza obciążenie serwera. Dzięki temu rozwiązaniu można osiągnąć idealny balans między wydajnością a szybkością wyświetlania kluczowych elementów wizualnych.

Viewport Images Cron

Włącz automatyczne generowanie obrazów typu Viewport przez crona. Dzięki.

Media Excludes

Nikt nie lubi być wykluczanym, jednak czasami aby strona prawidłowo działała należy dopuścić się tego czynu wobec części mediów (na przykład obrazków), które nie powinny być objęte powyższą optymalizacją. Warto zagłębić się w tę konfigurację, ponieważ do prawidłowego użycia jednej z funkcjonalności może dzielić tylko jeden element, który akurat nie może ładować sie w dany sposób.

Nie będę opisywał tutaj wszystkich opcji tej kategorii, ponieważ są one łatwe do rozszyfrowania, można jednak wykluczyć z optymalizacji elementy jak obrazki, całe adresy URL, obrazki w LQIP czy konkretne iframe’y.

Podsumowanie

Konfigurację, którą dzisiaj przedstawiłem uważam za ciekawą, która może dużo wnieść do przyjemności z obcowaniem z Waszymi stronami przez ich użytkowników. Warto jednak przypomnieć, iż po wprowadzeniu każdej z funkcjonalności, należy odpowiednio wyczyścić cache we wtyczce Litespeed Cache, oraz dokładnie przeanalizować czy serwis ładuje się bez zakłóceń. To szczególnie ważne przy tego typu konfiguracji.