Het verminderen van Uw Website op Maat Met Gzip en Deflate Compressie

DG-Studio/Shutterstock

Uw website snelheid is belangrijk, zoals een snellere website zal drastisch verlagen van de bounce rate. Comprimeren van bestanden op de server is een gemakkelijke manier om de grootte van uw website, die de snelheid van het laden.

Inhoud Codering, Uitgelegd

Wanneer u probeert toegang te krijgen tot een website, stuurt uw browser een GET-verzoek naar de server, die reageert met de code van de webpagina. Dit werkt, maar het verzenden van de code over tijd kost, vooral voor mobiele gebruikers over langzame verbindingen. Elke kilobyte telt.

HTML is zeer repetitief. Elke <div> en de <style> – tag heeft een soortgelijke afsluitende tag, en het is allemaal net-tekst toch. Dit betekent dat het comprimeert heel gemakkelijk.

De meeste browsers ondersteunen gecomprimeerde HTML, en ze zullen u vertellen als ze dat doen met een Accept-Encoding kop in de GET-verzoek naar uw server:

Accept-Encoding: gzip, deflate

Dit betekent dat de client kan decomprimeren van bestanden die zijn gecomprimeerd met gzip of leeg te laten lopen. Uw server kan luisteren voor deze header en vervolgens terug te sturen een HTML-bestand dat is gecomprimeerd met gzip met de kop:

Content-Encoding: gzip

U kunt de server alle soorten bestanden op een soortgelijke wijze, met inbegrip van CSS, JavaScript, XML en JSON API reacties. Alle tekst onder de motorkap, en alle gecomprimeerd kan worden.

Compressie inschakelen in Nginx

Gelukkig, dit is een vrij eenvoudig proces. Nginx heeft gzip gebouwd in, je hoeft alleen maar in te schakelen door het toevoegen van de volgende code toe aan het configuratie bestand, meestal te vinden in /etc/nginx/nginx.conf:

gzip op;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied eventuele;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml, application/xml, application/xml+rss text/javascript;

# Deactiveer voor IE < 6 omdat er een aantal bekende problemen
gzip_disable “MSIE [1-6].(?!.*SV1)”;

# Toevoegen variëren header voor downstream-proxy ‘ s om te voorkomen dat het verzenden van cache gzip bestanden naar IE6
gzip_vary op;

Dit verandert op het gzip-module, en configureert het comprimeren van de meeste tekst-gebaseerde bestanden.

Het inschakelen van Compressie in Apache

Voor Apache, moet u het openstellen van de Apache configuratie bestand, meestal gelegen in een van de volgende plaatsen:

  • /etc/apache2/httpd.conf
  • /etc/apache2/apache2.conf
  • /etc/httpd/httpd.conf
  • /etc/httpd/conf/httpd.conf

Vervolgens controleert u of de volgende lijnen uit commentaar gehaald om de deflatie van de module:

LoadModule filter_module modules/mod_filter.zo
LoadModule deflate_module modules/mod_deflate.zo

Het opslaan en laden van Apache, en kunt u controleren of de module wordt geladen met:

apachectl -t -D DUMP_MODULES | grep deflate

Als dat zo is, opent u de config back-up en draai op de inhoud coderen met de AddOutputFilter richtlijn:

SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript

Controleren Of Compressie Is Ingeschakeld

U kunt controleren of uw web server is het comprimeren van goed van deze online compressie test, of door de inspectie van de response headers in de Chrome dev tools.

Zoals u kunt zien, het comprimeren howtogeek.com resultaten in een 77% besparing, tot slechts 32 Kb.

Het Comprimeren Van Afbeeldingen Handmatig

Beelden werken een beetje anders, als ze niet de tekst, en niet comprimeren zo gemakkelijk. U kunt nog steeds afbeeldingen comprimeren met gzip, maar u zult niet de besparing veel ruimte.

In plaats daarvan, zult u wilt gebruiken traditionele JPEG-compressie. JPEG is een instelling voor kwaliteit en een JPEG ingesteld op 70% kwaliteit bijna niet te onderscheiden is van een 100% kwaliteit-bestand, met de enorme ruimte besparing.

U kunt dit handmatig doen in Photoshop of een andere tekst editor, of u kunt een hele map met foto ‘ s tegelijk met ImageMagick:

voor f in *.jpg; doen zetten -kwaliteit 70 $f $f; gedaan

Als je de beelden zijn nog te groot, dan kun je de kwaliteit verder, maar 70% is een goed teken voor algemene compressie. Zorg ervoor dat de resolutie van uw afbeeldingen niet onnodig groot.

Compressie is slechts een deel van het versnellen van uw website. Kunt u, lees onze gids om te versnellen van een trage website voor meer informatie.


Posted

in

by

Tags: