Leer hoe u websites kunt versnellen met behulp van de Nginx- en Gzip-module

Zelfs in een tijd waarin er over de hele wereld aanzienlijke internetsnelheden beschikbaar zijn, is elke poging om de laadtijden van websites te optimaliseren met open armen welkom.

In dit artikel bespreken we een methode om de overdrachtssnelheid te verhogen door de bestandsgrootte te verkleinen door middel van compressie. Deze aanpak heeft als extra voordeel dat het ook de hoeveelheid bandbreedte vermindert die in het proces wordt gebruikt, en het goedkoper maakt voor de website-eigenaar die ervoor betaalt.

Om het doel dat in de bovenstaande paragraaf staat te bereiken, zullen we in dit artikel Nginx en de ingebouwde gzip module gebruiken. Zoals de officiële documentatie vermeldt, is deze module een filter dat antwoorden comprimeert met behulp van de bekende gzip-compressiemethode. Dit zorgt ervoor dat de grootte van de verzonden gegevens met de helft of zelfs meer wordt gecomprimeerd.

Aanbevolen leesmateriaal: De ultieme gids voor het beveiligen, versterken en verbeteren van de prestaties van Nginx-websites

Tegen de tijd dat je onderaan dit bericht bent aangekomen, heb je nog een reden om te overwegen om Nginx te gebruiken voor je websites en applicaties.

Nginx-webserver installeren

Nginx is beschikbaar voor alle grote moderne distributies. Hoewel we voor dit artikel een CentOS 7 virtuele machine (IP 192.168.0.29) zullen gebruiken.

De onderstaande instructies werken ook met weinig (of geen) wijzigingen in andere distributies. Er wordt aangenomen dat uw VM een nieuwe installatie is; anders moet u ervoor zorgen dat er geen andere webservers (zoals Apache) op uw computer draaien.

Om Nginx samen met de vereiste afhankelijkheden te installeren, gebruik je de volgende opdracht:


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

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

Om te verifiëren dat de installatie succesvol is voltooid en dat Nginx bestanden kan weergeven, start u de webserver:


systemctl start nginx
systemctl enable nginx

en open vervolgens een webbrowser en ga naar http://192.168.0.29 (vergeet niet 192.168.0.29 te vervangen door het IP-adres of de hostnaam van uw server) . U zou de welkomstpagina moeten zien:

We moeten er rekening mee houden dat sommige bestandstypen beter kunnen worden gecomprimeerd dan andere. Bestanden met platte tekst (zoals HTML-, CSS- en JavaScript-bestanden) worden zeer goed gecomprimeerd, terwijl andere (.iso) bestanden, tarballs en afbeeldingen, om er maar een paar te noemen), doen dat niet, omdat ze van nature al gecomprimeerd zijn.

Het is dus te verwachten dat de combinatie van Nginx en gzip ons in staat zal stellen de overdrachtssnelheden van eerstgenoemde te verhogen, terwijl laatstgenoemde weinig of geen verbetering zal laten zien bij alle.

Het is ook belangrijk om te onthouden dat wanneer de gzip-module is ingeschakeld, HTML-bestanden ALTIJD gecomprimeerd zijn, maar dat andere bestandstypen die vaak voorkomen in websites en applicaties (namelijk CSS en JavaScript) zijn dat niet.

Nginx-websitesnelheden testen ZONDER de gzip-module

Laten we om te beginnen een compleet Bootstrap-sjabloon downloaden, een geweldige combinatie van HTML-, CSS- en JavaScript-bestanden.

Na het downloaden van het gecomprimeerde bestand zullen we het uitpakken naar de hoofdmap van ons serverblok (onthoud dat dit het Nginx equivalent is van de DocumentRoot richtlijn in een Apache virtuele hostdeclaratie ):


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

U zou de volgende mapstructuur moeten hebben in /var/www/html/tecmint:


ls -l /var/www/html/tecmint

Ga nu naar http://192.168.0.29/tecmint en zorg ervoor dat de pagina correct wordt geladen. De meeste moderne browsers bevatten een reeks ontwikkelaarstools. In Firefox kunt u het openen via het menu Extra → Webontwikkelaar.

We zijn vooral geïnteresseerd in het submenu Netwerk, waarmee we alle netwerkverzoeken tussen onze computer en het lokale netwerk en internet kunnen monitoren.

Voorgesteld lezen: Installeer Mod_Pagespeed om de Nginx-prestaties tot 10x te versnellen

Een snelkoppeling naar het openen van het Netwerk-menu in de ontwikkelaarstools is Ctrl + Shift + Q. Druk op die toetsencombinatie of gebruik de menubalk om deze te openen.

Omdat we geïnteresseerd zijn in het onderzoeken van de overdracht van HTML-, CSS- en JavaScript-bestanden, klikt u op de knoppen onderaan en vernieuwt u de pagina. In het hoofdscherm ziet u de details van de overdracht van alle HTML-, CSS- en JavaScript-bestanden:

Rechts van de kolom Grootte (die de individuele bestandsgroottes toont) ziet u de individuele overdrachtstijdstippen. U kunt ook dubbelklikken op een bepaald bestand om meer details te zien op het tabblad Tijdtijden.

Zorg ervoor dat u notities maakt van de timings die in de bovenstaande afbeelding worden weergegeven, zodat u ze kunt vergelijken met dezelfde overdracht zodra we de gzip-module hebben ingeschakeld.

De gzip-module in Nginx inschakelen en configureren

Om de gzip module in te schakelen en te configureren, opent u /etc/nginx/nginx.conf, zoekt u het hoofdserverblok zoals weergegeven in de onderstaande afbeelding en voegt u het volgende toe of wijzigt u het volgende regels (vergeet de puntkomma aan het einde niet, anders geeft Nginx een foutmelding als je later opnieuw opstart!)


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

De gzip richtlijn schakelt de gzip-module aan of uit, terwijl gzip_types wordt gebruikt om alle MIME-typen weer te geven die de module zou moeten verwerken.

Ga naar Basics_of_HTTP_MIME_types voor meer informatie over MIME-typen en om de beschikbare typen te bekijken.

Nginx-websitesnelheden testen met Gzip-compressiemodule

Zodra we de bovenstaande stappen hebben voltooid, laten we Nginx opnieuw opstarten en de pagina opnieuw laden door op Ctrl + F5 te drukken (nogmaals, dit werkt in Firefox, dus als u een andere browser gebruikt, raadpleeg dan eerst de bijbehorende documentatie) om de cache te overschrijven en laten we de overdrachtstijden bekijken:


systemctl restart nginx

Het tabblad Netwerkverzoeken toont enkele belangrijke verbeteringen. Vergelijk de timings om het zelf te zien. Houd er rekening mee dat het de overdrachten zijn tussen onze computer en 192.168.0.29 (overdrachten tussen Google-servers en CDN's liggen buiten ons bereik):

Laten we bijvoorbeeld de volgende voorbeelden van bestandsoverdracht bekijken voor/na het inschakelen van gzip. Timings worden gegeven in milliseconden:

index.html (weergegeven door /tecmint/ bovenaan de lijst): 15/4
Creative.min.css: 18/8
jquery.min.js: 17/7

Zorgt dit ervoor dat je niet nog meer van Nginx gaat houden? Wat mij betreft wel!

Aanbevolen leesmateriaal: 5 tips om de prestaties van uw Apache-webserver te verbeteren

Samenvatting

In dit artikel hebben we gedemonstreerd dat u de Nginx gzip-module kunt gebruiken om bestandsoverdrachten te versnellen. De officiële documentatie voor de gzip-module vermeldt andere configuratie-instructies die u misschien wilt bekijken.

Bovendien bevat de Mozilla Developer Network-website een artikel over de Netwerkmonitor waarin wordt uitgelegd hoe u deze tool kunt gebruiken om te begrijpen wat er achter de schermen gebeurt in een netwerkverzoek.

Zoals altijd kunt u het onderstaande commentaarformulier gebruiken als u vragen heeft over dit artikel. Wij kijken er altijd naar uit om van u te horen!