Performance-Optimierung einer Architekten-Webseite

Problem

Ladezeiten von teilweise über 10 Sekunden auf dem Desktop führen dazu, dass die Seite kaum verwendbar ist
insbesondere die mobile Version über mobiles Internet hat noch extremere Ladezeiten bis hin zu Timeouts
die optisch sehr ansprechende Seite ist durch die langen Ladezeiten nicht repräsentativ für ein renommiertes Architekturbüro

Die Seite basiert auf einem modifizierten WordPress Theme und vielen Plugins. Animationen und Bildergalerien wurden über etliche JavaScript Bibliotheken gelöst, dadurch extreme Dateigrößen, sehr viele HTTP-Anfragen und hohe Belastung des Nutzergeräts.

Ladezeiten der Startseite vorher:

56 Anfragen nötig
4,7 MB Daten übertragen
9,31 Sekunden Ladezeit

Lösung

Als Lösung wurde ein WordPress Kind-Theme erstellt, welches CSS- und JavaScript-Dateien des Eltern-Themes überschreibt. Es wurde ein mittels Gulp ein Build-Script erstellt (Gulpfile), mit welchem sich basierend auf dem Eltern-Theme das Child-Theme erzeugen lässt. Auf diese Weise lässt sich das Eltern-Theme weiterhin aktualisieren, das Kind-Theme kann dann auf Basis dessen generiert werden.

Es wurden folgende Optimierungen durchgeführt:

Zusammenfassen von CSS- und JavaScript-Dateien zu einer Datei
automatisches Entfernen von nicht genutztem CSS
Minimieren von CSS- und insbesondere JavaScript-Dateien
manuelles Entfernen von nicht genutztem JavaScript
Entfernen von wordpress- und plugineigenen CSS- und JavaScript-Aufrufen

Startseite nachher:

12 Anfragen nötig (79% / 8% weniger)
1,6 MB Daten (66% / 55% weniger)
2,14 Sekunden Ladezeit (77% / 54% schneller)

Zusätzlich empfohlene Schritte

Zusätzlich wurden folgende Schritte empfohlen über die die Kundin die Seitengeschwindigkeit selbst oder in einem Folgeauftrag noch weiter steigern könnte (mit Einsparpotential):

Bilder komprimieren (Startseite 100-200ms, Unterseiten 500ms-1000ms)
gzip aktivieren (ein paar Dutzend ms)
PHP-Cachen / Server wechseln um Antwortzeiten des Servers zu erhöhen, da dieser relativ langsam ist (ein paar Hundert ms)
Icon-Font durch Grafik ersetzen, wird nur für Burger-Menü genutzt (ein paar Dutzend ms)
Überlegen ob Anzahl der verwendeten Schriftarten reduziert werden kann (~ 100 ms)
relativ aufwändig: JavaScript komplett selbst neu schreiben (~200-500ms)

Kundennutzen

Die Einsparung von 79% der HTTP-Anfragen führt zu deutlich schnelleren Ladezeiten (Beispiel Startseite)
Die 66%ige Reduktion der Seitengröße entlastet das Smartphone der Besucher und verringert die Ladezeiten weiter
Durch 77% Reduktion der Ladezeit ist die Seite nun ein repräsentatives Aushängeschild für das Architekturbüro auf dem es seine Projekte ansprechend präsentieren kann, mit dem es womöglich demnächst schon das nächste Prestigeprojekt akquirieren kann.
Durch eine kompetente Beratung kann die Kundin mittels einer E-Mail an den Hoster bzw. eigene Maßnahmen die Performance der Seite kostengünstig und leicht sogar noch weiter steigern.
Die optisch durch professionelles Design, schöne Fotos und ansprechende Animationen schon sehr beeindruckende Referenz der Kundin ist nun auch technisch einwandfrei.