Uśredniony rozmiar stron internetowych stale rośnie. Chociaż dostęp do szybkiego, szerokopasmowego internetu również się zwiększa, wielu użytkowników (szczególnie korzystających z mobilnego internetu) nie zawsze ma wystarczająco szybkie połączenie, aby strony wczytywały się w ciągu kilku sekund.
Według serwisu keycdn.com, w ciągu ostatniej dekady średni rozmiar strony internetowej na komputery wzrósł z 803 KB do 2284 KB (184%), natomiast rozmiar wersji mobilnych stron wzrósł z 386 KB do 2010 KB (420%):
Źródło: https://www.keycdn.com/support/the-growth-of-web-page-size
W tym artykule dowiesz się jak sprawdzić, czy masz włączoną kompresję na swojej stronie internetowej oraz jak włączyć ją włączyć w zależności od używanego serwera.
Jak sprawdzić, czy kompresja gzip jest włączona?
Jeżeli kompresja gzip jest włączona, serwer zwracający zasoby strony zwróci również nagłówek:
Content-Encoding: gzip
Możesz to sprawdzić w narzędziach deweloperskich w dowolnej przeglądarce, ale prościej będzie skorzystać z gotowych serwisów, które zrobią to za Ciebie. Wystarczy, że wpiszesz adres strony, którą chcesz sprawdzić. Jednym z takich serwisów jest np. https://www.giftofspeed.com/gzip-test/. Warto przeprowadzić test nie tylko dla strony głównej, ale także dla podstron oraz różnych zasobów: obrazków, czcionek, arkuszy styli czy plików JS. Może się okazać, że wskutek nieprawidłowej konfiguracji serwera, jedynie strona główna będzie skompresowana, a pozostałe zasoby już nie.
Jak włączyć kompresję gzip na stronie?
Sposób włączenia kompresji gzip zależy od oprogramowania serwera (najczęściej Apache, Nginx lub IIS). Jeżeli korzystasz
z hostingu współdzielonego i nie zarządzasz samodzielnie swoim serwerem, najlepiej będzie skontaktować się z
administratorem firmy hostingowej z prośbą o włączenie kompresji. Możesz również spróbować włączyć kompresję za pomocą
pliku .htaccess umieszczonego w głównym katalogu z plikami swojej strony. Poniżej dowiesz się, jak to zrobić:
Włączenie gzip na serwerze Apache
Za pomocą pliku .htaccess
Poszukaj pliku .htaccess na swoim serwerze. Jeżeli go nie znajdziesz, utwórz go w głównym katalogu swojego serwera (
zazwyczaj tam, gdzie znajdują się również pliki takie jak index.html czy index.php). Wklej na jego końcu poniższy
tekst:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
Zwróć uwagę, że wśród typów plików poddawanych kompresji nie ma popularnych rozszerzeń dla plików graficznych takich jak JPEG, PNG czy WEBP. Wynika to z tego, że formaty tych plików już same w sobie obejmują kompresję. Ponowna kompresja nie zmniejszyłaby rozmiaru pliku, a jedynie niepotrzebnie obciążyłaby serwer koniecznymi do wykonania obliczeniami.
Przez zmianę konfiguracji serwera
Zaloguj się jako użytkownik root (jeżeli nie posiadasz dostępu root do serwera, wypróbuj sposób poprzez zmianę pliku .
htaccess).
Najpierw upewnij się, że masz włączony moduł odpowiedzialny za kompresję na serwerze poleceniem:
a2enmod deflate
Następnie utwórz nowy plik w lokalizacji /etc/apache2/conf-available/gzip.conf o następującej treści:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/webp
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
Zapisz plik i dołącz go do konfiguracji serwera za pomocą komendy:
a2enconf gzip
Następnie zrestartuj serwer:
systemctl restart apache2
Włączenie gzip na serwerze Nginx
Kompresja gzip jest domyślnie włączona na serwerze, ale jeżeli u Ciebie jest inaczej, otwórz plik
/etc/nginx/nginx.conf i wprowadź poniższe zmiany do sekcji “Gzip Settings”:
##
# Gzip Settings
##
gzip on;
gzip_types application/javascript application/rss+xml application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/opentype font/otf font/ttf image/svg+xml image/x-icon text/css text/html text/javascript text/plain text/xml;
Zapisz, a następnie zrestartuj serwer:
systemctl restart nginx
Włączenie gzip na serwerze IIS
Na początku upewnij się, że masz zainstalowane na serwerze rozszerzenie odpowiedzialne za kompresję: https://learn.microsoft.com/en-us/iis/configuration/system.webServer/httpCompression/.
Aby włączyć kompresję gzip, wykonaj następujące kroki:
- Wciśnij jednocześnie przycisk Windows + R i w wyświetlonym polu tekstowym wprowadź frazę: Inetmgr. Możesz również ręcznie odszukać i otworzyć menedżera IIS.
- Wybierz stronę, dla której chcesz włączyć kompresję.
- W szczegółach strony w sekcji IIS odszukaj i kliknij ikonę “Kompresja”.
- W oknie dialogowym zaznacz checkbox odpowiedzialny za włączenie kompresji (jeżeli jest on zablokowany, sprawdź czy na poziomie serwera włączona jest kompresja - wykonaj te same kroki, tylko zamiast strony, wybierz z drzewa po lewej stronie jego najwyższy węzeł. Zazwyczaj jest to nazwa komputera/serwera).
Podsumowanie
Podsumowując, kompresja gzip jest prostym i skutecznym sposobem na przyspieszenie ładowania stron internetowych poprzez zmniejszenie rozmiaru przesyłanych danych nawet o 70%. Choć ponad 86% stron internetowych już korzysta z tej technologii, wiele z nich wciąż tego nie robi, co oznacza straty w wydajności i dłuższy czas ładowania. Włączenie gzip można łatwo przeprowadzić na różnych serwerach, takich jak Apache, Nginx czy IIS, co pokazaliśmy w tym artykule.
Włączenie kompresji gzip to tylko jeden ze sposobów na przyspieszenie strony internetowej. Zobacz również pozostałe metody w naszym innym tekście: https://ping.pl/blog/posts/jak-przyspieszyc-strone-internetowa-10-najlepszych-sposobow/.
Monitoruj szybkość wczytywania się strony na https://ping.pl/.