Für die vierte Woche habe mir die Optimierung der Nischenseite vorgenommen. Zusätzlich standen auch kleinere Anpassungen am Template auf meinem Plan.
In erster Linie habe ich mich um die Ladegeschwindigkeit meiner Nischenseite gekümmert. Nachfolgend gehe ich darauf ein, wie ich die Ladegeschwindigkeit gemessen und diese anschließend optimiert habe.
Zusätzlich habe ich auch ein paar Anpassungen am Theme vorgenommen.
Rückblick auf die 4. Woche – Anpassungen und Optimierungen an der Nischenseite
Da ich bereits bei der technischen Umsetzung meiner Nischenseite das Plugin „Compress JPEG & PNG images“ installiert hatte, waren meine Werte in den Auswertungen schon gar nicht so schlecht. Dieses Plugin sorgt automatisch dafür, dass Bilder beim Upload automatisch komprimiert werden.
Aus meinem Job kann ich sagen, dass Websites mit langen Ladezeiten weder bei Kunden noch bei Google gut ankommen.
Ausgangssituation vor der Optimierung
Normalerweise nutze ich zur Analyse die beiden Tools PageSpeed Insights und Pingdom. Bei Peer Wandiger habe ich noch das Tool GTMetrix kennengelernt, dass ich bei meiner neuen Nischenseite auch eingesetzt habe.
Für meine Analyse habe ich bei jedem Tool meine Startseite und eine Unterseite testen lassen. Die Ergebnisse sind im folgenden zu sehen.
Analyse mit PageSpeed Insights
Das Analyse-Tool von Google erstellt jeweils eine Gesamtbewertung für die mobile und die Desktop-Ansicht. Google selbst sagt, dass eine Bewertung mit 85 Punkten auf eine leistungsstarke Seite hinweißt.
Nachfolgend das Ergebnis:
| Mobil | Desktop |
|---|---|
| 68 / 100 | 83 / 100 |
| 69 / 100 | 85 / 100 |
Das Gesamtergebnis sieht zwar nicht so schlecht aus, ist aber durchaus noch steigerbar.
Analyse mit Pingdom
Pingdom ermittelt ebenfalls die Ladegeschwindigkeit der Seite. Ähnlich wie bei Firebug listet auch Pingdom alle Dateien auf, die für die Seite geladen werden.
Nachfolgend das Ergebnis:
| Performance grade | Ladezeit | Schneller als... | Größe der Seite | Anfragen |
|---|---|---|---|---|
| 87 / 100 | 1.83 s | 75 % der getesteten Seiten | 580.2 kb | 48 |
| 87 / 100 | 2.69 s | 59 % der getesteten Seiten | 616.3 kb | 54 |
Auch das Ergebnis bei Pingdom sah vor der Optimierung schon nicht schlecht aus. Aber an der Ladezeit kann noch etwas geschraubt werden.
Analyse mit GTMetrix
Bei meiner neuen Nischenseite setzte ich GTMetrix zum ersten Mal ein. Auch dieses Tool analysiert die Ladezeit und gibt eine detaillierte Auflistung der Punkte, die optimiert werden können.
| Seitengeschwindigkeit | YSlow | Ladezeit | Seitengröße | Anfragen |
|---|---|---|---|---|
| 86 % | 63 % | 3.6 s | 585 kb | 47 |
| 85 % | 63 % | 7.7 s | 629 kb | 53 |
Ähnlich wie bei den anderen Analysen auch, sieht das Ergebnis bei GTMetrix auch schon recht gut aus. Wo noch Optimierungsbedaf besteht ist im Ergebnis gut zu sehen.
Optimierung – Wie bin ich vorgegangen?
Im Grunde haben die Tools alle mehr oder weniger die selben Punkte bemängelt. Neben der fehlenden Komprimierung und blockierenden JavaScript- und CSS-Dateien, wurde ebenfalls die Größe der JavaScript- und CSS-Dateien bemängelt. Ein weiterer Punkt war das nicht aktiverte Browser-Caching.
All diese Punkte kann man in WordPress durch die Installation kleiner Plugins relativ schnell behoben, beziehungsweise stark reduziert werden.
Ich habe dafür die folgenden drei Plugins installiert:
- WP Minify Fix: Mit diesem Plugin kann man sehr schnell CSS- und JavaScript-Dateien zusammenfassen und gleichzeitig komprimieren. Zusätzlich komprimiert diese Plugin auch noch die HTML-Ausgabe.
- Scripts to Footer: Mit diesem Plugin werden die meisten CSS- und JavaScript-Dateien vom Header in den Footer verschoben. Dadurch wird die Ladezeit der Website verringert.
- WP Super Cache: Ich nutze dieses Plugin ab sofort für mein Caching. Es ist ein schnelles Plugin das aus der Website statische HTML-Dateien erstellt.
Die Installation und Konfiguration der genannten Plugins sowie die Aktivierung des Browser-Caching waren meine Maßnahmen zur Optimierung der Ladezeit.
Ergebnis meiner Optimierung
Nachfolgend sind die Ergebnisse nach meinen Optimierungsmaßnahmen.
PageSpeed Insights
Ich konnte viele der bemängelten Punkte beheben.
Hier mein Ergebnis nach der Optimierung:
| Mobil | Desktop |
|---|---|
| 82 / 100 | 94 / 100 |
| 82 / 100 | 92 / 100 |
Die Ergebniszahlen sind für mich absolut ausreichend.
Pingdom
Auch hier konnte ich einige aufgelistete Punkte beheben und das Ergebnis verbessern.
Hier das Ergebnis nach der Optimierung:
| Performance grade | Ladezeit | Schneller als... | Größe der Seite | Anfragen |
|---|---|---|---|---|
| 82 / 100 | 1.14 s | 87 % der getesteten Seiten | 455.5 kb | 21 |
| 83 / 100 | 0.68 s | 95 % der getesteten Seiten | 556.0 kb | 27 |
Auch hier bin ich mit dem Ergebnis nach der Optimierung sehr zufrieden.
GTMetrix
Auch GTMetrix listet die Punkte auf, die für eine schnellere Ladezeit behoben werden sollten.
Nach meinen Optimierungen gab es folgendes Ergebnis:
| Seitengeschwindigkeit | YSlow | Ladezeit | Seitengröße | Anfragen |
|---|---|---|---|---|
| 97 % | 86 % | 2.6 s | 486 kb | 20 |
| 97 % | 85 % | 3.8 s | 595 kb | 26 |
Auch mit diesem Ergebnis bin ich voll zufrieden.
Anpassungen am Theme
An meinem Theme habe ich nur eine kleine Anpassung vorgenommen.
Für ein bisschen mehr Dynamik auf der Seite habe ich die einzelnen Teaserbilder animiert. Bei Hover werden die Teaserbilder jetzt etwas herangezoomt.
Damit möchte ich etwas Bewegung in meine Nischenseite bringen.
