Minska Din Webbplats Storlek Med Gzip och Tömma Komprimering

0
188
GD-Studio/Shutterstock

Din webbplats snabbhet är viktigt, eftersom en snabbare hemsida kommer att dramatiskt minska din avvisningsfrekvens. Komprimera dina filer på server-sidan är ett enkelt sätt att minska storleken på din hemsida, vilket snabbar upp lastning.

Innehåll Kodning, Förklarade

När du försöker komma åt en webbplats skickar din webbläsare en GET-förfrågan till servern, som svarar med koden för webbsidan. Detta fungerar, men att skicka koden över tar tid, särskilt för mobila användare på långsamma anslutningar. Varje kilobyte räknas.

HTML är väldigt repetitiva. Varje <div> och taggen <style> har en liknande avslutande tagg, och det är allt bara sms: a ändå. Detta innebär att det komprimerar mycket enkelt.

De flesta webbläsare har stöd för komprimerade HTML, och de kommer att berätta för dig om de gör det med en Accept-Encoding huvudet i GET-förfrågan till servern:

Accept-Encoding: gzip, deflate

Detta innebär att klienten kan dekomprimera filer som är komprimerade med gzip eller smal. Din server kan lyssna till denna header och sedan skicka tillbaka en HTML-fil som komprimerats med gzip med rubriken:

Innehåll-Kodning: gzip

Du kan server alla typer av filer i ett liknande sätt, inklusive CSS, JavaScript, XML och JSON API-svar. Alla är sms: a under huven, och alla kan vara komprimerade.

Aktivera Komprimering i Nginx

Lyckligtvis är detta en ganska enkel process. Nginx har gzip-kodning inbyggd, du ska bara behöva aktivera den genom att lägga till följande kod till config-fil, som vanligtvis finns i /etc/nginx/nginx.conf:

gzip på.
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied alla;
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;

# Inaktivera för IE < 6 eftersom det inte finns några kända problem
gzip_disable “MSIE [1-6].(?!.*SV1)”;

# Lägg till en varierar header för nedströms proxyservrar för att undvika att skicka cachade gzip-filer till IE6
gzip_vary på.

Detta visar på gzip-modul, och konfigurerar den för att komprimera de flesta textbaserade filer.

Aktivera Komprimering i Apache

För Apache, du behöver för att öppna upp Apache-config-fil, oftast ligger i någon av följande platser:

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

Se sedan till följande rader är okommenterade för att aktivera smal modul:

LoadModule filter_module modules/mod_filter.så
LoadModule deflate_module modules/mod_deflate.så

Spara och ladda om Apache, och du kan kontrollera om modulen är laddad med:

apachectl -t -D DUMP_MODULES | grep deflate

Om det är, kan du öppna config tillbaka upp och sätter på innehåll kodning med AddOutputFilter direktiv:

SetOutputFilter DEFLATE
AddOutputFilterByType TÖMMA text/html-text/plain text/css ansökan/javascript

Kontrollera Om Komprimering Är Aktiverad

Du kan kontrollera om din webbserver är att komprimera på rätt sätt från detta online compression test, eller genom att inspektera svar rubriker i Krom dev verktyg.

Som du kan se, att komprimera howtogeek.com resultaten i en 77% besparingar, ner till bara 32 Kb.

Komprimera Bilder Manuellt

Bilder fungerar lite olika, så de är inte sms: a, och inte komprimera så lätt. Du kan fortfarande komprimera bilder med gzip, men du kommer inte att spara mycket utrymme.

Istället, du vill anställa traditionella JPEG-komprimering. JPEG har en bra inställning, och en JPEG-som till 70% kvalitet är nästan omöjlig att skilja från en 100% kvalitet fil, med massiva besparingar utrymme.

Du kan göra detta manuellt i Photoshop eller annan textredigerare, eller så kan du bearbeta en hel mapp med bilder på en gång med ImageMagick:

för f *.jpg; konverterar kvalitet 70 $f $f; gjort

Om dina bilder är fortfarande för stor, kan du släppa kvaliteten ytterligare, men 70% är ett bra varumärke för allmänna komprimering. Se till att upplösningen på bilderna är inte onödigt stor heller.

Komprimering är bara en del av att påskynda din webbplats. Du kan läsa vår guide för att påskynda en långsam hemsida för att läsa mer.