Vyhledávání na webu

Přečtěte si, jak zrychlit webové stránky pomocí modulu Nginx a Gzip


I v době, kdy jsou na celém světě k dispozici značné rychlosti internetu, je každé úsilí o optimalizaci doby načítání webových stránek vítáno s otevřenou náručí.

V tomto článku budeme diskutovat o metodě zvýšení přenosové rychlosti snížením velikosti souborů pomocí komprese. Tento přístup přináší další výhodu v tom, že také snižuje množství šířky pásma použitého v procesu a zlevňuje ho pro majitele webových stránek, který za to platí.

K dosažení cíle uvedeného ve výše uvedeném odstavci použijeme v tomto článku Nginx a jeho vestavěný modul gzip. Jak uvádí oficiální dokumentace, tento modul je filtr, který komprimuje odpovědi pomocí známé kompresní metody gzip. Tím je zajištěno, že velikost přenášených dat bude komprimována na polovinu nebo i více.

Doporučená četba: Nejlepší průvodce zabezpečením, zpevněním a zvýšením výkonu webů Nginx

Než se dostanete na konec tohoto příspěvku, budete mít další důvod, proč zvážit použití Nginx k poskytování vašich webových stránek a aplikací.

Instalace webového serveru Nginx

Nginx je k dispozici pro všechny hlavní moderní distribuce. I když pro tento článek použijeme virtuální stroj CentOS 7 (IP 192.168.0.29).

Pokyny uvedené níže budou fungovat s malými (pokud vůbec) úpravami i v jiných distribucích. Předpokládá se, že váš VM je čerstvou instalací; jinak se budete muset ujistit, že na vašem počítači nejsou spuštěny žádné jiné webové servery (jako je Apache).

Chcete-li nainstalovat Nginx spolu s požadovanými závislostmi, použijte následující příkaz:


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

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

Chcete-li ověřit, že instalace proběhla úspěšně a že Nginx může obsluhovat soubory, spusťte webový server:


systemctl start nginx
systemctl enable nginx

a poté otevřete webový prohlížeč a přejděte na http://192.168.0.29 (nezapomeňte nahradit 192.168.0.29 IP adresou nebo názvem hostitele vašeho serveru) . Měli byste vidět uvítací stránku:

Musíme mít na paměti, že některé typy souborů lze komprimovat lépe než jiné. Soubory ve formátu prostého textu (jako jsou soubory HTML, CSS a JavaScript) se komprimují velmi dobře, zatímco jiné (.iso soubory, tarbally a obrázky, abychom jmenovali alespoň některé) nikoli, protože jsou již přirozeně komprimovány.

Dá se tedy očekávat, že kombinace Nginx a gzip nám umožní zvýšit přenosové rychlosti prvního, zatímco druhý může vykazovat jen malé nebo žádné zlepšení. Všechno.

Je také důležité mít na paměti, že když je povolen modul gzip, soubory HTML jsou VŽDY komprimovány, ale jiné typy souborů se běžně vyskytují v webové stránky a aplikace (jmenovitě CSS a JavaScript) nejsou.

Testování rychlosti webových stránek Nginx BEZ modulu gzip

Pro začátek si stáhněte kompletní šablonu Bootstrap, skvělou kombinaci souborů HTML, CSS a JavaScript.

Po stažení komprimovaného souboru jej rozbalíme do kořenového adresáře bloku našeho serveru (nezapomeňte, že se jedná o ekvivalent Nginx direktivy DocumentRoot v deklaraci virtuálního hostitele 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

V /var/www/html/tecmint byste měli mít následující adresářovou strukturu:


ls -l /var/www/html/tecmint

Nyní přejděte na http://192.168.0.29/tecmint a ujistěte se, že se stránka načítá správně. Většina moderních prohlížečů obsahuje sadu vývojářských nástrojů. V Firefoxu jej můžete otevřít pomocí nabídky Nástroje → Web Developer.

Zajímá nás zejména podnabídka Network, která nám umožní sledovat všechny síťové požadavky probíhající mezi naším počítačem a lokální sítí a internetem.

Doporučené čtení: Nainstalujte Mod_Pagespeed, abyste zrychlili výkon Nginx až 10x

Zkratka k otevření nabídky Síť v nástrojích pro vývojáře je Ctrl + Shift + Q. Stiskněte tuto kombinaci kláves nebo ji otevřete pomocí panelu nabídek.

Protože máme zájem prověřit přenos souborů HTML, CSS a JavaScript, klikněte na tlačítka ve spodní části a obnovte stránku. Na hlavní obrazovce uvidíte podrobnosti o přenosu všech souborů HTML, CSS a JavaScript:

Napravo od sloupce Velikost (který zobrazuje jednotlivé velikosti souborů) uvidíte jednotlivé časy přenosu. Můžete také dvakrát kliknout na daný soubor a zobrazit další podrobnosti na kartě Časování.

Nezapomeňte si poznamenat časování zobrazené na obrázku výše, abyste je mohli porovnat se stejným přenosem, jakmile povolíme modul gzip.

Povolení a konfigurace modulu gzip v Nginx

Chcete-li povolit a nakonfigurovat modul gzip, otevřete /etc/nginx/nginx.conf, vyhledejte hlavní blok serveru, jak je znázorněno na obrázku níže, a přidejte nebo upravte následující řádky (nezapomeňte na středník na konci, jinak Nginx vrátí chybovou zprávu při pozdějším restartování!)


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

Direktiva gzip modul gzip zapne nebo vypne, zatímco gzip_types se používá k výpisu všech typů MIME, které by měl modul zpracovat.

Chcete-li se dozvědět více o typech MIME a zobrazit dostupné typy, přejděte na Basics_of_HTTP_MIME_types.

Testování rychlosti webových stránek Nginx pomocí kompresního modulu Gzip

Jakmile dokončíme výše uvedené kroky, restartujte Nginx a znovu načtěte stránku stisknutím Ctrl + F5 (opět to funguje ve Firefoxu, takže pokud používáte jiný prohlížeč, prostudujte si nejprve příslušnou dokumentaci) k přepsání mezipaměti a sledujte časy přenosu:


systemctl restart nginx

Karta síťové požadavky ukazuje některá významná vylepšení. Porovnejte načasování a uvidíte sami, mějte na paměti, že se jedná o přenosy mezi naším počítačem a 192.168.0.29 (převody mezi servery Google a sítěmi CDN jsou mimo náš dosah):

Podívejme se například na následující příklady přenosu souborů před/po povolení gzip. Časy jsou uvedeny v milisekundách:

  1. index.html (zastoupený /tecmint/ v horní části seznamu): 15/4
  2. Creative.min.css: 18/8
  3. jquery.min.js: 17/7

Nemáte díky tomu rádi Nginx ještě víc? Pokud jde o mě, platí!

Doporučená četba: 5 tipů, jak zvýšit výkon vašeho webového serveru Apache

souhrn

V tomto článku jsme ukázali, že můžete použít modul Nginx gzip k urychlení přenosu souborů. Oficiální dokumentace k modulu gzip uvádí další konfigurační direktivy, na které se možná budete chtít podívat.

Web Mozilla Developer Network navíc obsahuje záznam o Network Monitor, který vysvětluje, jak tento nástroj používat k pochopení toho, co se děje v zákulisí síťového požadavku.

Jako vždy, pokud máte nějaké dotazy k tomuto článku, neváhejte použít níže uvedený formulář pro komentáře. Vždy se na vás těšíme!