Bloggen

...om livet bag teknikken

Online komprimering fungerer som med en normal zip-fil: Indholdet pakkes ned, så det fylder mindre.
Resultatet er et mindre pladskrav til de samme data.

Når vi komprimerer indhold der sendes afsted fra webserver til browser, bruges der mindre båndbredde.
Bruger man en standardmetode (som gzip/deflate), sker komprimeringen helt automatisk:

  1. Browser sender en HTTPheader til webserver, der fortæller den forstår komprimering:
     Accept-Encoding: gzip, deflate
  2. Når server svarer tilbage medsendes en HTTPheader, der definerer formatet for komprimeringen:
    Content-Encoding: gzip
  3. Derefter er det op til browseren at håndtere indholdet.

Eksemplet nedenfor forudsætter at Apachemodulet 'mod_deflate' er installeret og aktiveret på din webserver.

 

 

Aktiver komprimering med .htaccess

Koden herunder fortæller webserveren at den skal komprimerer indholdet af udvalgte filtype.
Placer koden i .htaccess filen i roden at dit site.

# COMPRESS TEXTFILES
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>
# COMPRESS TEXTFILES

Så enkelt er det!
Nu vil webserveren automatisk komprimere indholdet af de angivne typer, før det sendes til klienten og der vil dermed spares båndbredde.

Note: Husk at have ftp adgang til webserveren når du redigerer i .htaccess - Hvis en regel ikke virker eller der bliver skrevet noget forkert, bliver websitet utilgængeligt!

 

 

Hvad kan man komprimere? 

Normalt er binære filer, såsom billeder, dokumenter og pdf-filer allerede komprimeret i en vis grad.
Gevinsten er derfor ikke ret stor.

Tekst-filer, såsom html, css, javascript, fonte & feeds er oplagte kandidater, fordi tekst ofte kan komprimeres godt. (Eksemplet ovenfor viser hvordan man komprimerer netop tekstfiler ud fra mimetypen)

Foretrækker man at komprimere filer på deres endelser, frem for mimetype, kan det gøres sådan:

<Files *.html>
SetOutputFilter DEFLATE
</Files>

 

 

Sparet båndbredde?

Moderne CMS- og shoptemaer er ofte baseret på JQuery / Bootstrap / FontAwesome.
En fantastisk kombination for udviklere - Men den fylder!

 

Her er størrelserne på de nyeste versioner, samt en HTML side på 60 KB (gns. størrelse):

  Ukomprimeret Komprimeret Besparelse
JQuery 288 KB 80 KB  72 %
Bootstrap JS 69 KB 14 KB  79 %
Bootstrap JS plugins 66 KB 21 KB  68 %
Bootstrap CSS 162 KB 23 KB  85 %
FontAwesome 116 KB 69 KB  59 %
HTML 60 KB 20 KB 66 % 
Sammenlagt 761 KB 227 KB 70 % 

 

Ved at komprimere tekstfilerne, kan der spares helt op til 534 KB - pr. sidevisning!

Det er absolut nok til at have en positiv indflydelse på både brugeroplevelsen & dit sites rankering.

 

 

Ulemper og potentielle faldgruber

Ældre browsere
Nogle browsere har tidligere haft problemer med at tolke komprimeret indhold. Vi er stort over den æra, medmindre man stadig understøtter udgået software.

CPU belastning
Komprimering er CPU-krævende og et tradeoff på performancen - MEN - selv vores smartphones har utroligt kraftige CPU'er i dag.
Det kan selvfølgelig give problemer for nogle, men der mangler nyere dokumenterede eksempler.

 

 

For nørder:
Log komprimeringen til Apache logfil

Man kan faktisk logge Apache's deflate resultater til en fillog.
Det gøres via apache's configuration globalt/for den enkelte vhost:

DeflateFilterNote Input instream
DeflateFilterNote Output outstream
DeflateFilterNote Ratio ratio
LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate
CustomLog /var/log/apache2/deflate_log deflate

Det er ikke anbefalet at gøre i produktion, men kan være et fedt værktøj på en dev. server. :)

 

 

Læs mere i guiden til teknisk mobiloptimering:

 

Janich Rasmussen
Om forfatteren: Janich Rasmussen

Problemknuser, nørd og stifter af CGOnline.dk - Løser alt fra lavpraktisk opsætning til advanceret performance optimering.

Har tidligere arbejdet for bl.a. Eniro, Geodatastyrelsen & Dealsales.

Involveret i flere Open Source projekter, herunder Joomla som Janich har elsket at været med til at udvikle og bruge siden 2006.