- Co to jest LiteSpeed Cache?
- Na co pozwala LiteSpeed Cache?
- Jak skonfigurować LiteSpeed Cache dla WordPress?
- Podsumowując, czy warto zainstalować wtyczkę LiteSpeed Cache na serwerze WordPress?
Co to jest LiteSpeed Cache?
LiteSpeed Cache to bezpłatna wtyczka optymalizacyjna dla systemu WordPress. Posiada ona mase wbudowanych funkcji, których uruchomienie przyspiesza strony WordPress. Sugeruje ci ją zainstalować, zwłaszcza gdy prowadzisz sklep Woocommerce.
Na co pozwala LiteSpeed Cache?
LiteSpeed Cache pozwala zapisywać w pamięci cache statyczne i dynamiczne elementy witryny, dzięki czemu zmniejszać obciążenie serwera i zwiększać szybkość ładowania stron WordPress. Wtyczka ta pozwala również na zmniejszanie plików html, css i js. Innymi słowami ta wtyczka pozwala na przejście z 35 punktów do 97 punktów wydajności.
Jak skonfigurować LiteSpeed Cache dla WordPress?
Konfiguracja LiteSpeed cache nie jest taka prosta. Dlatego, przygotowałem kompletny poradnik jak przeprowadzić poprawną konfigurację oraz przyspieszyć swoją stronę.
Presety
Sekcja ta pozwala użyć oficjalnego presetu zaprojektowanego przez firmę LiteSpeed, za pomocą jednego kliknięcia możesz skonfigurować całą wtyczkę. Do wyboru dostajesz 5 opcji, od najbardziej podstawowych, do najbardziej zaawansowanych. W tym poradniku skupimy się na największej optymalizacji, przy jednoczesnym pełnym funkcjonowaniu witryny. Swoją konfigurację testowałem bardzo długo, ponieważ przy zastosowaniu ustawień Ekstremalnych, skrypty Javascript oraz niektóre pliki CSS przestawały działać. Okazywało się to brakiem możliwości otwarcia menu na urządzeniach mobilnych oraz nie wyskakującym okienkiem, informującym o plikach cookie. Po długich godzinach walki, udało mi się osiągnąć oczekiwany efekt i dostosować ustawienia tak, aby osiągać jak najlepsze wyniki wydajności bez utraty funkcjonalności witryny.
W zakładce [2] Import / Eksport możecie wyeksportować własne ustawienia, a następnie zaimportować je do innej witryny. Pozwala to na szybką konfigurację wtyczki i pewność, że wszystko powinno działać
Ogólne
W tej sekcji jedyne co musisz ustawić to Domain Key naciskając przycisk, wygeneruje to klucz domeny, który przyda się przy dalszej konfiguracji. Następnie ustaw Guest Mode oraz Guet Optimization na włączony, pomaga to w optymalizacji dla nowych użytkowników, a zwłaszcza nim strona powinna się ładować błyskawicznie.
Pamięć podręczna
Miejsce to posiada dużo zakładek, ale ciebie powinny interesować tylko te opisane poniżej, całą resztę powinieneś zostawić z ustawieniami domyślnymi.
Pamięć podręczna
Zakładka ta pozwala ustawić, które elementy powinny być zapisywane w pamięci poręcznej, dla największej wydajności przełącz wszystko na włączone. Dzięki temu wszystkie elementy strony zostaną zapisane w celu szybszego dostarczenia treści. Dodatkowo spowoduje to zmniejszenie ilości zapytań do serwera, zatem też szybszy czas odpowiedzi serwera co jeszcze bardziej przyspieszy czas ładowania witryny. Jednakże, pola tekstowe pozostaw bez zmian.
ESI
ESI odpowiada za zapisywanie takich elementów jak pasek administratora, formularz komentarzy oraz określenie części strony dynamicznej jako oddzielne fragmenty, które następnie są łączone w całość, a my otrzymujemy w pełni załadowaną stronę. Innymi słowy, ESI odpowiada za pobieranie strony z “dziurami” a następnie po stronie klienta, “łatanie ich”. Dzięki temu pobieramy mniejszą ilość danych, co pozwala przyspieszyć ten proces. Zatem w tej zakładce również ustaw wszystko na włączone.
Object
Pamięć podręczna obiektów wymaga osobnego serwera Memcached lub Redis, niektóre hostingi oferują takie rozwiązanie za darmo np. CyberFolks, są też zewnętrzne firmy, które oferują dostęp do takiego serwera, jednak nie zawszę się to opłaca. Jeżeli możecie wybrać z którego rozwiązania chcecie korzystać, wybierzcie Redis, ponieważ jest on bardziej zaawansowanym system i osiąga lepsze wyniki wydajności. Jeżeli posiadasz dostęp do takiego serwera, włącz Pamięć podręczną obiektów oraz wpisz wszystkie dane, dostarczone przez usługodawcę. Dodatkowo, na samym dole masz możliwość buforowania zakładki /wp-admin/, przyspieszy to czas ładowania wszystkich zakładek administracyjnych. Przełącz wszystkie 3 opcje: Trwałe połączenie, Cache WP-Admin oraz Zapisuj dane tymczasowe na włączone.
Browser
W tej zakładce możesz włączyć, aby wszystkie statyczne pliki, takie jak arkusza styli.css, JavaScriptu.js, czy obrazy, zostały zapisane w przeglądarce. Następnie po odświeżeniu strony lub ponownym wejściu na nią zostaną załadowane z pamięci urządzenia, bez konieczności ich pobierania. A co, gdy coś zmiennie na stronie? Wtedy kliknij Wyczyść tę stronę – LSCache w panelu administracyjnym pokazanym na zdjęciu a serwer automatycznie, przy następnym wejściu na stronę pobierze nowe statyczne pliki. Przyspiesza to gigantycznie ładowanie strony oraz odciąża zasoby serwera, zatem powinieneś skorzystać z tego rozwiązania i włączyć pamięć podręczną przeglądarki.
Zaawansowane
Tutaj zostają ci 2 ustawienia, pierwsza to Popraw zgodność HTTP / HTTPS, którą powinieneś sam zdecydować czy włączyć. Przy drugim ustawieniu chciałbym się na chwile zatrzymać, mowa tu o ustawieniu Natychmiastowe kliknięcie, ponieważ to zależy od serwera oraz ilości odwiedzających stronę. Jeżeli serwer jest słaby a użytkowników jest dużo to zdecydowanie zaznacz wyłączone. Jednak, jeżeli wiesz, że serwer sobie poradzi, możesz przełączyć na włączone, ale co jakiś czas, w różnych godzinach, w różnych dniach, musisz wejść na stronę i trochę po niej pochodzić, aby sprawdzić czy czas ładowania się nie wydłużył. Zatem lepiej pozostawić tą opcję wyłączoną, unikniesz zdenerwowania klientów, gdy strona zacznie się dłużej ładować.
CDN
Zacznij od zakładki [2] QUIC.cloud CDN Setup i przejdź przez wszystkie kroki, utwórz konto oraz połącz je ze swoją stroną. Ostatecznie, po konfiguracji, zakładka powinna wyglądać w ten sposób.
Czym jest CDN?
CDN są to serwery, rozmieszczone w różnych miejscach świata, które przechowują kopie plików strony, w celu szybszego jej załadowania. Zatem czy CDN jest ci potrzebne? Jeżeli jesteś firmą międzynarodową, sprzedajesz produkty, usługi, lub odwiedzający twoją witrynę pochodzą z różnych kontynentów, to tak. W przeciwnym wypadku zdecydowanie nie. Jednak to co ustawiliśmy w zakładce [2] przyda nam się do optymalizacji obrazów.
Optymalizacja obrazków
Image Optimization Settings
Zacznij od 2 zakładki, jeżeli zależy ci na jak największej optymalizacji, ustawienia na swojej stronie ustaw identycznie jak na zdjęciu. Jednak możesz też dostosować je do siebie, najważniejsze, aby pierwsze 3 opcje były włączone a 4 wyłączona. Pierwsze 2 odpowiadają za automatyczną optymalizacje, po dodaniu nowego zdjęcia. Optymalizuj oryginalne obrazki włącza optymalizacje obrazków, a opcja numer 4 za backup obrazków, w przypadku, gdyby wersja zoptymalizowana byłaby zbyt niskiej jakości, w łatwy sposób można przywrócić oryginalne zdjęcie. Jeżeli przed dodaniem na stronę, kompresujesz obrazek możesz włączyć bezstratną optymalizację, jednak, jeśli nie to pozostaw to wyłączone, aby zdjęcia były dodatkowo kompresowane. Funkcja Zachowaj danę EXIF/XMP, odpowiada za zachowanie metadanych zdjęcia, takich jak prawa autorskie, ale również dane lokalizacyjne. Jeżeli zdjęcia, które używasz na swojej stronie posiadają prawa autorskie, włącz tą opcje. Następne 2 funkcje Zamiennik obrazów WebP oraz WebP For Extra srcset pozwalają zmienić rozszerzenie zdjęć na webp, jest to nowy typ plików najnowszej generacji, przystosowany specjalnie pod strony www. Zdjęcia w z tym rozszerzeniem są lżejsze i wyglądają lepiej niż w jpg.
Image Optimalization summary
Po skonfigurowaniu ustawień przejdź do tej zakładki oraz naciśnij przycisk Gather Image Data, po czym wszystkie zdjęcia zostaną zoptymalizowane oraz zamienione w webp. W tej zakładce zobaczysz również raport, ile miejsca zostało oszczędzone.
Page optimalization
Jest to znienawidzona przeze mnie sekcja, to właśnie ona spowodowała, że na mojej stronie przestały działać skrypty Javascript. Dlatego powinieneś poświęcić jej najwięcej czasu, upewniając się, że wszystko na twojej witrynie działa poprawnie.
CSS Settings
Zacznę od tego co mi uprzykrzyło życie, były to 2 opcje Wygeneruj UCSS oraz UCSS Inline po ich włączeniu menu główne zaczyna wyglądać inaczej, nieakceptowalnie, prawdopodobnie winą tego jest motyw, z którego korzystam, czyli Astra. Dlatego te opcje pozostawiam wyłączone, a jeśli tobie wtyczka LiteSpeed Cache powoduje błędy, to powinieneś sprawdzić, czy nie jest to spowodowane tymi ustawieniami.
Zaczynając od samej góry, CSS Minify ustawienie to usuwa wszystkie entery oraz spacje z arkusza styli.css, powoduje to, że plik ten jest lżejszy oraz ładuje się szybciej. Następne Połączenie CSS łączy wszystkie pliki w jeden, dodatkowo włącz też opcje CSS Combine External and Inline. Najważniejsza opcja, która powoduje największą optymalizację dla wyszukiwarek to Ładuj CSS asynchronicznie, powoduje ona, że CSS ładuje się dopiero po załadowaniu strony, a zatem wyszukiwarka uznaje, że strona załadowała się szybciej, niż rzeczywiście. Dotyczy to również leniwego ładowania obrazków oraz ładowania JS asynchronicznie. Reszta ustawień powinna zostać włączona niezależnie od konfiguracji.
Ustawienia JS
Pierwsze 3 ustawienia opisałem wyżej przy CSS Settings i tyczą się tego samego. Opóźnij ładowanie JS posiada 3 opcje – wyłącz – deferred – delayed – jednak w moim przypadku opcja delayed, powoduje nieładowanie się skryptów JS zatem jeżeli też masz z tym problem, to może być rozwiązaniem.
HTML Settings
Tutaj wszystkie opcje powinny zostać włączone, dotyczą one zmniejszenia pliku HTML a zatem szybszego jego ładowania. Plik HTML nie zapisuje się w przeglądarce, zatem zawsze jest pobierany ponownie. Zmniejszenie go, spowoduje odciążenie serwera oraz zmniejszenie czasu oczekiwania na załadowanie witryny.
Ustawienia mediów
Leniwe ładowanie obrazków, jest to załadowanie obrazków dopiero po załadowaniu się całej strony, dlatego rozem z tym ustawieniem powinien być włączony Responsywny element zastępczy, aby treść na stronie nie przemieszczała się, gdy zdjęcia się załadują. Reszta funkcji powinna zostać definitywnie włączona, wspomagają one kwestie wizualne, widoczne przez użytkownika w czasie ładowania się strony.
VPI
Viewport Images decyduje, które zdjęcia powinny zostać załadowane na początku, a które mogą zostać załadowane później. Zatem użytkownik szybciej zobaczy zdjęcie na górze a później na dole strony, daje to efekt pełnego załadowania strony, mimo że reszta obrazów wczytuje się w tle.
Media Excludes
W tej sekcji możesz dodać zdjęcia, które mają zostać wykluczone z leniwego ładowania, polecam zostawić tą sekcje domyślnie.
Localization
Gravatar Cache oraz Gravatar Cache Cron są to opcje przechowywujące awatary użytkowników bezpośrednio na ich urządzeniu, przyspiesza to czas ponownego ładowania sekcji komentarzy na blogu.
Robot Indeksujący
W tym miejscu możemy włączyć roboty indeksujące, jest to bardzo przydatna funkcja, która przyspiesza indeksacje twojej strony oraz zwiększy jej widoczność w wyszukiwarce.
Narzędzia
W przypadku błędów na stronie możesz wyłączyć wszystkie funkcje wtyczki w sekcji ustawienia debugowania, włączając opcje Wyłącz wszystkie funkcje.
Podsumowując, czy warto zainstalować wtyczkę LiteSpeed Cache na serwerze WordPress?
Podsumowując, tylko głupi znając możliwości tej wtyczki jej nie zainstaluje, nie znam osoby, która ma gdzieś czas ładowania swojej witryny, jeżeli myśli o jej pozycjonowaniu. Sam zainstalowałem ją na każdej stronie, którą kiedykolwiek stworzyłem.
