Icon for WordPress Performance and Cacheing Optimization

WordPress-Seite langsam? 9 Tipps zur Performance-Optimierung

Durch die richtigen Einstellungen in WP, deinem Theme und dem Cache kannst du die Ladezeit beschleunigen, den Page Speed optimieren und deine Google Rankings verbessern.

Die Geschwindigkeit deiner Website ist einer der wichtigsten Ranking Faktoren: Neben einer einfacher Bedienung, ansprechenden und umfangreichen Inhalten sowie positiver Reputation sind schnelle Ladezeiten das A und O um besser in der Suchmaschine gefunden zu werden.

3 Sekunden sollte deine Website maximal laden

Die Ladezeit deiner Seite kann sich auch auf den finanziellen Erfolg deiner Seite auswirken, wie folgendes Beispiel zeigt: Für jede 100 Millisekunden, die Amazon schneller lädt, steigt der Umsatz des Online Händlers um ein Prozent (Quelle). Das ist aber ein Extrembeispiel.

Um deine WordPress-Seite zu beschleunigen, habe ich dir die wichtigsten Tipps zur Performance Optimierung zusammengestellt:

Performance Tests

Zu Beginn deiner Performance Optimierung solltest du erstmal feststellen, wie schnell deine Seite überhaupt ist. Das geht am besten mit den Google PageSpeed Insights und den zwei anderen Tools WebPagetest oder Pingdom. Denn wenn du nur mit einem Tool einen Performance Test machst, kann das die Aussagekraft verfälschen, da jedes Tool seine Besonderheiten hat:

Screenshot fast website through Google PageSpeed test
Screenshot aus Google

Googles‘ PageSpeed Test hat nur sehr bedingt Aussagekraft. Er sagt dir zwar, ob die Suchmaschine deine Seite als schnell befindet (ein Score von über 85 sollte erreicht werden), allerdings sind die Optimierungsvorschläge zum Teil einfach nicht umsetzbar.

WebPagetest ist zwar etwas unübersichtlich, dafür kannst  durch die zahlreichen Auswahlfunktionen zur Standortwahl die Geschwindigkeit deiner Seite an unterschiedlichen Orten messen. Ist deine Seite nur auf Deutsch, reicht der Test mit einem der deutschen Anbieter aus. Ist deine Seite auch auf anderen Sprachen verfügbar, solltest du die Geschwindigkeit auch an anderen Standorten messen, um zu erfahren, ob du vielleicht in einem Land auf ein separates Hosting oder ein Servernetzwerk (sogenanntes Content Delivery Network, kurz: CDN) gehen solltest. Für mich ist WebPagetest der beste Anbieter, wenn es um die Messung der realen Ladezeit und Bewertung der Geschwindigkeit nach (amerikanischen) Schulnoten geht.

Screenshot from WebPagetest for a fast website
Screenshot aus WebPagetest

Pingdom ist sehr gut strukturiert und übersichtlich, allerdings bietet es derzeit nur Tests aus USA an. Für eine rein deutschsprachige Seite verliert der Test somit an Aussagekraft, da alle Daten erst noch durch den Atlantik gehen müssen und somit die Seite langsamer wirkt, als sie real bei den Deutschen geladen werden kann.

Screenshot from Pingdom website speed test
Screenshot aus Pingdom

Ich nutze Pingdom auch wegen der konstruktiven Optimierungsvorschläge, vor allem aber um in den Diagrammen weiter unten nachzuschauen, welche Dateien eine Seite ausbremsen:

Screenshot Pingdom file requests
Screenshot aus Pingdom

Diese Analyse auf Dateiebene ist jedoch nur etwas für sehr erfahrene Nutzer.

Ganz wichtig für deine Analysen ist, deine Seite vor allem zu Stoßzeiten zu messen. Also dann, wann du am meisten Besucher hast. Außerdem sind Messungen vor der Optimierungen, am besten nach jedem Teil-Schritt und nach der Optimierung sehr empfehlenswert, damit du die Erfolge und ggf. Misserfolge aufzeichnen kannst. Die nachfolgend aufgezeigten Methoden funktionieren zwar zu 99%, aber es gibt immer auch Ausnahmen.

Das richtige Theme

Einer der wichtigsten Einflussfaktoren auf die Geschwindigkeit deiner Seite ist das Theme, also das programmierte Design deiner Seite. Es gibt davon Unmengen kostenloser und kostenpflichtiger Lösungen, sogenannter Premium Themes.

Leider gibt’s weder für kostenlose noch für Premium Themes einheitliche Standards in Sachen Ladezeit (und Qualität). Vielmehr leiden vor allem die Premium Themes oft an ihrem eigenen  Erfolgsfaktor: Sie sind extrem umfangreich, damit sie so flexibel wie möglich genutzt werden können und einer breiten Masse gefallen – dass sie aber unglaublich langsam und damit ineffektiv werden (obwohl sie gut aussehen).

Schau dir deshalb vor der Installation eines jeden Themes möglichst dessen Demoversion und Performance an:

Wähle nur ein Theme aus, das mindestens einen Google PageSpeed Wert von 75 übertrifft und schneller als in 5 Sekunden geladen wird. Denn nur selten kannst du eine Seite richtig beschleunigen, wenn das Theme eine Krücke ist.

Theme Einstellungen

Diesen Tipp habe ich der WordPress Performance Optimierung-Anleitung von Sugarrae entnommen und durch nicht mal eine Minute Arbeit nochmals unsere Ladezeit um fast eine halbe Sekunde reduziert:

WordPress Performance
Screenshots aus Pingdom.com

Mit dem nachfolgenden Codeschnipsel kannst du folgende Einsparungen vornehmen:

  1. Statische Ressourcen optimieren
    Mehrfache Anfragen für Funktionen auf statischen Seiten können deaktiviert und somit überflüssige Anfragen werden.
  2. Smileys bzw. Emojis entfernen
    Wer sie nicht braucht oder ebenso hässlich findet wie ich, kann auch durch das Weglassen dieses Skriptes Performance einsparen.
  3. Die WordPress Einbettungsfunktion entfernen
    Das macht dann Sinn, wenn du nicht über das einfache Einfügen von Tweets, YouTube-Links etc. externe Inhalte einbettest, sondern die dafür von den Netzwerken bereitgestellten Funktionen verwendest oder gar zitierst bzw. externe Inhalte einfach nur verlinkst.

Hier der Code zum Einfügen in die functions.php-Datei deines Themes:

/** Performance Optimization **/ //* 1. Remove query strings from static resources function _remove_script_version( $src ){ $parts = explode( '?ver', $src ); return $parts[0]; } add_filter( 'script_loader_src', '_remove_script_version', 15, 1 ); add_filter( 'style_loader_src', '_remove_script_version', 15, 1 ); //* 2. Remove WP emoji code remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); // 3. Remove WP embed script function speed_stop_loading_wp_embed() { if (!is_admin()) { wp_deregister_script('wp-embed'); } } add_action('init', 'speed_stop_loading_wp_embed');

Revisionen beschränken

Die meisten Texter unter uns schätzen die Revisionsfunktion von WordPress sehr. Damit können wir innerhalb unserer Beiträge auf jeden beliebigen vorherigen Stand zurück wechseln und alle Anpassungen einsehen. Doch wer kein Limit für Revisionen eingestellt hat, kann bei hoher Anzahl an gespeicherten Versionen seine Seite verlangsamen. Das trifft zwar nicht immer zu, sollte aber trotzdem durch ein definiertes Limit reduziert werden.

Du kannst die Anzahl der Revisionen mit einer Zeile Code limitieren. Bist du Textsicher, kannst du das Limit auf 3 Stück reduzieren, andernfalls solltest du an maximal 10 Revisionen für deine WordPress-Inhalte denken.

Google Analytics

Ein weiterer Faktor, der deine WordPress-Seite ausbremsen kann, ist Google Analytics: Das Statistiktool der Suchmaschine erfordert ein Script, welches bei jedem Laden deiner Seite vom Google-Server abgerufen werden muss. Dies kann zu einer Verlangsamung von 0,5 bis 1 Sekunde führen.

Damit Google Analytics deine Website nicht ausbremst, hast du eigentlich zwei Optionen:

  1. PageSpeed austricksen
  2. Analytics lokal hosten

Variante 1 ist zwar nicht die feine englische Art, aber funktioniert einfach und extrem gut: Packe vor deinen Analytics-Tracking-Code einfach dieses Skript und Analytics wird beim PageSpeed-Test nicht geladen:

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?>

Nach dem Analytics-Skript muss dann dieser Code rein:

<?php endif; ?>

Am Ende muss es so ausschauen:

 <?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-xxxxxxx-x', 'auto'); // Dein Analytics Code ga('send', 'pageview'); </script> <?php endif; ?> 

Variante 2 mit dem lokalen Hosting ist definitiv die bessere aber auch die aufwändigere Wahl. Um das lokale Hosting vorzunehmen brauchst du etwas mehr Codeerfahrung und folgst am besten dieser Anleitung.

Google Schriftarten

Ein ähnliches Problem wie bei Google Analytics besteht bei Google Schriftarten: Grundsätzlich empfehle ich dir nicht mehr als eine Sonderschriftart zu verwenden. Denn Sonderschriftarten schauen zwar gut aus, brauchen aber richtig viel Speicher. Deswegen kombinieren wir bei Webseiten normalerweise eine Sonderschriftart mit ein bis zwei Standardschriftarten. Standardschriftarten (z.B. Arial, Times New Roman) bremsen deine Seite nicht aus, da sie bei jedem Rechner vorinstalliert sind und nicht geladen werden würden.

Am besten stellst du von vorne herein maximal eine Sonderschriftart ein und vermeidest nach Möglichkeit auch sogenannte Iconfonts. Das sind Iconsammlungen, die mit einer Schriftarte eingebaut werden.

Erfahrene Nutzer können zum einfacheren Selbst-Hosting von Google Fonts dieses sehr hilfreiche Tool benutzen. Dazu einfach die Schriftart auswählen, die ZIP-Datei per FTP in den fonts-Ordner deines Themes laden (z.B. deluckstheme/fonts) und dann das nötige CSS wie in der Anleitung beschrieben in deine style.css rein kopieren. Dazu solltest du die Pfade auf das richtige Verzeichnis anpassen, also aus ../fonts wird /wp-content/themes/deluckstheme/fonts. Anschließend nochmal testen und gut ist’s.

Plugins reduzieren

Je mehr unterschiedliche Plugins (Erweiterungen) deine WordPress-Seite braucht, desto langsamer, unsicherer und wartungsintensiver wird deine Website. Denn Schwachstellen für Hacker finden sich oft in schlecht gesicherten Plugins (wie in jedem anderen CMS auch) und mit jedem zusätzlichen Plugin steigt auch die Anzahl der Dateien und Datenbankabfragen deiner Seite.

Achte deswegen bei der Recherche und Auswahl deiner Plugins genau darauf, welche Funktionen du (noch wirklich) brauchst. Ein Tool, welches Beispielsweise Termine deiner Website automatisch mit Facebook-Veranstaltungen verknüpft, ist total überflüssig, wenn du die Verlinkung genauso manuell vornehmen kannst. Ähnliches gilt für’s SEO Plugin.

Wir haben übrigens unter anderem deswegen unser SEO Plugin modular und sehr performance-orientiert entwickelt, weil das Yoast Plugin so langsam ist. Ohne zu viel Eigenwerbung zu machen, kannst du mit unserem Tool alles relevante kombinieren und brauchst keine extra Plugins für Statistiken, Strukturierte Daten, Shopoptimierung & Co, wie du’s beispielsweise beim Yoast Plugin benötigst.

Bilder Optimieren

Bilder zählen zu den größten Performance-Killern. Sie machen meist bis zu 80% der Ladezeit aus. Falsch eingesetzt kannst du mit ihnen den PageSpeed jeder guten Seite kaputt machen.

Achte deswegen zunächst darauf, Bilder in den richtigen Dimensionen und im richtigen Dateiformat in deiner Website einzustellen:

  • Fotos und Bilder mit hoher Farbvielfalt als JPGs (möglichst mit reduzierter Qualität für’s Web)
  • Grafiken als PNGs oder SVGs (Vektorgrafiken) – Für SVGs benötigst du allerdings aktuell eine Codeerweiterung deiner functions.php-Datei oder ein extra Plugin, welches die Funktionalität in WordPress zulässt. Überflüssige Plugins wollen wir aber eigentlich vermeiden.
  • Animationen als animierte GIFs oder animierte SVGs. Letztere sind bei animierten Grafiken um ein vielfaches kleiner und schöner als GIFs, benötigen aber oft ein bisschen vorab Testen. Wir setzen übrigens auch auf animierte SVGs (klick einfach mal ins Hauptmenü oben und schau dir die Animationen für jede Seite an).

Schon beim Speichern deiner Bilder (z.B. in Photoshop) solltest du die Dateigröße deiner Bilder durch prozentuale Reduzierung minimieren. Ich gehe sogar soweit, dass jedes Bild von der Anzahl der (möglichen) Farben runter geschraubt wird – deswegen gibt’s übrigens in meinen Artikelbildern fast immer nur Grafiken mit wenig Farben. Diese Einstellungen variieren je nach Bildbearbeitungsprogramm.

Zumindest dann, wenn das reduzierte Speichern keine Alternative ist, solltest du deine Bilder noch über ein Komprimierungstool wie ImageOptim oder Compressor.io verkleinern. Ich kenne kein Bildkompressionsplugin für WordPress, welches dieses ähnlich gut kann wie Compressor.io.

Eine Einschränkung bei der Bildoptimierung gibt’s noch: Bilder, die bereits im Google Index sind, also die schon in deiner Seite online sind, sollten nicht optimiert werden, da du ansonsten wichtige Rankings deiner Bilder verlieren kannst. Normalerweise sind alle Bilder deiner Seite im Google Index, außer

  • die Bilder sind noch zu neu
  • oder sie sind als Hintergründe eingebettet.

Um das zu überprüfen kannst du in Google nach site:deinewebsite.de suchen und dann auf den Tab mit den Bildern klicken. So schaut das dann zum Beispiel aus.

Cacheing Plugin

Anschließend solltest du den Server- und Browser-Zwischenspeicher deiner Besucher benutzen, um deine WordPress Seite schneller laden zu lassen. Der Vorteil von so einem Cache ist, dass alle wichtigen Dateien direkt an der richtigen Stelle für deine Besucher bereitgehalten und somit deine Inhalte viel schneller dargestellt werden.

Setze dafür ein Caching Plugin ein. Es gibt hier unterschiedliche Lösungen, die sich teils stark in dem Resultat – der Geschwindigkeit – unterscheiden.

Muster Einstellungen für WP Fastest Cache. Screenshot aus dem Plugin.
Muster Einstellungen für WP Fastest Cache. Screenshot aus dem Plugin.

Ich setze bei fast allen Seiten von uns WP Fastest Cache ein. WP Fastest Cache gibt’s in einer kostenlosen und in einer Premium Variante. Die Premium Version kann noch ein paar Millisekunden mehr rausholen. Mir ist der Unterschied das Geld wert. Dieses Plugin ist bei unseren Seiten, die mit unterschiedlichen visuellen Editoren ausgestattet sind, meist schneller und einfacher einzurichten als WP Rocket und W3 Total Cache.

WP Rocket ist ein reines Premium Plugin und kostet somit immer Geld. Es erzielt meinen Messungen zufolge fast dasselbe Ergebnis wie WP Fastest Cache. Mit folgender Ausnahme kannst du dir das Geld sparen: wenn dein Server von Grund auf sehr langsam ist, oder deine Seite im Ausland zu langsam geladen wird (s. WebPagetest und Pingdom Hinweis unter Punkt 1), solltest du deine Inhalte (vor allem die Bilder) über ein Servernetzwerk (engl. Content Delivery Network, kurz: CDN) auslagern. Als CDN empfiehlt WP Rocket den Anbieter Cloud Flare, den ich für den besten Anbieter für WordPress empfinde. Die Kopplung von Cloud Flare mit deiner WordPress Seite geht mit WP Rocket sehr einfach. Die anderen Plugins haben zwar auch Unterstützung für solche Netzwerke wie z.B. MaxCDN mit dabei, allerdings ist die Einrichtung meist schwieriger und die Anbieter (subjektiv) schlechter.

Plugin Vergleich

Ich habe die folgenden Plugins nach ihrem Google PageSpeed auf unserer Website, auf Spezialgeruestbau.de und auf Praxis-Breitenberger.de getestet. Jedes Plugin hatte das gleiche bestmögliche Setup und alle anderen Caching Plugins waren zum Test entfernt. Und jetzt schau dir mal den Unterschied an:

Cacheing Plugin WP Fastest Cache Free WP Fastest Cache Premium WP Rocket Cachify
Desktop PageSpeed 90 90 82 73
Mobile PageSpeed 74 74 71 64

Eine weitere Möglichkeit der Beschleunigung mittels Cache ist das sogenannte NGINX. Dieser Zwischenspeicher muss von deinem Hoster angeboten und aktiviert werden. Er „boostet“ deine Seite zusätzlich. Wir kommen so von 3 auf rund 2 Sekunden Ladezeit runter.

Server PHP Version

Bleiben wir bei deinem Server: Eine veraltete Version der Programmiersprache PHP kann außerdem zu einer langsamen WordPress Seite führen. So haben wir in unterschiedlichen Tests gemessen, dass in WordPress gut 10-20% Ladezeit durch die Umstellung von PHP 5.4 auf PHP 7.0 gespart werden kann. Bei uns hat die Umstellung ziemlich genau 0,5 Sekunden Ladezeit-Ersparnis gebracht. Die Umstellung funktioniert nur bei Webhostern und Servern, die dir auch die Rechte dafür geben und die neueste Version aktiviert haben. Frag am besten deinen Support, falls du hierzu keine Einstellung findest.

Fazit

Die Performance Optimierung bei WordPress ist ein riesiges, schier endloses Thema. Wenn du aber schon bei der Konzeption deiner Seite ein schnelles Theme und Plugins mit allen benötigten Funktionen wählst, machst du alles richtig. Auch der richtige Hoster kann viel ausrichten. Durch ein paar Feinheiten kannst du dir zusätzlich Ladezeit einsparen.

Denk aber bei jeder Optimierung daran deine Seite intensiv zu testen:

  • Manuell, indem du dich auf unterschiedlichen Browsern durchklickst;
  • Mit Tools, indem du Google’s PageSpeed Test, Webpagetest, Pingdom & Co mehrfach, am besten zu unterschiedlichen Zeiten die Ladezeit deiner WordPress Seite prüfen lässt.
Zurück SEO Blog