LiteSpeed dla WordPress: Optymalizacja czyli jak przyspieszyć stronę WWW. (dla v. 2.X)

Uwaga! Niniejszy artykuł dotyczy wtyczki LSC w wersji z serii 2.X. Opisy nowszych wersji znajdziesz tutaj.

Jak z WordPressa wydusić demona prędkości?

Wiemy już jak włączyć i skonfigurować podstawowe ustawienia wtyczki do optymalizacji LiteSpeed ​​Cache dla WordPress (LSCWP). Wtyczka, już w domyślnej konfiguracji (natychmiast po zainstalowaniu) znacząco przyspiesza witrynę. Wraz z dodatkowymi opcjami, potrafi zapewnić najwyższą wydajność Twojej stronie WWW. Moduł LSCache (moduł pamięci podręcznej LiteSpeed) jest wbudowany bezpośrednio w serwer. Dzięki temu znacznie zmniejsza się obciążenie, a buforowanie można wykonać bardziej wydajnie, niż w przypadku innych rozwiązań. W niniejszym poradniku omówimy konfigurację wtyczki dla WordPress, ale warto zauważyć, że analogiczne dodatki istnieją również dla innych platform. LiteSpeed ​​Cache dla WordPress z obsługą WooCommerce, LiteMage dla Magento, LiteSpeed ​​Cache dla XenForo, PrestaShop, MediaWiki, Drupal, Joomla, Craft CMS  czy OpenCart.

Bardzo konkretne efekty działania tego rozwiązania opisujemy też w artykułach na blogu, m.in.: ‘SEO vs. PageSpeed. Od zera do lidera’ i ‘Jak przyspieszyć bloga, sklep lub stronę nawet 90-krotnie. Kilka prostych trików.’.

Zanim zaczniesz

UWAGA! Dokładnie przetestuj te opcje przed włączeniem ich na swojej stronie produkcyjnej! Żadna z funkcji wtyczki nie powinna wpływać na zdolność kodu Twojej strony do działania, niemniej jednak w pewnych przypadkach, konsekwencje mogą być nieprzewidywalne. Dobrym pomysłem będzie też wykonanie wcześniej kopii pliku .htaccess, który znajduje się w głównym katalogu z pliami Twojej strony. W sytuacji, w której wtyczka nadpisze plik .htaccess i strona zacznie zachowywać się nieprawidłowo, wówczas wystarczy przywrócić oryginalną wersję pliku.

Sprawdzona metoda konfiguracji zaawansowanych ustawień wtyczki polega na zachowaniu każdorazowo następującej sekwencji działań:

• włączenie/wyłaczenie wybranej opcji + zapisanie nowych ustawień,
• wyczyszczenie cache strony (Menu WP: ‘LiteSpeed Cache’ -> ‘Zarządzaj/Edytuj’ -> ’Opróżnij wszystko’),
• sprawdzenie najważniejszych elelemntów funkcjonalności strony WWW,
• przejście do kolejnej opcji.

Na pierwszy rzut oka zaawansowana konfiguracja może wydawać się pracochłonna, ale naprawdę warto podjąć ten wysiłek. Efekty bardzo miło zaskoczą Cię, a Google z pewnością doceni i nagrodzi poprawą lokat w wyszukiwarce.

Zakładka Optymalizacja

Z menu głównego WordPressa wybierz ‘LiteSpeed Cache’ -> ‘Ustawienia główne’, a następnie włącz zaawansowane opcje:

‘Optymalizuj’ i ‘Tuning’ to dwie ściśle powiązane zakładki, w których głównie znajdziesz przełączniki WŁ. / WYŁ.:

Istnieją trzy sposoby, w jakie ustawienia na tej karcie mogą przyspieszyć działanie Twojej witryny: minifikacja plików (CSS lub JS), łączenie plików i przed-wysłanie plików do przeglądarki. Minifikacja usuwa wszystkie niepotrzebne znaki z kodu. Przyspiesza to działanie, zmniejszając ilość danych, które należy przesłać. Łączenie zastępuje wiele plików jednym plikiem, zawierającym połączony kod oddzielnych plików. Zmniejsza to liczbę żądań zgłaszanych przez przeglądarkę i potencjalnie usuwa zduplikowany kod, co przekłada się na poprawę szybkości. Połączone CSS i JS zostaną umieszczone w nagłówku. Uwaga dotycząca łączenia JavaScript: jeśli w kodzie HTML jest zdefiniowany kod JS , to JS nie zostanie włączony do połączonego pliku, a pozostały JS zostanie połączony i umieszczony w pliku stopki, aby uniknąć konfliktów. HTTP / 2 Push to sposób wysyłania zasobów do przeglądarki, zanim przeglądarka zapyta o nie. Zwiększa szybkość Twojej witryny, zmniejszając liczbę potrzebnych żądań.

CSS Minify

Po włączeniu opcji, dodatkowe znaki spacji, nowe znaki linii i komentarze zostaną usunięte z wszystkich załączonych plików CSS.

Połączenie CSS

Wszystkie pojedyncze pliki CSS zostaną połączone w jeden plik CSS.

CSS HTTP / 2 Push

CSS będzie wysyłany do przeglądarki, zanim ta o niego poprosi.

JS Minify

Po włączeniu tej opcji, dodatkowe znaki spacji, znaki nowego wiersza i komentarze zostaną usunięte ze wszystkich plików JS.

Połącz JS

Wszystkie pojedyncze pliki JS zostaną połączone w jeden plik JS.

JS HTTP / 2 Push

JS będzie wysyłany do przeglądarki, zanim ta o niego poprosi.

CSS / JS Cache TTL

Pliki zminifikowane oraz połączone są buforowane., a to ustawienie określa, jak długo. Minimum to 3600 sekund, ale zaleca się 604800.

HTML Minify

Po włączeniu tej opcji, dodatkowe znaki spacji, znaki nowego wiersza i komentarze zostaną usunięte z całego kodu HTML.

Minifikacja wbudowanego kodu CSS

Po włączeniu tej opcji, dodatkowe znaki spacji, nowe znaki linii i komentarze zostaną usunięte ze wszystkich wbudowanych kodów CSS na stronie HTML.

Minifikacja wbudowanego kodu JS

Po włączeniu tej opcji, dodatkowe znaki spacji, znaki nowego wiersza i komentarze zostaną usunięte z całego wbudowanego kodu JS na stronie HTML.

Ładuj CSS asynchronicznie

Ta opcja domyślnie przyjmuje wartość OFF. Kiedy jest WYŁĄCZONA, strony internetowe ładują się normalnie, a przeglądarka ładuje CSS z nagłówka HTML, zanim przejdzie dalej do wyświetlania treści w treści HTML . Po włączeniu tej opcji ładowane będą CSS i HTML w tym samym czasie. Może znacząco zwiększyć szybkość Twojej strony w serwisach takich jak Pingdom, GTmetrix i PageSpeed. Jednocześnie, jeśli ta opcje jest przestawiona ON, to załaduje, to też asynchronicznie czcionki Google. Dzięki temu strona może ładować się szybciej, ale może początkowo zostać załadowana bez formatowania. Aby uniknąć tego problemu, będziesz musiał wygenerować krytyczny CSS i wczytać go jako pierwszy. Do czego służy następne ustawienie.

Wygeneruj krytyczny CSS

Ta opcja działa tylko wtedy, gdy funkcja ‘Ładuj CSS asynchronicznie’ jest również włączona. Gdy oba ustawienia są włączone, krytyczny CSS jest generowany przez zdalny serwer CCSS LiteSpeed, a następnie wysyłany z powrotem do LSCache.

UWAGA 1: Niektóre motywy już generują dla Ciebie krytyczne CSS. W takim przypadku możesz wyłączyć tę opcję. UWAGA 2: Aby użyć usługi generowania krytycznych wersji CSS LiteSpeed , należy dodać do białej listy: ccss.api.litespeedtech.com.

Po wygenerowaniu krytycznego CSS zostanie on załadowany jako pierwszy, a reszta CSS zostanie załadowana asynchronicznie z kodem HTML . Strona nie będzie już ładowana bez formatowania. Oto jak to działa:

• gość wysyła żądanie do serwera klienta,
• jeśli nie ma krytycznego CSS , serwer kliencki wyśle żądanie krytyczny CSS do zdalnego serwera LiteSpeed CCSS,
• serwer CCSS pobierze z serwera klienta zasoby i treści, a następnie wygeneruje krytyczny CSS,
• serwer CCSS wysyła następnie wygenerowany krytyczny CSS z powrotem do serwera klienta,
• serwer kliencki przesyła odwiedzającym zawartość z krytycznym CSS.

Jest jeden mały problem: jeśli Twoja strona nie ma jeszcze wygenerowanego krytycznego CSS (lub po usunięciu wszystkich), pierwszy użytkownik, który poprosi o stronę, będzie musiał poczekać na ukończenie powyższego procesu, zanim dostępne będą krytyczne style CSS . Może to potrwać kilka sekund, a to prowadzi nas do następnego ustawienia.

Wygeneruj krytyczny CSS w tle

UWAGA : Ładuj CSS Asynchronicznie musi być ustawiony, aby ON ta funkcja działała.

To ustawienie określa, czy obliczenia te są wykonywane online, czy w tle. Gdy strona nie ma zdefiniowanego krytycznego CSS, żądanie jest dodawane do kolejki, a strona nadal ładuje się bez czekania. Oto, co możesz zobaczyć, gdy w kolejce czekają strony:

Jeśli Twój cron jest wyłączony (lub jesteś niecierpliwy), możesz nacisnąć przycisk ‘Uruchom kolejkę ręcznie’, aby przyspieszyć proces.

Jeśli opcja ‘Wygeneruj krytyczne CSS w tle’ jest ustawiona na OFF, wówczas krytyczny CSS jest generowany na online, natychmiast po zażądaniu strony. Oznacza to, że użytkownik musi czekać na obliczenia krytycznego CSS przed kontynuowaniem przeglądania strony. Może to spowolnić ładowanie strony.

Oddzielne typy treści CCSS

Domyślnie dla każdego typu wpisu jest zapisany jeden zestaw Krytycznych CSS. To znaczy: CCSS dla postów, CCSS dla stron, CCSS dla produktów (jeśli masz niestandardowy typ postu o nazwie „Produkt”). Jeśli masz typ posta, w którym każdy element w tym typie postu ma inne formatowanie, to taki zestaw Krytycznych CSS nie będzie dostępny. Dodaj ten typ wiadomości do skrzynki, a dla każdego elementu tego typu postu zostanie wygenerowany krytyczny CSS. Jeśli na przykład każda strona w witrynie ma inne formatowanie, wpisz ją w tym polu. Oddzielne krytyczne pliki CSS będą przechowywane dla każdej strony w witrynie.

Oddzielne identyfikatory URI pamięci podręcznej CCSS

Jeśli masz strony, które nie są zgodne z tymi samymi zasadami formatowania, co reszta, w tym polu możesz podać identyfikatory URI (lub częściowe identyfikatory URI) dla tych stron. Oddzielne krytyczne pliki CSS zostaną wygenerowane dla ścieżek zawierających te ciągi. Identyfikatory URI zostaną porównane ze zmienną serwera. Na przykład w przypadku ‘/mypath/mypage?aa=bb’, może zostać użyte ‘mypage?aa=’. Jeden wpis na linię.

Wewnętrzny CSS Async Lib

Włączenie opcji spowoduje wstawienie asynchronicznej biblioteki CSS w celu uniknięcia blokowania renderowania.

Opóźnij ładowanie JS

To ustawienie pobiera wszystkie skrypty i ładuje je dopiero po zakończeniu ładowania HTML. Może zwiększyć szybkość Twojej strony w serwisach takich jak Pingdom, GTmetrix i PageSpeed.

Wyklucz JQuery

To ustawienie wyklucza JQuery ze wszystkich powyższych działań optymalizacyjnych. Zaleca się zachowanie tego ustawienia na ON, szczególnie jeśli masz wbudowany JavaScript. Jeśli występują błędy podczas łączenia JS , włączenie tego ustawienia powinno je wyeliminować. Spróbuj włączyć tę opcję, jeśli wystąpił błąd JS związany z jQuery po włączeniu ‘Połącz JS’.

Wstępne pobieranie DNS

Za pomocą tego ustawienia możesz wykonać rozpoznawanie DNS dla wymienionych domen, przed zażądaniem strony. Po wstępnym pobieraniu wyników DNS czas oczekiwania może zostać znacznie skrócony dla odwiedzających, którzy klikną linki zewnętrzne, szczególnie w sieciach komórkowych. Domeny należy wpisać po jednym w wierszu w formacie //www.example.com.

Usuń komentarze

Gdy JS i CSS zostaną zminimalizowane, domyślnie komentarze będą zachowane, ale mogą zajmować cenne miejsce. Włącz tę opcję, aby usunąć komentarze z plików podczas minifikacji i zwiększyć efektywność przesyłania plików.

Zakładka Tuning

 ‘Tuning’ i ‘Optymalizuj’ to dwie ściśle powiązane zakładki, w których głównie znajdziesz przełączniki WŁ. / WYŁ.:

Dokładnie przetestuj te opcje przed włączeniem ich na swojej stronie produkcyjnej! Więcej na ten temat znajdziesz na początku poradnika w sekcji ‘Zanim zaczniesz’.

Priorytet połączonych plików CSS

Zazwyczaj połączony CSS jest ładowany po zewnętrznych plikach CSS. Wynika to z faktu, że połączony lokalny CSS ma większe możliwości dostosowania, które muszą być ładowane po podstawowym arkuszu CSS. Włącz tę opcję, jeśli masz powód, aby wczytać połączone CSS przed innymi plikami CSS.

Wykluczenia CSS

Jeśli na karcie ‘Optymalizuj’ włączyłeś minifikację plików CSS, łączenie plików lub przed-wysłanie plików do przeglądarki, tutaj możesz wykluczyć niektóre pliki CSS. Użyj tej opcji, aby wyświetlić listę wszystkich plików CSS (po jednym w wierszu), które chcesz wyłączyć z funkcji optymalizacji. Możesz wpisać pełne adresy URL lub częściowy ciąg znaków.

Priorytet połączonego JS

Zazwyczaj połączony JavaScript jest ładowany po zewnętrznych plikach JavaScript. Włącz tę opcję, jeśli masz powód do załadowania połączonego JavaScriptu przed innymi plikami JS.

Wykluczenia JS

Jeśli na karcie ‘Optymalizuj’ włączyłeś minifikację plików JS, łączenie plików lub przed-wysłanie plików do przeglądarki, tutaj możesz wykluczyć niektóre pliki JS. Użyj tej opcjiaby wyświetlić listę plików JS (po jednym w wierszu), które chcesz wyłączyć z funkcji optymalizacji. Możesz wpisać pełne adresy URL lub częściowy ciąg znaków.

Maksymalny rozmiar pliku łączonego

Większy rozmiar pliku powoduje, że musi zostać wygenerowanych mniej połączonych plików. Jest to dobre dla wyniku na stronie, ale uwaga: jeśli połączony plik jest zbyt duży, spowoduje to duże obciążenie pamięci. Producent uważa, że 1.2MB to dobry punkt wyjścia. Dostosuj go w górę lub w dół, aby spełnić wymagania Twojej witryny.

Usuń query strings

To ustawienie usuwa ciąg zapytania z zasobów statycznych. Zasoby statyczne z ciągami zapytań nie mogą być buforowane przez przeglądarki i serwery proxy. Usunięcie ciągów znaków pozwala na ich zbuforowanie, co przekłada się na szybsze ładowanie strony. To może zwiększyć szybkość Twojej strony w serwisach takich jak Pingdom, GTmetrix i PageSpeed. reCAPTCHA Google będzie omijana automatycznie.

Załaduj Google Fonts asynchonicznie

Możesz nie chcieć włączyć asynchronicznego ładowania całego swojego CSS , ale chcesz go tylko dla czcionek Google. Jeśli ta opcja jest włączona, ta opcja umożliwia asynchroniczne ładowanie czcionek Google bez ładowania innych CSS w ten sposób. Dodatkowo ta opcja dodaje do Google preconnect, dzięki czemu można szybciej pobierać czcionki.

Usuń Google Fonts

Ta opcja usuwa wszystkie czcionki Google z Twojej witryny. Pamiętaj, aby to przetestować. Jeśli nie masz odpowiednich czcionek zastępczych przechowywanych lokalnie, styl witryny może się radykalnie zmienić.

Krytyczne reguły CSS

Gdy na karcie ‘Optymalizuj’ funkcja ‘Wczytaj CSS asynchronicznie’ jest włączona, krytyczny CSS jest generowany automatycznie. Możesz chcieć wyróżnić kilka dodatkowych definicji, które muszą być najpierw załadowane, aby odpowiednio wyprofilować zawartość strony widocznej na ekranie. Wprowadź te reguły w zwykłym CSS, tak jak pojawiają się one w Twoim arkuszu stylów. Zostaną one dołączone do wygenerowanego CSS .

Wykluczony nieuwzględniony JS

Gdy na karcie ‘Optymalizuj’ funkcja ‘Opóźnij ładowanie JS’ jest włączona, niektóre pliki JavaScript mogą nie być ładowane. Wymień je tutaj, po jednym w wierszu. Możesz podać pełny identyfikator URI lub częściowe ciągi do dopasowania (bez symboli wieloznacznych).

Usuń emoji WordPressa

To ustawienie usuwa dodatkowy plik JavaScript, który jest używany do dodawania obsługi emotikonów w starszych przeglądarkach. Użytkownicy korzystający z nowoczesnych przeglądarek, którzy mają własne natywne wsparcie emoji, nie zauważą różnicy.

Wykluczone URI

Jeśli istnieją strony, które chcesz wykluczyć z optymalizacji, możesz je tutaj wymienić. Możesz użyć pełnej ścieżki lub częściowego ciągu znaków.

Wykluczone role

Mogą istnieć role użytkowników, które chcesz wykluczyć z jakiejkolwiek optymalizacji. Na przykład, jeśli jesteś administratorem, testując nową funkcjonalność, możesz wykluczyć swoją rolę z optymalizacji, aż do zakończenia testów.

Jeśli potrzebujesz dodatkowej pomocy skontaktuj się z naszą Pomocą Techniczną