Włączanie kompresji Gzip lub Brotli w WordPress

Gdy przeglądarka żąda strony z Twojej witryny WordPress, serwer odsyła HTML, CSS, JavaScript i inne pliki tekstowe. Bez kompresji pliki te są przesyłane w pełnym rozmiarze. Włączenie kompresji może zmniejszyć te rozmiary o 70-90%, co bezpośrednio przekłada się na szybsze ładowanie stron i niższe koszty transferu.

Jak kompresja działa za kulisami

Kompresja opiera się na negocjacji między przeglądarką a serwerem. Gdy przeglądarka wysyła żądanie, dołącza nagłówek Accept-Encoding wymieniający obsługiwane algorytmy kompresji, zazwyczaj gzip, deflate, br. Serwer sprawdza ten nagłówek, kompresuje odpowiedź najlepszym dostępnym algorytmem i wysyła ją z nagłówkiem Content-Encoding wskazującym użytą metodę. Następnie przeglądarka dekompresuje treść przed jej wyrenderowaniem. Cały ten proces jest przezroczysty dla użytkownika końcowego.

Istnieją dwa główne algorytmy kompresji, z którymi się spotkasz:

• Gzip: Standard branżowy od ponad dwóch dekad. Obsługiwany przez każdą przeglądarkę i serwer webowy. Typowe współczynniki kompresji dla plików tekstowych to 70-80%.
• Brotli: Opracowany przez Google i wydany w 2015 roku. Oferuje 15-25% lepsze współczynniki kompresji niż Gzip przy porównywalnym zużyciu CPU. Obsługiwany przez wszystkie nowoczesne przeglądarki. Działa tylko przez połączenia HTTPS.

Które typy plików powinny być kompresowane

Kompresja działa najlepiej na treści tekstowej i powtarzalnej. Powinieneś ją włączyć dla następujących typów MIME:

• Pliki tekstowe: text/html, text/css, text/javascript, text/xml, text/plain
• Pliki aplikacyjne: application/javascript, application/json, application/xml, application/rss+xml, application/atom+xml
• Czcionki i SVG: image/svg+xml, font/ttf, font/otf (czcionki WOFF i WOFF2 są już skompresowane)

Nie kompresuj plików binarnych takich jak JPEG, PNG, WebP, GIF, MP4 lub PDF. Te formaty już używają własnych algorytmów kompresji, a ponowna kompresja marnuje CPU bez zmniejszania rozmiaru pliku.

Oczekiwane oszczędności rozmiaru

Aby dać konkretny obraz tego, co osiąga kompresja, oto kilka rzeczywistych przykładów:

• Typowa strona HTML WordPress (80 KB): Kompresuje się do około 15-20 KB z Gzip lub 12-16 KB z Brotli.
• Biblioteka jQuery (90 KB zminifikowana): Kompresuje się do około 30 KB z Gzip lub 25 KB z Brotli.
• Bootstrap CSS (160 KB): Kompresuje się do około 25 KB z Gzip lub 20 KB z Brotli.
• Duża odpowiedź JSON API (500 KB): Kompresuje się do około 50-80 KB z Gzip.

W całej witrynie WordPress włączenie kompresji zazwyczaj zmniejsza całkowity rozmiar transferu o 60-80%.

Apache: włączanie Gzip z mod_deflate

Jeśli Twoja witryna WordPress działa na Apache (co ma miejsce w przypadku większości dostawców hostingu współdzielonego), dodaj następujące wpisy do pliku .htaccess. Umieść je przed regułami rewrite WordPress:

<IfModule mod_deflate.c>
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom+xml
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/woff

    # Remove browser bugs for older browsers
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

    # Make sure proxies deliver the correct content
    Header append Vary Accept-Encoding
</IfModule>

Otoczka IfModule zapewnia, że ta konfiguracja jest stosowana tylko wtedy, gdy mod_deflate jest zainstalowany. U większości dostawców hostingu jest domyślnie włączony. Jeśli po dodaniu tego kodu otrzymasz błąd 500 Internal Server Error, skontaktuj się z hostem, aby potwierdzić, że mod_deflate jest dostępny.

Nginx: włączanie kompresji Gzip

Jeśli Twój serwer działa na Nginx, dodaj następujące dyrektywy do bloku serwera lub bloku http w pliku nginx.conf:

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_min_length 256;
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/x-javascript
    application/xml
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf;

Kilka uwag dotyczących tych ustawień: gzip_comp_level 6 oferuje dobrą równowagę między współczynnikiem kompresji a zużyciem CPU. Poziomy powyżej 6 dają malejące zyski, znacznie zwiększając obciążenie CPU. Dyrektywa gzip_min_length 256 zapobiega kompresji bardzo małych plików, gdzie narzut kompresji jest większy niż oszczędność. Dyrektywa gzip_vary on informuje cachujące proxy, aby przechowywały oddzielne wersje dla skompresowanej i nieskompresowanej treści.

Nginx: włączanie kompresji Brotli

Brotli nie jest częścią standardowego pakietu Nginx. Musisz oddzielnie zainstalować moduł ngx_brotli lub użyć dystrybucji, która go zawiera (wiele nowoczesnych dystrybucji Linuksa oferuje go jako opcjonalny pakiet). Po instalacji dodaj to do konfiguracji Nginx:

brotli on;
brotli_comp_level 6;
brotli_min_length 256;
brotli_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/x-javascript
    application/xml
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf;

Możesz uruchomić Gzip i Brotli jednocześnie. Nginx serwuje Brotli przeglądarkom, które go obsługują, i wraca do Gzip dla pozostałych. To zalecana konfiguracja dla maksymalnej kompatybilności.

Wtyczki WordPress obsługujące kompresję

Jeśli nie masz dostępu do plików konfiguracyjnych serwera (typowe w hostingu współdzielonym), kilka wtyczek cachujących WordPress może włączyć kompresję za Ciebie:

• WP Rocket: Automatycznie dodaje reguły kompresji Gzip do pliku .htaccess przy aktywacji. Nie wymaga dodatkowej konfiguracji. To wtyczka premium.
• LiteSpeed Cache: Jeśli Twój host używa serwera LiteSpeed, ta wtyczka włącza kompresję na poziomie serwera, co jest bardziej wydajne niż mod_deflate Apache. Darmowa i dostępna w repozytorium wtyczek WordPress.
• W3 Total Cache: Oferuje kompresję Gzip jako część ustawień Browser Cache. Włącz ją w Performance > Browser Cache > HTTP compression. Darmowa, ale ma stromą krzywą uczenia się.
• WP Super Cache: Zawiera opcję "Compress pages", która serwuje wstępnie skompresowane pliki statyczne. Prostsza niż W3 Total Cache, ale z mniejszą liczbą opcji.

Pamiętaj, że jeśli Twój dostawca hostingu już włącza kompresję na poziomie serwera, ponowne dodanie jej przez wtyczkę nie ma dodatkowego efektu. Sprawdź to przed wprowadzeniem zmian.

Jak przetestować, czy kompresja działa

Po włączeniu kompresji musisz zweryfikować, że jest faktycznie stosowana. Oto kilka metod:

• Browser DevTools: Otwórz swoją witrynę, naciśnij F12, aby otworzyć DevTools, przejdź do zakładki Network i przeładuj stronę. Kliknij żądanie HTML, CSS lub JS i spójrz na nagłówki odpowiedzi. Powinieneś zobaczyć Content-Encoding: gzip lub Content-Encoding: br. Możesz też porównać kolumnę "Size" (rozmiar skompresowanego transferu) z kolumną "Content" lub "Resource" (rzeczywisty rozmiar po dekompresji).
• Narzędzia online: Strony takie jak GTmetrix, Google PageSpeed Insights i checker kompresji KeyCDN mogą zweryfikować, że Twoja witryna serwuje skompresowaną treść. Oznaczają nieskompresowane zasoby, jeśli zostaną znalezione.
• Wiersz poleceń: Jeśli masz dostęp do terminala, możesz użyć curl -H "Accept-Encoding: gzip" -I https://twojawitryna.pl, aby zobaczyć nagłówki odpowiedzi. Poszukaj nagłówka Content-Encoding w wyniku.
• Skanowanie InspectWP: Uruchom nowe skanowanie InspectWP po włączeniu kompresji. Sekcja wydajności pokazuje wartość Content-Encoding. Powinno być widoczne gzip lub br (Brotli) zamiast pustego lub brakującego.

Rozwiązywanie typowych problemów

Jeśli kompresja nie działa po zmianach, sprawdź następujące rzeczy:

• Nadpisanie przez CDN: Jeśli używasz CDN takiego jak Cloudflare, CDN może obsługiwać kompresję niezależnie od ustawień Twojego serwera. Cloudflare domyślnie włącza Gzip i oferuje Brotli jako przełącznik w ustawieniach Speed.
• Moduł serwera nie załadowany: Na Apache mod_deflate musi być włączony. Skontaktuj się z dostawcą hostingu, jeśli nie masz pewności. Na Nginx moduł Brotli wymaga oddzielnej instalacji.
• Konflikty reguł: Wiele wtyczek lub reguł .htaccess próbujących ustawić kompresję może wchodzić w konflikt. Sprawdź duplikujące się bloki mod_deflate w pliku .htaccess.
• Warstwa proxy lub cache: Reverse proxy takie jak Varnish mogą usuwać lub modyfikować nagłówki kompresji. Upewnij się, że każda warstwa w stacku jest poprawnie skonfigurowana.