Webseiten, CCS, HTML und JS komprimieren

In einigen anderen Artikeln zur Usability und Suchmaschinenoptimierung wurde bereits erwähnt, dass die Ladezeit einer Webseite eine wichtige Rolle spielt. Unter anderem ist dies einer von vielen PageRank-Faktoren der Suchdienste, wie Google. Und auch der Webseiten-Besucher freut sich, wenn die Webseite schnell geladen wird und zum Beispiel wenig von dem mobilen Traffic-Volumen verzehrt. Eine Webseitengröße von 2000kB ist stattlich aber eher der Standard als die Seltenheit.

Um die Ladezeit einer Webseite zu optimieren, stehen dem Webseitenbetreiber zwei Verfahren zur Auswahl, die beide angewendet werden sollten und typischer Weise von Googles Page Speed Insights auch empfohlen werden.

Minimierung (Resource Minification)

Typischer Weise wird heutzutage zum Zwecke der Dynamisierung und Formatierung neben HTML viel JavaScript und CSS eingebunden. Hier werden meist ganze Bibliotheken eingebunden, wie z.B. Bootstrap, um ein Responsive Design zu erhalten, welche eine ordentliches Gewicht auf die "Traffic-Waage" bringen können.

HTML Minfication

Schreibt man den HTML-Code selbst achtet man meist auf eine gute Lesbarkeit. Schließlich möchte man auch noch Jahre später damit arbeiten können. Also formatiert man den Quelltext entsprechend und fügt hier und da noch Kommentare ein. Dies erzeugt aber auch mehr Traffic. Um den HTML-Code zu komprimieren, kann man:

  • alle Zeilenumbrüche entfernen
  • alle Kommentare entfernen
  • alle Leerzeilen entfernen

Da das recht mühsam werden kann, holt man sich am besten Unterstützung mit einem Tool:

Es empfiehlt sich, wenn man solche Komprimierungen vornimmt, dann im zwei Versionen zu verwalten, da man mit der komprimierten Version später kaum noch arbeiten kann aufgrund der schlechten Lesbarkeit. Deswegen sollte man sich immer noch eine Arbeitsversion aufheben mit allen Kommentaren und Zeilenumbrüchen.

CSS Minification

Die Verwendung von Cascading Style Sheet (CSS) an sich ist schon mal eine gute Minification-Maßnahme, da sich hier für wiederkehrende gleiche Formatierungen Klassen bilden lassen, die man einmal schreibt und dann an entsprechender Stelle immer wieder einsetzen kann, was ansonsten alles mit HTML einzeln geschrieben werden müsste. Es lässt sich der Text aber weiter zusammenschrumpfen. Genauso wie bei HTML kann man erstmal

  • alle Zeilenumbrüche entfernen
  • alle Kommentare entfernen
  • alle Leerzeilen entfernen

Darüber hinaus kann man noch Kurzschreibweisen verwenden:

Beispiel 1 CSS Kurzschreibweise:

Lang:

margion-left: 25px;
margin-top: 50px;
margin-right: 15px;
margin-bottom: 30px;

Kurz:

margin: 50px 15px 30px 25px;

Beispiel 2 CSS Kurzschreibweise:

Lang:

outline-width:medium;
outline-style:dashed;
outline-color:#DF0;

Kurz:

outline: medium dashed #DF0;

Man kann ebenfalls noch

  • Farbangaben einkürzen zum Beispiel #eee anstelle von #eeeeee oder gar rgb(238,238,238)
  • Anzahl der Formatierungen und Schriftarten überschaubar halten
  • die Verwendung von CSS Image Sprites in Erwägung ziehen
  • überflüssige oder redundante Klassen und Angaben entfernen

JavaScript Minification

Für JavaScript gelten dieselben Standardempfehlungen wie für HTML und CSS:

  • alle Zeilenumbrüche entfernen
  • alle Kommentare entfernen
  • alle Leerzeilen entfernen

Und auch hier sollte man sich von dem im Internet reichlich vorhandenen Internettools unterstützen lassen:

Komprimierung

Ein zweiter wichtiger Schritt, um die Ladezeiten zu verringern, zu welchem man selbst außer einer einmaligen Einrichtung nicht viel dazu tun kann, ist die Komprimierung der Daten vor der Übertragung. Die Komprimierung der Daten erfolgt vor dem Versand automatisch auf dem Server. Der (moderne) Browser ist dann für gewöhnlich in der Lage die gepackten Daten zu entpacken und darzustellen.
Ist der Browser fähig komprimierte Dateien zu empfangen, schickt der Browser eine Header-Zeile an den Server:

Accept-Encoding: gzip, deflate

Hierbei sind GZip und Deflate zwei verschiedene Kompressionsmethoden. Der Server kann nun zum Beispiel mit

Content-Encoding: gzip

antworten und somit dem Browser mitteilen, dass die nachfolgenden Dateien mit GZip komprimiert sind. Sendet der Server keine Content-Encoding-Antwort bedeutet es, dass die Datei nicht komprimiert wird.

Wer wissen möchte, ob seine Webseite oder eine andere Homepage die Daten bereits komprimiert ausliefert, kann sich unseres Online-Tools zur Überprüfung der Komprimierung bedienen.

In dem angezeigten Beispiel ist das Ergebnis negativ und es wird von der Webseite keine Kompression angeboten. Dies zu aktivieren ist nicht ganz einfach und erfordert in den meisten Fällen Zugriff auf die Konfiguration des Servers.

Webseiten-Komprimierung beim IIS

Wenn du den IIS (Internet Information Services) von Microsoft betreibst findest du hier eine Anleitung, wie man die Komprimierung einrichtet.

Webseiten-Komprimierung mittels PHP

Traut man sich nicht an die Serverkonfiguration ran oder hat überhaupt nicht die Möglichkeit dazu, dann kann man das Ganze auch mittels PHP realisieren. Dazu muss man in alle Endungen der HTML-Dateien von .htm oder .html umbenennen zu .php . In die Dateien fügt man dann noch folgenden PHP-Code ein:

<?php 
    if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) 
        ob_start(“ob_gzhandler”); 
    else 
        ob_start(); 
?>

Webseiten-Komprimierung beim Apache-Server

Bei der Verwendung eines Apache-Servers ist die Ausgabekomprimierung relativ simpel. Man kann eine .htaccess - Datei erstellen bzw. eine vorhandene entsprechend ergänzen mit folgendem Code. Dieser Code lässt sich auch einfach mit dem Programm DA-HtAccess erzeugen.

# BEGIN Gzip-Komprimierung
<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
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</IfModule>
# END Gzip-Komprimierung

Mit der zweiten Variante die Komprimierung in die .htaccess Datei zu konfigurieren, können bestimmte Dateitypen definiert werden:

# BEGIN Gzip-Komprimierung
<files *.html>
SetOutputFilter DEFLATE
</files>
# END Gzip-Komprimierung

Und schon erhält man eine freundliche Rückmeldung und bei Googles Page Speed Insight läuft eine Meldung weniger auf.