WordPress PageSpeed optimieren: In 8 Schritten zur schnellen Website

18.01.2019·von Gerrit Noppel zum Thema WordPress

Eine schnelle Website kommt bei den Google-Ergebnissen schneller aufs Siegertreppchen. Denn PageSpeed ist mittlerweile ein Rankingfaktor für Google – wie wichtig er wirklich ist, erfährst du gleich. Wenn du also die Ladezeit deiner WordPress-Website und damit die User-Experience optimieren möchtest, musst du selbst keinen Marathon laufen – es reichen schon unsere 8 Schritte, die wir dir in diesem Artikel vorstellen.

Darum ist der PageSpeed wichtig

Unter SEOs herrscht immer noch eine breite Diskussion, wie wichtig der Pagespeed für das Ranking denn nun wirklich ist. Um einmal zu differenzieren: Unbestritten bleibt, dass der Pagespeed einer Website ein Rankingfaktor ist – nur die Meinungen über die Gewichtung innerhalb des Google-Algorithmus gehen auseinander.

Es ist zwar anzunehmen, dass der direkte Einfluss des PageSpeeds auf das Ranking nicht überdimensional riesig ist (mehr dazu in diesem ausführlichen Artikel mit Korrelationsuntersuchungen zwischen Pagespeed und Ranking). Aber zäumen wir das Pferd einmal von hinten auf und betrachten wir eine unterdurchschnittlich langsame Website (>5 Sekunden Ladezeit).

Metriken wie Absprungrate, durchschnittliche Sitzungsdauer oder Return-to-SERP-Rate), die allesamt Anhaltspunkte für Content- und Website-Qualität sind, werden von einer langen Ladezeit negativ beeinflusst. Der User wird kürzer auf der Website verweilen, er wird womöglich zurück zur Google-Suche springen und ein anderes Ergebnis klicken oder schlichtweg mitten im Ladevorgang abbrechen. Auf Nimmerwiedersehen …

Zwar betont Google immer wieder, dass User-Signale keine Rankingfaktoren sind, aber es ist unbestritten, dass Google mittlerweile User-Signale nutzt, um die Qualität von Content zu bewerten. 

Aber der Fokus auf SEO ist nur die halbe Wahrheit. Vielmehr geht es um die Benutzerfreundlichkeit deiner Website – nicht für die Suchmaschine, sondern primär für den realen User. Laut einer Untersuchung von Google erhöht eine Verlängerung der Ladezeit von einer auf fünf Sekunden die Absprungrate bereits um 90 Prozent.

Bewertung: Diese Werte erscheinen auf den ersten Blick hoch. Hier muss man sich aber die Metrik der Absprungrate (Bounce Rate) vergegenwärtigen: Absprungrate meinte den prozentualen Anteil der User, die auf eine Seite gelangen und sie wieder verlassen, ohne eine weitere Abfrage an den Analytics-Server gestellt zu haben. Das heißt, sie haben auf keinen weiterführenden Link geklickt. Ein Anstieg der Absprungrate um 90 % heißt also nicht zwingend, dass 90 % mehr User die Seite innerhalb der 5-sekündigen Ladezeit verlassen haben.

Was bedeutet überhaupt „schnell“?

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

Ladezeiten im E-Commerce

Gerade für Online-Shops können lange Ladezeiten höchst umsatzschädigend sein. 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.  

Bewertung: Auch diese Zahlen haben es in sich, da hier lediglich von einer Ladezeitverlängerung von einer Sekunde ausgegangen wird. Man muss hier beachten, dass User alle Online-Shops stets mit dem Branchenprimus Amazon vergleichen – bewusst oder unbewusst. Und Amazon schneidet in so ziemlich jeder Disziplin (Pagespeed, Usability, Einfachheit usw.) mit der vollen Punktzahl ab. Deshalb sind diese Zahlen durchaus als realistisch einzustufen. 

Mobile First Index

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. 

UPDATE #1: Am 1. Juli 2019 gab Google in seinem Blog bekannt, dass alle neuen Websites von nun an mit dem Smartphone-Googlebot gecrawlt werden.

Tipp: Um zu überprüfen, ob Google den Haupt-Crawler bereits auf die Smartphone-Variante umgestellt hat, gehe so vor: 

1. Öffne die Google Search Console
2. Klicke auf Abdeckung links in der Navigation
3. Oben rechts zeigt dir Google den Haupt-Crawler an

Was heißt das genau? Google schaut sich deine Website zuerst mobil an und indexiert auch die Inhalte hiernach. Außerdem ist die mobile Version Basis für das Ranking – sowohl für das Mobile-Ranking als auch das Desktop-Ranking.

UPDATE #2: In Chromium Blog hat das Entwicklerteam von Google Chrome angekündigt, Websites in Zukunft als langsam oder schnell zu kennzeichnen. Dabei ist zwar noch nicht klar, wie diese Kennzeichnung genau funktionieren wird und inwiefern nutzerbedingte Faktoren gekennzeichnet werden (z. B. schlechte Internetverbindung). 

So könnte das Interface laut des Chrome-Teams aussehen: 

Auch wenn das Chrome-Team diese Änderung in kleinen Schritten einführen will, gibt Google aus PR-Sicht mal wieder klar die Richtung vor: “Wenn du dich nicht vor deinen Kunden blamieren willst, mache deine Seite bitte schnell.” Mehr dazu im nächsten Abschnitt …

Was hat Google von der Pagespeed-Optimierung?

Google wird nicht müde zu betonen, wie wichtig die Nutzererfahrung beim Surfen ist und dass die Ladezeit einen erheblichen Einfluss auf diese hat. Klar, Google ist daran interessiert, dass der User ein optimales Erlebnis auf der Website erfährt und seine gewünschten Inhalte schnell findet. 

Aber Google profitiert noch auf eine andere Weise von schnellen Websites. Google muss regelmäßig große Teile des Internets crawlen. Das erfordert eine kaum vorstellbare Rechenkapazität bei ca. 1,24 Milliarden Websites weltweit. Und das Web wächst ständig. Logischerweise spart Google eine Menge Geld, wenn das Crawling aller Websites möglichst ressourcenschonend vonstatten geht. 

Tipp: Laut John Mueller werden Seiten, die länger als 2 Sekunden für den Download benötigen, seltener gecrawlt. Die Optimierung des eigenen Crawlbudget ist für Seiten mit sehr aktuellen Inhalten oder große Onlineshops ein wichtiger Hebel. Denn nur über das Crawling kann Google neue Inhalte in seinen Suchindex aufnehmen.

WordPress Ladezeit optimieren mit Friendventure

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

Erster Schritt: Hosting

Mittlerweile gibt es Hosting-Plattformen, die günstige Pakete auch für den kleinen Geldbeutel anbieten. Aber Vorsicht, ein scheinbar günstiges Paket kann deine Website verlangsamen. 

Bei der Auswahl des Hosting-Pakets kommt es primär auf die Anzahl der erwarteten Websitebesucher an. Wenn du mit 5.000 täglichen Besuchern rechnest, benötigst du ganz andere Serverkapazitäten als bei 100 Besuchern. Die Nutzerzahlen findest du in Google Analytics. 

Tipp: Am Hosting-Paket solltest du nicht sparen. Die jährlichen Kosten sind meist ohnehin überschaubar. Ein Serverausfall kann dich im E-Commerce hingegen bares Geld kosten. 

Auf was solltest du also achten, wenn du dich für einen Provider und ein Paket entscheidest? Wichtig 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. Gerne beraten wir dich hierzu! 

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. Das wirkt sich auch auf die Performance aus. Deshalb verzichten wir auf All-in-One-Lösungen oder auf Pagebuilder wie den Visual Composer, den WP Bakery Page Builder oder Elementor. 

Uns ist bis heute keine All-in-one-Lösung bekannt, die komplett reibungslos in WordPress funktioniert. Häufig kollidieren Plugins mit dem Pagebuilder oder legen sich gegenseitig lahm. Manchmal funktioniert das komplette Theme nicht mehr richtig, weil Plugins hinzugezogen wurde. Wenn du noch genauer wissen möchtest, warum wir Pagebuilder und All-in-One-Lösungen links liegen lassen, dann können wir dir folgenden Blogartikel ans Herz legen: Nachteile des Visual Composers: Warum du die Finger von ihm lassen solltest.

Stattdessen entwickeln wir 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.

Du fragst dich vielleicht, welche Plugins zu der Kategorie “wichtig” gehören und welche eher unwichtig sind. Das kommt natürlich auf das Projekt an. 

Unsere TOP-5 an wirklich wichtigen Plugins, die wir in (fast) jedem Projekt nutzen:

1. Advanced Custom Fields (ACF) Pro (eigene Module in WordPress definieren)
2. Yoast SEO (SEO Plugin für Einsteiger & Profis)
3. Duplicator (Übertragung der Website zwischen Servern)
4. WP Rocket (Caching Plugin)
5. WP Forms (Kontaktformulare anlegen)

Plugins bieten meist Abkürzungen in der Webentwicklung. Sie sparen Zeit & Geld, wenn man sie richtig nutzt. Dabei besteht stets die Gefahr, das System aus „Bequemlichkeit“ mit Plugins zu überlasten. Denn häufig ist eine eine händische Programmierung die sauberste Lösung. Natürlich ist Zeit = Geld, daher wägen wir stets Kosten und Nutzen von Individualprogrammierung vs. Plugin ab. 

Beispiel: Ein gutes Beispiel für ein weniger nützliches Plugin ist Favicon by RealFaviconGenerator. Denn das Einfügen eines Favicons ist für erfahrene Entwickler alles andere als Raketenwissenschaft. Auch wenn dieses einzelne Plugin keine riesige Auswirkung auf die Ladegeschwindigkeit deiner Seite haben wird, so ist es aus unserer Sicht die Summe an “unnötigen” Plugins, die sich dann irgendwann doch auf die Performance deiner Seite auswirken.

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 bereits angesprochene Plugin WP Rocket. 

Tipp: Im Zweifel ist es immer besser, die gzip-Komprimierung von einem erfahrenen Entwickler durchführen zu lassen. Es ist außerdem immer ratsam, vorher ein Backup zu erstellen. 

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.

Tipp: Auch bei der Code-Komprimierung und beim Caching gilt: Lieber einen Experten an die Sache lassen und für den Notfall ein Backup erstellen. 

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 Schritte befolgt haben, muss die Website sich in 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.

We use a variety of calculated & measured metrics internally, there’s no single tool / number that will be equivalent. I’d use these tools to find low-hanging, high-impact issues that you can resolve to make your site more performant overall.

— ? John ? (@JohnMu) July 26, 2018

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.

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 lieber 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.

Wenn du nach einem Dienstleister für die Speed-Optimierung deiner Website suchst, dann mache dir klar, dass es ein Unterschied ist, ob du einen Laien-Entwickler oder einen erfahrenen WordPress-Entwickler damit beauftragst. Websites sind keine Massenprodukte. Und auch die Performance-Optimierung ist nichts, was am Reißbrett entsteht. Falls du Beratung bei deiner WordPress-Speed-Optimierung benötigst, melde dich gerne ganz unverbindlich bei uns!

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ß!