Die Geschwindigkeit von Webseiten zu optimieren kann schnell kompliziert werden. Jedoch gibt es Wege bereits mit Plugins und Einstellungen etwas für die Geschwindigkeitsoptimierung zu tun. Wp-Minify ist eines dieser Plugins

Geschwindigkeitsoptimierung! Ja?

Geschwindigkeit ist relativ aber ein entscheidender Faktor wenn es um die Absprungrate geht. Wenn Besucher lange brauchen um die Inhalte einer Webseiten zu konsumieren ist dieser schnell ermüdet und verlässt die Webseite. Wer von uns hat schon Lust eine Webseite zu nutzen die zäh wie Gummi ist. Aber wie kann ich die Geschwindigkeit meiner Webseite verbessern?

Grundprinzip – Webseitengeschwindigkeit

Um eine Webseite zu betrachten rufen wir vom Server die Webseiten-Inhalte ab. Je mehr Quelltext die Webseite besitzt desto mehr muss unser Browser später interpretieren. Der reine Html und CSS Teil einer Webseite macht aber nur einen geringen Prozentsatz der versendeten Daten aus.
Sobald Grafik-intensive Gestaltungen, Bilder und Videos ins Spiel kommen erhöht sich die Ladegeschwindigkeit enorm.

Javascript als Webseiten Bremser

So gut wie jede moderne Webseite benutzt Javascript. Von der Animation bis hin zur Kartenintegration wird es in den unterschiedlichsten Formen verwendet. Javascript bringt aber auch Nachteile mit sich. Wenn Javascript mitten im HTML Code ausgeführt wird können rechenintensive Funktionen den Aufbau des HTML stoppen. Damit wird die eigentliche Html Anzeige am Bildschirm optisch verzögert dargestellt und somit als “langsame” Webseite interpretiert. Daher sollten Javascripte immer erst nach dem HTML Teil die Arbeit aufnehmen.

Probleme durch viele Daten

Die Anzahl der verschiedenen Daten kann zu einem Problem führen, wenn diese alle von einer Domain kommen. Selbst mit einer großen Internetleitung kann es so zu einer Verzögerung bei der Darstellung kommen. Den pro Domain können nur eine spezielle Zahl von Dateien gleichzeitig bezogen werden.

Beispiel für viele Daten und deren Bekämpfung

Hover Effekte, also die veränderte Anzeige beim Überfahren von Beispielsweise Navigationspunkten. Um diesen Effekt zu erhalten muss für jeden Status eine andere Grafik definiert werden. Werden nun die unterschiedlichen Grafiken einzeln angegeben werden 2 Bilder geladen. Ein Ausweg wären Sprites, dass sind Grafiken welche verschiedenen Grafiken beinhalten aber durch verschiedene Ausschnitte zur Anzeige gebracht werden. Damit wird die Anzahl von einzelnen Dateien reduziert.

Bildformate bei der Optimierung

Mit Jpeg Dateien können sehr gute Ergebnisse bei der Kompression erreicht werden. Wird jedoch der Kompressionsgrad übertrieben kommt es zu hässlichen Fragmenten, also optischen Bildstörungen. Eine Alternative zu Bilder mit wenigen Farben ist die Wahl von PNG Dateien. Auch ohne Komprimierung können hier sehr Gute Unterschiede zu JPEG erzielt werden.
(Zur Komprimierung von Bilder in JPEG, PNG kommt hier bald ein Link)

Webseiten Daten Komprimieren

In diesem Fall ist Weniger mehr. Durch die Komprimierung von Webseiten Dateien, HTML, CSS und Javascript kann bei der Auslieferung einige an Speicherplatz gespart werden. Somit können kleinere Dateien übermittelt werden und das spart wiederum Zeit.

Webseiten Daten komprimieren mit Wp-Minify

Das WordPress Plugin Wp-minify übernimmt die Komprimierung der Webseiten Daten und fasst diese zu zusammen. Einerseits werden Insgesamt weniger Daten versendet andererseits wird durch die Zusammenfassung weniger gleichzeitige Verbindungen zum Server gebraucht was den Transfer der anderen Daten wie Bilder und Co beschleunigen kann.

Was bringt Wp-minify?

Um den Nutzen von wp-minify zu erklären habe ich dieses Blog genutzt um die Auswirkungen des Plugins zu zeigen. In den beiden folgenden Screenshots wird die Übertragung der Javascript-Dateien ohne und mit mp-minify gezeigt.

3.87 Sekunden mit 13 Anfragen um alle Javascript Dateien zu laden.

2.93 Sekunden mit 9 Anfragen um alle Javascript Dateien zu laden.

In den Screenshots wird deutlich, dass durch die Nutzung von Wp-minify 4 Dateien zusammengefasst wurden und der Javscript Teil des Blogs beschleunigt geladen wurde. Ähnliche Auswirkungen sind bei HTML und CSS Dateien vorhanden. Zudem bringt wp-minify einen eigenen Cache mit und liefert daher die komprimierten Dateien direkt aus ohne diese bei jedem Seitenaufruf neu zu erstellen.