Home / Blog / WordPress / WordPress PageSpeed optimieren: In 8 Schritten zur schnellen Website

WordPress PageSpeed optimieren: In 8 Schritten zur schnellen Website

18.01.2019·von Gerrit Noppel zum Thema WordPress

PageSpeed ist mittlerweile ein wichtiger Rankingfaktor und damit auch ein relevanter Teil unserer Webentwicklung. In 8 Schritten optimieren wir die Ladezeit deiner WordPress-Website und sorgen damit für eine optimale User Experience. Welche Maßnahmen bei der Performance-Optimierung am wichtigsten sind, erfährst du hier.

 

Darum ist der PageSpeed wichtig

Im Juli 2018 hat Google sein Speed-Update im Rahmen des Mobile First Index ausgerollt. Aus dem offiziellen Google-Blog geht hervor, dass PageSpeed nun auch ein Rankingfaktor für Mobile Searches ist. Auch wenn Google etwas kryptisch bleibt, wie stark der Einfluss des PageSpeeds auf das Ranking wirklich ist (es wird zwischen langsamen und schnellen Websites unterschieden), so ist die Ladezeit deiner Website auf jeden Fall ein wichtiger Hebel.

Zwar ist anzunehmen, dass der direkte Einfluss des PageSpeeds auf das Ranking nicht riesig ist (mehr dazu hier). Aber der Einfluss von langen Ladezeiten auf das Ranking über indirekte User Signals (Absprungrate, durchschnittliche Sitzungsdauer und Return-to-SERP-Rate) dafür um so mehr. Laut einer Untersuchung von Google erhöht eine Verlängerung der Ladezeit von einer auf fünf Sekunden die Absprungrate bereits um 90 Prozent.

Google Ladezeit Absprungrate

Gerade für Online-Shops sind lange Ladezeiten höchst umsatzschädigend. Eine Studie von Kissmetrics hat ergeben, dass eine Verzögerung der Ladezeit um eine Sekunde zu

  • 11 Prozent weniger Seitenaufrufen,
  • 7 Prozent weniger Conversions und
  • 16 Prozent weniger zufriedenen Kunden führt.  

Google wird deshalb nicht müde zu betonen, wie wichtig die Nutzererfahrung ist und dass die Ladezeit einer Website diese stark beeinflusst. Denn Google ist natürlich daran interessiert, dass der User ein optimales Erlebnis auf der Website erfährt und seine gewünschten Inhalte schnell findet.

Aber wie ist eigentlich ein “schneller” PageSpeed definiert? Laut Google gilt eine Ladezeit von unter 2-3 Sekunden als optimal. Auch wenn diese Benchmark sehr allgemein ist, und sicherlich nicht auf alle Websites angewendet werden kann, so kann sie als guter Anhaltspunkt dienen.

 

WordPress Ladezeit optimieren mit Friendventure

Natürlich ist die Optimierung des Website-Speeds für jedes Projekt individuell. Dennoch sind es häufig dieselben Stellschrauben, an denen wir drehen, um den Pagespeed einer Website zu optimieren.

 

Erster Schritt: Hosting

Mittlerweile gibt es Hosting-Plattformen, die günstige Pakete für wenige Euros im Monat anbieten. Für eine professionelle Unternehmenswebsite solltest du Discount-Anbieter wie Strato oder 1&1 aber links liegen lassen.

Der Preis sollte nicht der wichtigste Faktor bei der Auswahl des richtigen Anbieters sein, da die Kosten ohnehin überschaubar sind. Viel wichtiger sind:

  • ein durchgängig erreichbarer Kundenservice für den Störungsfall,
  • aktuelle Server-Infrastruktur und Technologien,
  • PHP 7 Unterstützung,
  • ausreichende Server-Ressourcen und
  • eine (fast) durchgehende Verfügbarkeit und dementsprechend eine geringe Ausfallzeit.  

Wir suchen für dich immer den Hosting-Server heraus, der am besten auf deine Bedürfnisse zugeschnitten ist. Wir wägen Kosten und Nutzen ab und sorgen somit für die Grundlage einer schneller Website. Gute Erfahrung haben wir bisher mit dem Hosting-Anbieter all-inkl.com gemacht.

 

Zweiter Schritt: Theme-Entwicklung

Das WordPress-Theme als Grundgerüst deiner Website ist zu großen Teilen für die Geschwindigkeit deiner Website verantwortlich. Häufig sind Templates von Haus aus mit vielen Funktionen und Plugins ausgestattet, die ohnehin nicht gebraucht werden. Deshalb verzichten wir auf All-in-One-Lösungen oder auf Pagebuilder wie den Visual Composer.

Wir entwickeln deshalb ein schlankes, auf Performance ausgerichtetes Theme für dich. Mithilfe von Advanced Custom Fields (ACF) können wir außerdem benutzerdefinierte Module für deine Website erstellen, die überschaubar individuell angepasst und mit Inhalt befüllt werden können.

 

Dritter Schritt: Plugins deaktivieren

Von Zeit zu Zeit können sich so einige Plugins in deinem WordPress ansammeln. Manche sind natürlich sinnvoll und sollten aktiviert bleiben. Andere werden aber gar nicht mehr genutzt und verbrauchen nur unnötig viel Ressourcen durch das Laden von CSS-Dateien und zahlreiche Datenbankabfragen.

Wir achten immer darauf, nur die wirklich wichtigen Plugins zu installieren, um WordPress nicht zu überladen. Außerdem deaktivieren wir alle Plugins, die nur temporär genutzt werden. Auch das wirkt sich positiv auf die Performance aus.

 

Vierter Schritt: Bilder optimieren

Erfahrungsgemäß liegt in der Bildoptimierung das größte Potenzial, um deine WordPress Ladezeiten zu verbessern. Zu hoch aufgelöste und unkomprimierte Bilder können die Ladezeit für den User mal schnell um ein paar Sekunden in die Höhe treiben. Hier gibt es verschiedene Ansätze, die wir verfolgen:

 

Bildmaße

Wir sorgen von Anfang an für ein sauberes Dateimanagement, indem wir die Maße für Bilder vor dem Hochladen anpassen. Außerdem integrieren wir Code, der Bilder in der jeweils benötigten Auflösung ausliefert. Das passiert automatisch: Der Server liefert beim Besuch der Website unterschiedliche Versionen des jeweils benötigten Bildes in unterschiedlichen Abmessungen, je nachdem wie groß der Viewport ist und ob es sich um ein Retina-Display handelt. Somit wird auf einem Smartphone z. B. eine kleinere Version des Bildes geladen als an einem Desktop-Bildschirm.

 

Bildkomprimierung

Wir komprimieren alle Bilder vor dem Upload noch einmal mit dem Online-Tool Tinyjpg oder nutzen die vorhandenen Server-Tools zur automatischen Komprimierung.

 

Bilder nachladen mit Lazy Loading

Bei einer sehr bildlastigen Website ist die Komprimierung der Bilder alleine manchmal nicht ausreichend. Hier macht es Sinn, die Bilder erst dann zu laden, wenn der User an die entsprechende Stelle scrollt. Dieses Prinzip nennt sich “Lazy Loading”.

Eine Galerie mit 100 Bildern programmieren wir beispielsweise so, dass beim Öffnen der Seite nicht direkt alle 100 Bilder geladen werden, sondern zunächst nur diejenigen, die above-the-fold sofort sichtbar sind.

 

Fünfter Schritt: gzip-Komprimierung

Neben der Bildoptimierung ist die Datei-Komprimierung ein wichtiger Baustein, um deine Seite für User zu beschleunigen. Hierdurch werden z. B. JavaScript-, HTML- und CSS-Dateien verkleinert übertragen. Wir nutzen die Komprimierung über das Plugin WP Rocket.

 

Sechster Schritt: Code optimieren und verkürzen

Beim Einsatz von Themes, Child-Themes und Plugins wird eine ganze Menge Code produziert. Diesen gilt es soweit wie möglich zu reduzieren. Da der Browser diesen Programmcode immer komplett “lesen” muss, macht es Sinn, die Zeichenzahl dieses Codes so weit es geht zu reduzieren.

Das Plugin WP Rocket (oder auch Autoptimize) minifiziert für uns den HTML-, CSS- und JavaScript-Code. Hierbei werden unnötige Leerzeichen automatisch entfernt und Variablennamen gekürzt. Außerdem werden so viele CSS- und JS-Dateien wie möglich zusammengefasst, um die Anzahl an Server-Abfragen zu reduzieren.

 

Siebter Schritt: Caching nutzen

WordPress Websites sind von Haus aus dynamisch. Das bedeutet, dass bei jedem Seitenaufruf eine Datenbankabfrage für jedes einzelne Element auf deiner Website stattfindet. Das frisst wertvolle Ressourcen. Wieder schafft das Plugin WP Rocket Abhilfe, denn es generiert statische Dateien, welche die Datenbankabfragen deutlich reduzieren. Das Resultat ist ein deutlich verbesserter PageSpeed.

 

Achter Schritt: Updates

Natürlich nutzen wir immer die neuste Technik: Plugins, Themes und Servereinstellungen halten wir immer auf dem neuesten Stand, sodass keine Sicherheitslücken oder Performance-Einbußen entstehen.  

 

Website-Speed testen

Auch wenn wir alle Parameter beachtet haben, um deine Website zu beschleunigen, müssen wir unsere Optimierung einem Test unterziehen. Hierzu gibt es unzählige Tools.

Erstmal ein Wermutstropfen für alle Speed-Optimierer: John Mueller von Google twitterte im Juli 2018, dass kein Tool existiert, das den PageSpeed so gut misst wie die internen Tools von Google.

Im Grunde nicht weiter verwunderlich, dass Google ganz individuelle Parameter nutzt und sich hier nicht in die Karten schauen lässt. Aber keine Sorge, auch die kostenlosen Tools reichen völlig aus, um den Website-Speed zu testen. Wir nutzen für die Messung zwei Tools, die sich in unserer Anwendung bewährt haben.

 

Pingdom Tools

Mit Pingdom Tools können wir die tatsächliche Ladezeit deiner Website von verschiedene Orten der Welt aus testen. Das Tool berechnet einen Performance Grade zur Vergleichbarkeit und gibt zusätzlich Verbesserungstipps. Eine Wasserfall-Ansicht listet außerdem alle Dateien auf.

 

Google PageSpeed Insights

Googles PageSpeed Insights ist ein weiteres mächtiges Tool, um Potenziale in der PageSpeed-Optimierung aufzudecken. Der Vorteil ist, dass wir eine separate Auswertung für die Desktop- und Mobile-Version deiner Website erhalten.

Google Pagespeed Insights Friendventure
Dennoch überbewerten wir das Ergebnis in Form des Speed Scores nicht. Google vergibt hier einen Wert zwischen 0 und 100. Viel interessanter als dieser Wert sind die einzelnen Vorschläge zur Optimierung. Hierzu hat sich John Mueller ebenfalls auf Twitter geäußert.

 

Fazit

Bei unseren Webprojekten ist die Performance-Optimierung neben Gestaltung, Funktionalität und User Experience immer ein wichtiger Faktor. Dabei optimieren wir von Beginn an, indem wir für einen sauber strukturierten und komprimierten Code sorgen. Denn Plugins können zwar unterstützen, indem sie Dateien verkleinern, zusammenlegen oder Code kürzen, aber der Entwickler ist derjenige, der durch Front- und Backend die Struktur der Website bestimmt. Und diese Struktur ist Grundlage für eine ordentliche Performance.

Solange Server und User miteinander kommunizieren, wird es immer Optimierungspotenzial für PageSpeed geben. Es ist niemals ein Optimalzustand erreicht, da es immer NOCH schneller geht. Auch wenn deine Seite innerhalb von 1,1 Sekunden lädt, dann wären 0,8 Sekunden eben noch besser. Oder 0,5 Sekunden … Du weißt, worauf ich hinaus will.

Deshalb lass dich nicht verrückt machen von Scores und Metriken zur Messung der Website-Geschwindigkeit. Betrachte den PageSpeed als wichtigen Teil der User Experience. Gute Webentwickler und Webdesigner optimieren ohnehin primär immer für den User und nicht für ein Tool.

Zum Weitergucken: Hier eine informative Live-Case-Study, die zeigt, wie der PageSpeed deutlich verbessert werden kann. Das Video stammt zwar aus 2016, zeigt aber sehr gut die gängigen Methoden der Speed-Optimierung für WordPress. Viel Spaß!

Über den Autor

Gerrit brennt für Content Marketing. Leidenschaftlich gern schreibt er zu Themen wie New Work, Mitarbeiterbeteiligung und Entrepreneurship. Sein Interesse gilt außerdem der Europa- und Netzpolitik. Bei Fragen und Anregungen zum Blog kontaktiert ihn gerne per E-Mail: gerrit@friendventure.de

Das könnte noch andere interessieren?
Dann teile es mit der Welt!

Klingt spannend? Gerne sprechen wir mit dir auch über dein Projekt!

Projektanfrage