Wyszukiwanie w witrynie

Dowiedz się, jak przyspieszyć strony internetowe za pomocą modułu Nginx i Gzip


Nawet w czasach, gdy na całym świecie dostępne są znaczne prędkości Internetu, wszelkie wysiłki mające na celu optymalizację czasu ładowania strony internetowej są mile widziane z otwartymi ramionami.

W tym artykule omówimy metodę zwiększania prędkości transferu poprzez zmniejszenie rozmiaru plików poprzez kompresję. Takie podejście przynosi dodatkową korzyść, ponieważ zmniejsza również przepustowość wykorzystywaną w procesie i sprawia, że jest to tańsze dla właściciela witryny, który za to płaci.

Aby osiągnąć cel określony w powyższym akapicie, w tym artykule użyjemy Nginx i jego wbudowanego modułu gzip. Jak podaje oficjalna dokumentacja, moduł ten jest filtrem kompresującym odpowiedzi przy użyciu dobrze znanej metody kompresji gzip. Dzięki temu rozmiar przesyłanych danych zostanie skompresowany o połowę lub nawet więcej.

Sugerowana lektura: Kompletny przewodnik po zabezpieczaniu, wzmacnianiu i zwiększaniu wydajności witryn internetowych Nginx

Zanim dotrzesz do końca tego posta, będziesz miał kolejny powód, aby rozważyć użycie Nginx do obsługi swoich witryn i aplikacji.

Instalowanie serwera WWW Nginx

Nginx jest dostępny dla wszystkich głównych nowoczesnych dystrybucji. Chociaż w tym artykule użyjemy maszyny wirtualnej CentOS 7 (IP 192.168.0.29).

Instrukcje podane poniżej będą działać z niewielkimi (jeśli w ogóle) modyfikacjami w innych dystrybucjach. Zakłada się, że Twoja VM to nowa instalacja; w przeciwnym razie musisz upewnić się, że na Twoim komputerze nie działają żadne inne serwery internetowe (takie jak Apache).

Aby zainstalować Nginx wraz z wymaganymi zależnościami, użyj następującego polecenia:


----------- On CentOS/RHEL 7 and Fedora 22-24 ----------- 
yum update && yum install nginx

----------- On Debian and Ubuntu Distributions ----------- 
apt update && apt install nginx

Aby sprawdzić, czy instalacja zakończyła się pomyślnie i czy Nginx może udostępniać pliki, uruchom serwer WWW:


systemctl start nginx
systemctl enable nginx

a następnie otwórz przeglądarkę internetową i przejdź do http://192.168.0.29 (nie zapomnij zastąpić 192.168.0.29 adresem IP lub nazwą hosta swojego serwera) . Powinieneś zobaczyć stronę powitalną:

Musimy pamiętać, że niektóre typy plików można skompresować lepiej niż inne. Zwykłe pliki tekstowe (takie jak pliki HTML, CSS i JavaScript) kompresują się bardzo dobrze, podczas gdy inne (.iso pliki, tarballe i obrazy, żeby wymienić tylko kilka), ponieważ są one już z natury skompresowane.

Zatem należy się spodziewać, że połączenie Nginx i gzip pozwoli nam zwiększyć prędkość transferu pierwszego, podczas gdy drugie może wykazywać niewielką lub żadną poprawę przy Wszystko.

Należy również pamiętać, że gdy moduł gzip jest włączony, pliki HTMLZAWSZE kompresowane, ale inne typy plików powszechnie spotykane witryny i aplikacje (mianowicie CSS i JavaScript) nie są.

Testowanie prędkości witryny Nginx BEZ modułu gzip

Na początek pobierzmy kompletny szablon Bootstrap, będący świetną kombinacją plików HTML, CSS i JavaScript.

Po pobraniu skompresowanego pliku rozpakujemy go do katalogu głównego naszego bloku serwera (pamiętajcie, że jest to Nginx odpowiednik dyrektywy DocumentRoot w deklaracji wirtualnego hosta Apache ):


cd /var/www/html
wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
unzip -a gh-pages.zip
mv startbootstrap-creative-gh-pages tecmint

Wewnątrz /var/www/html/tecmint powinieneś mieć następującą strukturę katalogów:


ls -l /var/www/html/tecmint

Teraz przejdź do http://192.168.0.29/tecmint i upewnij się, że strona ładuje się poprawnie. Większość nowoczesnych przeglądarek zawiera zestaw narzędzi programistycznych. W Firefoxie możesz go otworzyć za pomocą menu Narzędzia → Twórca stron internetowych.

Nas szczególnie interesuje podmenu Sieć, które pozwoli nam monitorować wszystkie żądania sieciowe przechodzące pomiędzy naszym komputerem a siecią lokalną i Internetem.

Sugerowana lektura: Zainstaluj Mod_Pagespeed, aby przyspieszyć wydajność Nginx nawet 10-krotnie

Skrót do otwierania menu Sieć w narzędziach programistycznych to Ctrl + Shift + Q. Naciśnij tę kombinację klawiszy lub użyj paska menu, aby ją otworzyć.

Ponieważ jesteśmy zainteresowani sprawdzeniem transferu plików HTML, CSS i JavaScript, kliknij przyciski na dole i odśwież stronę. Na ekranie głównym zobaczysz szczegóły transferu wszystkich plików HTML, CSS i JavaScript:

Po prawej stronie kolumny Rozmiar (która pokazuje rozmiary poszczególnych plików) zobaczysz czas poszczególnych transferów. Możesz także kliknąć dwukrotnie dowolny plik, aby zobaczyć więcej szczegółów na karcie Czasy.

Pamiętaj, aby zanotować czasy pokazane na powyższym obrazku, aby móc je porównać z tym samym przelewem po włączeniu modułu gzip.

Włączanie i konfiguracja modułu gzip w Nginx

Aby włączyć i skonfigurować moduł gzip, otwórz /etc/nginx/nginx.conf, zlokalizuj główny blok serwera, jak pokazano na poniższym obrazku, i dodaj lub zmodyfikuj następujące linie (nie zapomnij o średniku na końcu, w przeciwnym razie Nginx zwróci komunikat o błędzie podczas ponownego uruchamiania później!)


root     	/var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;

Dyrektywa gzip włącza włącz lub wyłącz moduł gzip, natomiast dyrektywa gzip_types służy do wyszczególnienia wszystkich typów MIME, które moduł powinien obsługiwać.

Aby dowiedzieć się więcej o typach MIME i wyświetlić dostępne typy, przejdź do Basics_of_HTTP_MIME_types.

Testowanie prędkości witryny Nginx za pomocą modułu kompresji Gzip

Po wykonaniu powyższych kroków zrestartujmy Nginx i załaduj ponownie stronę, naciskając Ctrl + F5 (ponownie działa to w Firefoxie, więc jeśli używasz innej przeglądarki, zapoznaj się najpierw z odpowiednią dokumentacją), aby zastąpić pamięć podręczną i obserwujmy czasy transferu:


systemctl restart nginx

Karta żądań sieciowych zawiera kilka znaczących ulepszeń. Porównaj czasy, aby przekonać się sam, pamiętając, że są to transfery między naszym komputerem a 192.168.0.29 (transfery między serwerami Google a sieciami CDN są poza naszym zasięgiem):

Rozważmy na przykład następujące przykłady przesyłania plików przed/po włączeniu gzip. Czasy podawane są w milisekundach:

  1. index.html (reprezentowany przez /tecmint/ na górze listy): 15/4
  2. Kreatywny.min.css: 18/8
  3. jquery.min.js: 17/7

Czy to nie sprawia, że jeszcze bardziej kochasz Nginx? Jeśli o mnie chodzi, tak!

Sugerowana lektura: 5 wskazówek pozwalających zwiększyć wydajność serwera internetowego Apache

Streszczenie

W tym artykule pokazaliśmy, że możesz użyć modułu gzip Nginx, aby przyspieszyć przesyłanie plików. Oficjalna dokumentacja modułu gzip zawiera listę innych dyrektyw konfiguracyjnych, którym warto się przyjrzeć.

Dodatkowo w witrynie Mozilla Developer Network znajduje się wpis dotyczący Monitora sieci, który wyjaśnia, jak używać tego narzędzia, aby zrozumieć, co dzieje się za kulisami w żądaniu sieciowym.

Jak zawsze, jeśli masz jakiekolwiek pytania dotyczące tego artykułu, możesz skorzystać z poniższego formularza komentarza. Zawsze czekamy na wiadomość od Ciebie!