6 Turbotipps für mehr Website-Geschwindigkeit
CSS-Dateien und Javascript zusammenfassen, minifizieren und komprimieren
Als Hauptverantwortliche für zu lange Ladezeiten sind den Bildern CSS- und Javascript-Dateien dicht auf den Fersen. Nicht per se, aber dann, wenn es zu viele von ihnen gibt und wenn sie zu gross sind.
Als kleine Beispiele: Web-Tools wie Social Media Share-Icons, die sticky an der Sidebar beim Scrollen mitwandern oder Newsletter Popups, die sich nach ein paar Sekunden Verweildauer auf einer Website öffnen sind super. Wir setzen beide Elemente mit sehr schönem Erfolg ein, sie waren irre leicht auf unserer Website zu integrieren, sie erhöhen die Interaktivität, fördern die Distribution unserer Inhalte und Angebote über Social Media und bringen uns Leads und Newsletter-Abonnenten. Toll, oder?
Leider sind solche Elemente gerne JavaScript-Schwergewichte und können die Website-Performance ziemlich hässlich verlangsamen. Das heisst aber nicht, dass Sie auf sie verzichten müssen. Sie sollten die Auswirkungen im Kopf haben, die ihre Verwendung haben kann. So können Sie Ihren Webentwicklern mitgeben, dass sie gerade beim Einsatz solcher Elemente auf das Zusammenfassen, Minifizieren und Komprimieren von Javascript- und CSS-Dateien achten müssen.
Dazu können die Entwickler Tools einsetzen wie JSCompress für das Zusammenfassen und Minifizieren von Javascript-Dateien oder CSS Minifier, das die gleiche Aufgabe für - Sie ahnen es - CSS-Dateien übernimmt. Hat Ihre Technik Grunt im Einsatz, dann kann Sie Grunt Uglify einsetzen, um alle CSS-Styles und Javasripte zusammenzufassen und zu komprimieren.
Was bedeutet CSS und Javascript zusammenfassen?
Mit Zusammenfassen ist gemeint, dass die Styles und Scripte in so wenige Dateien wie möglich vereint werden. Denn jede einzelne Datei, die vom Server ausgeliefert wird, verursacht Last und kostet Zeit. Auch wenn die Datei vielleicht nur ein paar Bytes gross ist.
Deshalb sollte Ihre Internetseite so wenige Server-Anfragen erzeugen, wie möglich. Es ist dabei meistens die bessere Taktik, eher weniger Dateien auszuliefern, die dafür etwas grösser sind, als sehr viele kleine.
Was bedeutet CSS und Javascript minifizieren?
Die Minifizierung wiederum wird dadurch erreicht, dass unnötige Leerzeichen, Tabulatoren und Zeilenumbrüche entfernt und dass Variablen und Funktionsnamen gekürzt werden. Das macht den Code weniger leserlich, er kann dadurch aber signifikant gekürzt werden - ohne dass sich an der Funktionalität oder der Optik der Website etwas ändert.
Was bedeutet CSS und Javascript komprimieren?
Die Minifizierung wird häufig auch als Komprimierung bezeichnet. Wir möchten diese Begriffe aber trennen. Das Minifizieren betrifft Massnahmen auf Code-Ebene innerhalb von CSS- und Javascript-Dateien (siehe oben).
Mit Komprimieren dagegen ist hier ganz klassisch das Komprimieren ganzer Dateien gemeint. Sie sollten unbedingt darauf achten, dass eine Komprimierung auf Datei-Ebene erfolgt. Dazu empfehlen wir, die gzip-Komprimierung auf Ihrem Server zu aktivieren. Das geht z.B. auf einem Apache-Server durch einen Eintrag in der .htaccess-Datei.
Durch gzip werden die Dateien dann komprimiert vom Server zum Browser-Client Ihrer Nutzer übertragen. Ebenfalls eine wichtige Massnahme, die die Ladezeit Ihrer Website beschleunigt.
