Litespeed Cache (Cykl) – cz.5 Page Optimization (Optymizacja CSS)

Po dłuższej przerwie kontynuujemy cykl, skupiając się tym razem na optymalizacji strony. Ten temat jest dość specyficzny i rozległy, dlatego należy podchodzić do niego w bezpieczny sposób. Nie każda strona będzie się zachowywała tak samo, istnieje natomiast ryzyko, iż pewne ustawienia mogą ją zdezorganizować . Tego oczywiście nie chcemy, więc po wprowadzeniu każdej pojedynczej zmiany w tej kategorii należy wyczyścić cache i zweryfikować, czy serwis przez cały czas działa dokładnie tak jak tego chcemy.

Poprzedni artykuł z cyklu znajdziesz tutaj – Litespeed Cache (Cykl) – tajniki zaawansowanej konfiguracji – cz.4 CDN i Optymalizacja obrazków

Funkcjonalność Page Optimization

Jednym z podstawowych zadań w Page Optimization jest optymalizacja kodu HTML, CSS i JavaScript. LiteSpeed Cache umożliwia minifikację tych plików, czyli usunięcie zbędnych znaków, komentarzy i spacji, co zmniejsza ich rozmiar. Kolejnym krokiem jest ich łączenie, dzięki czemu przeglądarka użytkownika wykonuje mniej zapytań do serwera. Funkcja asynchronicznego ładowania skryptów pozwala natomiast na priorytetyzację kluczowych zasobów, aby strona ładowała się szybciej.

Uwaga: Łączenie plików CSS/JS w jeden może spowodować duży przyrost danych na dysku serwera, a co za tym idzie, wysycenie limitu jego pojemności. Jednym z rozwiązań może być wyłączenie

W sekcji Page Optimization można również włączyć lazy loading dla obrazów i iframe’ów. Dzięki temu treści wizualne są ładowane dopiero wtedy, gdy użytkownik przewija stronę, co znacznie zmniejsza obciążenie przy początkowym ładowaniu strony. LiteSpeed Cache oferuje również narzędzia do optymalizacji czcionek, które pozwalają uniknąć problemu „mrugania” tekstu podczas ich ładowania.

Nie można zapomnieć o wsparciu dla HTTP/2 Push, które przyspiesza dostarczanie zasobów, oraz o zaawansowanych ustawieniach buforowania przeglądarki. Dzięki nim przeglądarka użytkownika zapamiętuje zasoby, które już wcześniej zostały pobrane, co redukuje czas ładowania przy kolejnych wizytach.

Ustawienia CSS

Przechodzimy od razu do opisu konfiguracji, która ma na celu zoptymalizowanie kodu CSS. W tej zakładce mamy dostęp do poniższych funkcji:

CSS Minify

CSS Minify to funkcja, która optymalizuje pliki CSS na stronie internetowej, zmniejszając ich rozmiar. Proces ten polega na usunięciu zbędnych znaków, takich jak:

• spacje,
• komentarze,
• znaki nowej linii,
• nadmiarowe separatory (np. średniki, przecinki).

Przykładowo, taki kod:

body {
margin: 0;
padding: 0;
}

po minifikacji będzie wyglądał następująco:

body{margin:0;padding:0;}

Ważne: Minifikacja czasami może powodować problemy z niektórymi motywami lub wtyczkami, jeżeli ich kod CSS nie jest napisany zgodnie ze standardami. W takich przypadkach możesz dodać problematyczne pliki do listy wykluczeń.
Po włączeniu funkcji warto przetestować działanie strony, aby upewnić się, iż wszystko wygląda i działa poprawnie.

Połączenie CSS

Połączenie CSS to funkcja, która łączy wiele plików CSS w jeden. Zamiast ładować kilka osobnych plików, przeglądarka pobiera jeden większy plik, co zmniejsza liczbę zapytań HTTP do serwera.

Przykład:
Zamiast ładować oddzielnie trzy pliki CSS:

style1.css style2.css style3.css wtyczka tworzy jeden plik: combined-style.css

Ważne: tak samo jak w przypadku minifikacji, W niektórych przypadkach połączenie CSS może powodować błędy w wyświetlaniu strony, na przykład jeżeli pliki są zależne od określonej kolejności ładowania.

Połączenie CSS to skuteczna metoda optymalizacji strony, ale wymaga przemyślanego wdrożenia i testowania, aby uniknąć problemów z kompatybilnością. W połączeniu z innymi funkcjami LiteSpeed Cache, takimi jak Minifikacja CSS, może znacząco poprawić wydajność witryny.

Wygeneruj UCSS

Funkcja Wygeneruj UCSS (Unique CSS) w LiteSpeed Cache pozwala zoptymalizować działanie strony poprzez identyfikację i usunięcie nieużywanych fragmentów kodu CSS z połączonego pliku CSS. Dzięki temu generowany jest plik CSS zawierający tylko te style, które są rzeczywiście wykorzystywane przez przeglądarkę podczas wyświetlania danej podstrony Twojego serwisu.

Przykład:
Jeśli w pliku CSS znajduje się kod:

header { background: #fff; }
footer { background: #000; }
.sidebar { display: none; }

ale na konkretnej stronie nie ma elementu .sidebar, to styl .sidebar { display: none; } zostanie pominięty w wygenerowanym pliku.

Informujemy: Proces generowania zoptymalizowanych plików CSS może chwilę potrwać, zwłaszcza przy większych stronach. Dodatkowo, jeżeli Twoja strona korzysta z dynamicznie dodawanych elementów (np. przez JavaScript), możesz zauważyć problemy z wyświetlaniem – w takich przypadkach warto manualnie przejrzeć UCSS lub dostosować ustawienia.

UCSS Inline

UCSS Inline to opcja, która pozwala na osadzanie zoptymalizowanego kodu CSS (UCSS) bezpośrednio w kodzie HTML strony. Dzięki temu przeglądarka nie musi pobierać zewnętrznego pliku CSS, co przyspiesza wyświetlanie kluczowych elementów strony.

Przykład:
Zamiast odwołania do zewnętrznego pliku:

<link rel="stylesheet" href="style.css">

w kodzie HTML pojawi się:

<style>
body { margin: 0; padding: 0; }
header { background: #fff; }
</style>

Informujemy: UCSS Inline najlepiej sprawdza się na stronach z niewielką ilością CSS. Przy większych ilościach kodu może być lepsze ładowanie plików zewnętrznych.

CSS Combine External and Inline

Funkcja CSS Combine External and Inline dostępna w LiteSpeed Cache umożliwia łączenie stylów CSS zarówno z zewnętrznych plików, jak i tych osadzonych inline w kodzie HTML. Dzięki temu powstaje jeden spójny plik CSS, który ładowany jest jako zewnętrzny zasób. Rozwiązanie to redukuje liczbę zapytań HTTP.

Ładuj CSS asynchronicznie

Opcja Ładuj CSS asynchronicznie dostępna w LiteSpeed Cache pozwala na załadowanie stylów CSS w sposób asynchroniczny, co oznacza, iż przeglądarka nie blokuje renderowania strony w oczekiwaniu na pobranie i przetworzenie plików CSS. Dzięki temu użytkownik szybciej widzi podstawową zawartość strony, choćby jeżeli pełny styl CSS nie został jeszcze wczytany. Aby korzystać z tego rozwiązania, należy ustawić lub mieć ustawiony klucz domeny w kategorii „Ogólne”.

CCSS Per URL

Opcja CCSS Per URL pozwala na generowanie oddzielnych reguł CSS dla każdej strony z osobna. Oznacza to, iż każda strona na Twojej witrynie może mieć własne, zoptymalizowane ustawienia CSS, które uskutecznią ich ładowanie. Zamiast używać tego samego zestawu reguł dla całej witryny, każda podstrona ma swoje własny, zoptymalizowany Krytyczny CSS.

Wewnętrzny CSS Async Lib

Funkcja Wewnętrzny CSS Async Lib w LiteSpeed Cache pozwala na równoległe ładowanie plików CSS równolegle z innymi elementami strony, co przyspiesza czas jej ładowania i poprawia wrażenia użytkowników.

Jeśli interesujesz się zagadnieniami związanymi z UX (User Experience), zachęcamy do przeczytania naszego artykułu UX writing – zasady i dobre praktyki

Font Display Optimization

Font Display Optimization to funkcja, która pozwala na kontrolowanie, w jaki sposób czcionki są ładowane i wyświetlane na stronie. Główna idea to upewnienie się, iż tekst jest wyświetlany jak najszybciej, choćby jeżeli czcionka zewnętrzna (np. Google Fonts) nie pozostało w pełni załadowana.

Przykładowo, gdy czcionki zewnętrzne są ładowane, strona może poczekać na załadowanie tych czcionek, zanim wyświetli tekst. Font Display Optimization pozwala kontrolować, jak zachowują się czcionki, gdy są ładowane, umożliwiając wyświetlanie tekstu od razu, a czcionki są zastosowane dopiero po ich załadowaniu.

Podsumowanie

Konfiguracja CSS w Page Optimization daje bardzo duże możliwości optymalizacji strony, jednak chcę ponownie położyć silny nacisk na kwestię związaną z testowaniem wprowadzonych funkcjonalności, na szczęście w większości przypadków można w łatwy sposób odkręcić problem.