Home Menü

WordPress Performance – Eine Guideline

Die Optimierung der eigenen Webseite im Bezug auf die Geschwindigkeit hat viele Vorteile: Zum einen gewinnt die Webseite bei den Besuchern an Akzeptanz, wenn die Inhalte schnell geladen werden und zum anderen geht damit in der Regel auch eine Steigerung des Umsatzes einher. Wie Sie im Speziellen WordPress zu einer High-Performance Webseite ausbauen, soll Ihnen diese Guideline im Detail zeigen.

Die folgende Guideline ist als Selbstexperiment zu verstehen. Sie fußt auf eigenen Erfahrungen und vor allem auf zahlreichen Studien und Veröffentlichungen von weltweit anerkannten Experten zum Thema High-Performance Websites. Anhand der Webseite Blog IT-Solutions sollen die vorgestellten Techniken in den kommenden Wochen und Monaten zur Verbesserung der Website-Geschwindigkeit praxisnah umgesetzt werden.

Motivation

Die Motivation zu dieser Guideline ist vielschichtig. Zum einen pflege ich ein großes Interesse zum Thema und liebe es, wenn Webseiten im Browser schnell geladen werden. Dies steigert bei mir als Anwender bereits das Vertrauen in die aufgerufene Webseite, da es den Anschein erweckt, die gegenüberliegende Partei betreibt die Seite sehr professionell.

Zum anderen fließt seit dem Jahre 2010 (Quelle) die Geschwindigkeit einer Webseite auch in das Google Ranking ein, weshalb es vor allem aus Sicht der Suchmaschinenoptimierung (Search Engine Optimization, SEO) großen Sinn macht, an dieser Stelle Zeit und Geld  zu investieren. Google schreibt zwar bei der Veröffentlichung des verlinkten Blogposts, dass weniger als 1% der Webseiten von diesem Ranking-Faktor beeinflusst werden, es ist jedoch aufgrund der zahlreichen Bemühungen von Google in diesem Bereich anzunehmen, dass dieser Faktor in der Zwischenzeit bereits stärker an Einfluss gewonnen hat und dies auch zukünftig weiterhin tun wird.

Ein weiterer Aspekt, welcher vor allem für Betreiber von Online-Shops mit WordPress größte Relevanz besitzen dürfte, ist der Zusammenhang zwischen Seitenaufruf-Geschwindigkeit und Umsatz, was zahlreiche Studien bereits eindrucksvoll belegt haben. Eine davon stammt von Shopzilla Inc., einem amerikanischen Web-Spezialisten im Bereich des Online-Shopping:

Nach einem Redesign der eigenen Webseite konnte man die Ladezeit der Webseite um 5 Sekunden (von ca. 6-7 Sekunden auf ca. 1-2 Sekunden) reduzieren. Damit einher gingen eine 25 % Steigerung der Seitenaufrufe, eine 7-12 % Steigerung des Umsatzes und eine Reduktion der Hardware um 50 %. Und das so etwas nicht nur bei großen Online-Shops, sondern auch sehr einfach mit WordPress möglich ist, wird diese Guideline zeigen.

Shopzilla Inc. – Performance by Design, 2009, Quelle

Diese Aussage zeigt auch noch einen letzten Vorteil auf: Die Reduktion von Hardware. Damit können Webseitenbetreiber bares Geld sparen, wenn sich die Serverlast nach der Optimierung der Seite zum Teil um bis zu 50 % reduziert.

Eine andere Studie aus dem Jahre 2006 wird unter anderem oft von Steve Souders propagiert, der seit Jahren wohl gefragteste Mann im Bereich von High-Performance-Websites. Sein aktueller Arbeitgeber ist Google, wo er als Head Performance Engineer tätig ist.

Bei Amazon zeigte sich, dass eine Verlängerung der Seitenladezeit um + 100 ms (0,1 Sekunden) einen Rückgang der Verkäufe von 1 % zur Folge hatte.

Abschließend noch ein sehr treffendes und bekanntes Zitat von Fred Wilson, einem der bekanntesten Risikokapitalgeber des Web 2.0, der unter anderem Twitter, Tumblr, Foursquare, Zynga und viele mehr als Kapitalgeber unterstützt hat.

Speed: „First and foremost, we believe that speed is more than a feature. Speed is the most important feature.“

Fred Wilson, Die 10 goldenen Regeln von erfolgreichen Web Apps, Future Of Web Apps conference in Miami, Februar 2010, Quelle

Web Performance Optimization

Man mag es kaum glauben, aber das hier vorgestellte Thema der Web Performance Optimization (kurz WPO) ist vielen Betreibern von Webseiten bis heute noch unbekannt. Kein Wunder, denn in der deutschsprachigen Wikipedia findet sich dazu nicht einmal ein Eintrag. Der Begriff selbst, der vom bereits genannten Steve Souders im Jahre 2004 geprägt wurde, feiert allerdings schon bald seinen zehnten Geburtstag. Umso verwunderlicher scheint es, dass dieses Thema im deutschsprachigen Webbereich noch nicht angekommen ist.

So wird reihenweise sehr viel Geld und Zeit in das Thema SEO gesteckt, die Performance einer Webseite wird allerdings nur stiefmütterlich behandelt. Und das obwohl es im Gegensatz zu SEO einen direkten Einfluss auf den Anwender nimmt, seine Zufriedenheit und das Vertrauen steigert.

Viele mögen sich an dieser Stelle jetzt vielleicht denken: Der Breitbandausbau schreitet doch voran, mittlerweile hat jeder eine anständige Internetverbindung, was kümmert mich die Performance meiner Webseite? Die Antwort: Sehr viel! Zwar werden die Übertragungsraten im Internet tendenziell immer höher, das ändert aber in der Regel nichts daran, wie schnell Ihre Seite letztlich lädt. Hier spielen vollkommen andere Faktoren eine Rolle, wie die folgenden Artikel dieser Guideline zeigen werden.

High-Performance Websites mit WordPress – Eine Guideline

In Steve Souders Standardwerk zum Thema High Performance Web Sites: 14 Steps to Faster-Loading Web Sites, definiert er gleich zu Beginn des Buches eine entscheidende Regel, er nennt diese Performance Golden Rule:

Only 10-20 % of the end user response time is spent downloading the HTML document. The other 80-90 % is spent downloading all the components in the page.

Jetzt könnten böse Zungen behaupten: Ja, das Buch stammt aus dem Jahre 2007, diese Regel ist längst veraltet. Nein, ist sie nicht, wie ein Blog-Beitrag von Steve Souders im Februar 2012 eindrucksvoll beweist: the Performance Golden Rule

Eingangs hatte ich bereits angedeutet, dass es einige doch höchst verwunderliche Entwicklungen zum Thema gibt. Eine weitere, die sich in diese Reihe anschließt ist, dass Steve Souders Buch, welches im Jahre 2007 erschienen ist, auch im Jahre 2013 noch brandaktuell ist!

Gliederung der Guideline

Hinweis: Da es sich bei dieser Guideline um die erste größere Artikelserie hier im Blog handelt, sollte die folgende Gliederung – welche sich am Buch von Steve Souders orientiert – nur als Entwurf angesehen werden und kann sich im Laufe der Zeit noch verändern.

Eine Grobeinteilung des Artikels findet entsprechend der Goldenen Performance-Regel in Front-End Optimization (FEO) und Back-End Optimization (BEO) statt. Zudem sind die Artikel nach Ihrer Wichtigkeit geordnet. Das bedeutet: Die am Anfang vorgestellten Techniken haben mehr Einfluss auf die Performance einer Webseite als die Artikel am Ende.

Hinweis 2: Im Teil 2 dieser Guideline hat sich herausgestellt, dass die Antwortseiten des genutzten Shared-Hosters von Blog IT-Solutions sehr stark schwanken, weshalb in Teil 3 zuerst der Wechsel auf einen V-Server vollzogen wurde.

  1. Einleitung
    Dabei handelt es sich um diesen Artikel.
  2. Ist-Zustand und Tool-Vorstellung
    Um am Ende die jeweilige Auswirkung der Performance-Maßnahme auch messen zu können, wird die aktuelle Geschwindigkeit der Seite mit verschiedenen Tools analysiert, welche in diesem Teil der Serie vorgestellt werden. Zum Artikel
  3. BEO: Wechsel des Hosting-Providers
    Eine der aufwendigsten Optimierungsmöglichkeiten ist der komplette Wechsel des Providers. Hier können aber unter Umständen wertvolle Millisekunden eingespart werden, wenn Sie zum Beispiel von einem Shared-Hoster auf einen V-Server umziehen. Zudem kann es passieren, dass Sie einige der nachfolgend beschriebenen Techniken aufgrund der fehlenden Konfigurationsmöglichkeiten im Backend bei Ihrer Webseite nicht umsetzen können.
    Performancegewinn der Maßnahme im Test: ca. 30 %Zum Artikel
  4. FEO: Reduzierung von HTTP-Requests
    Mithilfe verschiedenster Techniken wie CSS-Sprites, Inline-Images und Zusammenfassung von Stylesheets und Skripten werden die HTTP-Requests beim Laden der Seite reduziert.
    Performancegewinn der Maßnahme im Test: ca. 40-50 % Zum Artikel
  5. FEO: Nutzung eines Content Delivery Networks (CDN)
    Größere Mediendateien wie beispielsweise Bilder werden auf ein CDN ausgelagert. Im Zusammenspiel mit WordPress werden Tools und CDN-Dienstleister vorgestellt, die eine kostengünstige Auslagerung der Inhalte ermöglichen. Zudem wird im Artikel näher darauf eingegangen, wie Sie einige der Vorteile eines CDN mit WordPress auch kostenlos nutzen können. CDN-Übersicht, 5 Minuten CDN Installation, Kostenloses CDN für kleine Webseiten
    Performancegewinn der Maßnahme im Test: ca. 30-50 %
  6. FEO: Konfiguration eines Expires Header
    In diesem Artikel stelle ich Ihnen eine Technik vor, mit welcher Sie sich das Browsercaching Ihrer Besucher zunutze machen und dadurch die Ladezeit Ihrer Webseite vor allem bei wiederkehrenden Benutzern erheblich reduzieren.
    Performancegewinn der Maßnahme bei wiederkehrenden Besuchern: ca. 50 % Zum Artikel
  7. FEO: Komprimierung der zu übertragenden Daten inklusive Bilder
    Ohne auch nur den geringsten Eingriff im Code vorzunehmen, können Sie mithilfe einer Komprimierung das Laden von einzelnen Komponenten reduzieren. Oft wird vor allem das Komprimieren von Bildern, welches ohne Qualitätsverluste möglich ist, nicht genutzt. Komprimierung von Dateien, Optimierung von Bildern
  8. FEO: Stylesheets zu Beginn des HTML-Dokuments laden
    Damit die Webseite für den Anwender den Anschein erweckt, dass die Inhalte sehr schnell geladen werden, sollten Stylesheets (CSS-Dateien) zu Beginn eines HTML-Dokuments geladen werden. Zum Artikel
  9. FEO: Skripte am Ende des HTML-Dokuments laden
    Im Gegensatz zu Stylesheets ist bei Skripten zu empfehlen, diese am Ende des HTML-Dokuments zu platzieren, damit eine Blockierung der Webseite für den Anwender verhindert wird. Dies führt zwar effektiv zu keiner Verbesserung der Geschwindigkeit, der Anwender kann aber dadurch früher auf der Webseite navigieren. Zum Artikel
  10. FEO: Inline vs. External JavaScript und CSS?
    Bei Verwendung von CSS und JavaScript stellt sich schnell die Frage, ob der Code aus Performance-Sicht lieber direkt im HTML-Dokument eingebettet (Inline) oder extern ausgelagert (External) werden soll. Zum Artikel
  11. FEO: DNS Lookups reduzieren
    Die Auflösung einer Webadresse zu einer IP-Adresse, welcher über DNS (Domain Name System) realisiert wird, kostet Zeit. Zeit, die an manchen Stellen durch einfache Anpassungen eingespart werden kann.
  12. FEO: JavaScript und CSS reduzieren
    Mithilfe von WordPress-Tools kann sowohl der JavaScript als auch CSS-Code durch das Entfernen von unnötigen Zeichen wie beispielsweise Leerzeichen und Kommentaren minimiert und damit die Ladezeit verbessert werden.
  13. FEO: Redirects vermeiden
    Last but not least kann durch Vermeidung von unnötigen Redirects die Anzeige des gewünschten Webinhalts um einige Millisekunden beschleunigt werden.
  14. BEO: WordPress Backend beschleunigen und Datenbank bereinigen
    An dieser Stelle werden noch einige Tipps und Tricks aufgezeigt, die zu einer Verbesserung der Performance Ihrer WordPress-Installation führen. Dazu gehören das Prüfen der installierten Plugins, eine Anpassung der Reihenfolge wann die Plugins geladen werden und die Bereinigung der Datenbank.

Literatur und Quellen

Als Primärliteratur dieser Guideline für High-Performance Websites mit WordPress dient das Standardwerk von Steve Souders: High Performance Web Sites: 14 Steps to Faster-Loading Web Sites

Zudem findet sich noch zahlreiches Online-Material unter folgenden Links:

Web Performance Working Group der W3C

Steve Souders – High Performance Web Sites Blog

Stanford Computer Science – High Performance Websites: Class CS193H

Fazit

Der Einfluss der Website-Performance wird auch heutzutage noch von sehr vielen Webseiten-Betreibern unterschätzt. So wundern sich manche, warum Sie aufgrund der wachsenden Besucherzahlen ständig auf ein größeres Hosting-Paket wechseln müssen und somit Monat für Monat mehr Geld an den Provider zahlen. Alleine durch die Umsetzung der wichtigsten, hier beschrieben Tipps, können Sie die Auslastung Ihres Webservers zum Teil um über 50 % reduzieren. Damit sparen Sie nicht nur Geld, sondern gewinnen auch beim Kunden schnell an Vertrauen und generieren mehr Umsatz, wenn Sie Ihre normale WordPress-Seite hin zu einer High-Performance Website überführen.

Veröffentlicht von Josef Seidl

Josef Seidl studiert zurzeit an der TU München Wirtschaftsinformatik (M.Sc.), arbeitet nebenbei als Freelancer und ist Gründer von Blog IT-Solutions. Er ist begeistert von Technik, schätzt performante Webseiten und IT-Sicherheit. In seiner Freizeit unternimmt er gerne Wandertouren und lässt sich von fremden Orten inspirieren. Zu finden ist er auch bei XING und privat bei Twitter.