Wracamy dzisiaj do konfiguracji Page Optimization we wtyczce Litespeed Cache, skupiając się na optymalizacji kodu JavaScript i HTML’a. Podobnie jak w poprzedniej części, Litespeed Cache (Cykl) – cz.5 Page Optimization (Optymizacja CSS), postaram się opisać wszystkie funkcje, które otrzymujemy w związku z optymizacją JS i HTML, które daje nam do dyspozycji ta niewiarygodna wtyczka. Po krótkim wstępie, zapraszam do czytania.
- Czym jest Minifikacja JS
- Czym jest Minifikacja HTML
- Jak usprawnić kod JS i HTML
Ustawienia JS
Ustawienia JS (JavaScript) w LiteSpeed Cache służą do optymalizacji ładowania skryptów JavaScript na stronie, co ma bezpośredni wpływ na czas wczytywania witryny i jej wydajność. Do tego zawsze dążymy
Uwaga: Tak samo jak przy optymizacji CSS, po każdej zmianie należy wyczyścić cache we wtyczce Litespeed Cache i dokładnie sprawdzić stronę, czy działa jak należy.
JS Minify
JS Minify w LiteSpeed Cache pozwala na minifikację plików JavaScript, czyli usunięcie z nich zbędnych znaków, takich jak spacje, komentarze, czy znaki nowej linii. Dzięki temu zmniejsza się rozmiar plików JS, co prowadzi do szybszego ładowania strony.
Minifikacja nie wpływa na działanie kodu – zmienia jedynie jego strukturę w sposób niewidoczny dla użytkownika. Funkcja ta jest szczególnie przydatna na stronach z dużą ilością skryptów, gdzie każdy kilobajt mniej ma znaczenie.
Połącz JS
Opcja Połącz JS w LiteSpeed Cache pozwala na zebranie wszystkich plików JavaScript używanych na stronie w jeden większy plik. Dzięki temu przeglądarka potrzebuje mniej czasu w pobranie tych danych, co przyspiesza ładowanie witryny.
Funkcja ta jest przydatna, gdy strona korzysta z wielu skryptów, które normalnie byłyby ładowane oddzielnie. Zamiast wysyłać wiele osobnych zapytań do serwera, wszystko jest pobierane na raz.
Czasami jednak może to powodować problemy, gdy skrypty wymagają określonej kolejności działania. Na szczęście w LiteSpeed Cache można wskazać, które pliki powinny zostać pominięte, aby uniknąć takich sytuacji.
JS Combine External and Inline
Opcja JS Combine External and Inline w LiteSpeed Cache pozwala połączyć zarówno zewnętrzne pliki JavaScript (te pobierane z serwera), jak i wewnętrzne skrypty wstawione bezpośrednio w kodzie strony. Dzięki temu wszystkie skrypty są zbierane w jeden plik, co zmniejsza liczbę żądań do serwera i przyspiesza ładowanie witryny.
Tę opcję warto włączyć, ponieważ powinna
Opóźnij ładowanie JS
Opóźnij ładowanie JS w LiteSpeed Cache pozwala przyspieszyć ładowanie strony, odkładając w czasie pobieranie skryptów JavaScript, które nie są od razu potrzebne. Dzięki temu przeglądarka skupia się najpierw na wyświetleniu najważniejszych elementów strony, co daje użytkownikom wrażenie szybszego działania witryny. Należy jednak zwrócić uwagę na częstą awaryjność tego rozwiązania, szczególnie na stronach, które wykorzystują web-buildery tj. DIVI czy Elementor, ale również na gotowych motywach.
Jeśli chcesz dowiedzieć się więcej o builderze DIVI, zapraszam do przeczytania artykułu Instalacja i konfiguracja Divi w 10 krokach
W poniższej tabelce przedstawiam opcje opóźniania ładowania JS.
| Ładowanie JS | Równolegle z HTML | Opóźnione do momentu interakcji |
| Wykonanie JS | Po przetworzeniu HTML | Po interakcji użytkownika |
| Kolejność JS | Zachowana | Może być mniej przewidywalna |
| Szybkość strony | Umiarkowana poprawa | Znaczna poprawa |
| Zastosowanie | Skrypty potrzebne po załadowaniu strony | Skrypty mniej istotne, np. reklamy |
HTML Settings
Zajmiemy się teraz konfiguracją HTML, która też daje wiele ciekawych możliwości.
HTML Minify
HTML Minify, podobnie jak minifikacja CSS i JS, to proces, który polega na zmniejszeniu rozmiaru pliku HTML poprzez usunięcie zbędnych znaków i elementów, które nie są potrzebne do prawidłowego działania strony, ale zajmują miejsce w kodzie.
Jakie korzyści wynikają z tego typu procesu?
Mniejszy rozmiar pliku HTML oznacza szybsze pobieranie strony przez przeglądarkę, co przekłada się na lepsze wrażenia użytkownika.
Dzięki zmniejszeniu rozmiaru pliku HTML, mniej danych musi być przesyłanych z serwera do przeglądarki.
Narzędzia takie jak Google PageSpeed Insights mogą przyznać wyższy wynik wydajności, jeżeli strona jest zoptymalizowana, w tym poprzez minifikację HTML.
Wstępne pobieranie DNS (prefetching DNS)
Za pomocą tego ustawienia możesz przeprowadzić rozwiązywanie DNS dla podanych domen zanim zostaną one zażądane.
Prefetching DNS oznacza, iż przeglądarka rozwiązuje adresy DNS (czyli tłumaczy nazwę domeny na adres IP) jeszcze przed tym, jak użytkownik kliknie w link prowadzący do tej domeny. Dzięki temu, gdy użytkownik rzeczywiście kliknie w link, połączenie z docelową stroną jest nawiązywane szybciej, ponieważ DNS został już wcześniej rozwiązany.
DNS Prefetch Control
Szerokie włączenie DNS Prefetch dla wszystkich adresów URL w dokumencie, w tym obrazów, CSS, JavaScript i innych zasobów.
DNS Preconnect
To ustawienie jest podobne do DNS Prefetch, ale podczas gdy DNS Prefetch rozwiązuje DNS, DNS Preconnect idzie o krok dalej, wykonując faktyczne połączenie z docelową stroną poprzez nawiązanie handshake.
Domeny należy wpisywać po jednej w każdej linii.
HTML Lazy Load Selectors
Możesz wybrać, które elementy HTML mają być ładowane „leniwe” (lazy load) na podstawie ich selektora (zwykle ID lub klasy). Wpisz selektory po jednym w każdej linii.
Jeśli masz taki kod:
<span id="przyklad"><p>To jest treść, którą chcę załadować leniwie.</p>
</span>
W polu należy wpisać przyklad, a ten paragraf zostanie załadowany dopiero wtedy, gdy przewinie się do widocznej części strony.
HTML Keep Comments
Komentarze HTML są usuwane podczas minifikacji HTML. To ustawienie pozwala zachować komentarze, które pasują do wzorców wpisanych na liście. Wpisuj jeden wzorzec w każdej linii.
Aby zachować wszystkie komentarze zawierające słowo „LiteSpeed„, dodaj „LiteSpeed” do listy. Dzięki temu zachowane zostaną zarówno komentarze typu <!-- LiteSpeed -->, jak i <!-- komentarz, który wspomina o LiteSpeed -->.
Usuń query strings
To ustawienie usuwa ciągi zapytań (query strings) z zasobów statycznych. Zasoby statyczne z ciągami zapytań mogą nie być cache’owane przez przeglądarki i serwery proxy. Usunięcie tych ciągów pozwala na ich cache’owanie
reCAPTCHA Google będzie omijana automatycznie.
Load Google Fonts Asynchronously
Jeśli nie chcesz ładować całego CSS asynchronicznie, ale zależy Ci na tym, by tylko czcionki Google były ładowane w ten sposób, ta opcja jest dla Ciebie. Włączając ją, umożliwisz asynchroniczne ładowanie czcionek Google, nie zmieniając sposobu ładowania innych zasobów CSS. Dodatkowo, opcja ta automatycznie wykonuje preconnect do Google, co przyspiesza nawiązanie połączenia z serwerem
Usuń czcionki Google
To ustawienie usuwa wszystkie czcionki Google z Twojej strony, jeżeli chcesz je ładować tylko lokalnie (należy o to wcześniej zadbać). Zalecane jest dodatkowe testowanie tego ustawienia po jego wprowadzeniu.
Remove WordPress Emoji
Jeśli ta opcja jest włączona, usunięty zostanie dodatkowy plik JavaScript, który jest używany do obsługi emotikonów w starszych przeglądarkach. Dzięki temu strona może załadować się szybciej, eliminując niepotrzebne zasoby, które nie są już potrzebne w nowoczesnych przeglądarkach
Remove Noscript Tags
Tagi <noscript> są używane dla zapewnienia kompatybilności z starszymi przeglądarkami, które nie obsługują JavaScript, lub w przypadku nowoczesnych przeglądarek, w których JavaScript jest wyłączony ze względów bezpieczeństwa. Tagi te zawierają instrukcje dla przeglądarki, co zrobić, jeżeli nie uda się uruchomić powiązanego skryptu. Jednak należy pamiętać, iż tagi <noscript> zajmują miejsce w kodzie strony, co może wpływać na jej wydajność.
Podsumowanie
Koniec konfigurowania na dziś,. Ja odpocznę, Wy odpocznijcie i niebawem spodziewajcie się kolejnego artykułu o zaawansowanej konfiguracji Litespeed Cache.
