Den WordPress PageSpeed optimieren ist aktuell ein großes Thema, da Google angekündigt hat, dass zukünftig die Website-Geschwindigkeit auch für das Ranking bei der mobilen Suche eine Rolle spielen wird.
Für die Desktop-Suche ist der Pagespeed bereits seit einigen Jahren ein Rankingfaktor.
Wenn du dich bisher noch nicht mit der WordPress Optimierung beschäftigt hast, dann wird es also höchste Zeit.
In diesem umfangreichen Guide werde ich dir Schritt für Schritt zeigen, wie du den Pagespeed-Score optimierst.
Dabei zeige ich dir die Ergebnisse der einzelnen Schritte anhand eines aufgesetzten Test-Blogs.
Du kannst jeden Schritt sofort auf deinem Blog umsetzen, vorausgesetzt, er ist bisher noch nicht erfolgt.
Inhaltsverzeichnis:
- Optimierung der Bilder
- Komprimierung auf dem Server aktivieren
- Browser-Cache nutzen
- Plugins überprüfen
- HTML, JavaScript & CSS reduzieren
- Lazy Load für Bilder
- Optimiere deine Datenbank
- Cache-Plugin installieren
- Nutze ein schlankes Theme
- Wähle einen guten Webhoster
- Gravatare deaktivieren
- Trackbacks und Pingbacks deaktivieren
- Entferne Google Web Fonts
- Einsatz eines Content Delivery Networks (CDN) prüfen
- WordPress-Header entschlacken
- CSS- & JavaScript-Code optimieren
- JavaScript- und CSS-Ressourcen prüfen, die das Rendering blockieren
- Antwortzeit des Servers reduzieren
Warum du deinen WordPress Pagespeed optimieren solltest
- Google und andere Suchmaschinen lieben schnell ladende Seiten.
- Es ergibt sich ein besseres Nutzer-Erlebnis.
- Die Absprungrate (Bounce Rate) verringert sich.
- Die Conversion Rate erhöht sich (wichtig für Online-Shops).
Einige wichtige statistische Infos über Website-Geschwindigkeit:
-
- 40 % der Besucher verlassen eine Seite, wenn diese zum Laden mehr als 3 Sekunden benötigt.
- Jede Sekunde Verzögerung verringert die Conversion Rate um 7 %.
- 47 % der Nutzer erwarten, dass eine Website in 2 Sekunden oder weniger lädt.
(Quelle)
Teste die Geschwindigkeit deiner Website
Als Erstes solltest du die aktuelle Geschwindigkeit deiner Website ermitteln. Bedenke dabei, dass verschiedene Seiten deiner Domain unterschiedliche Ergebnisse liefern, denn jede Seite enthält unterschiedlichen Content (Bilder, JavaScript-Code etc.).
Teste deshalb deine Startseite und eine Unterseite, z. B. einen Blogbeitrag. Diese Tools werden hierfür oft empfohlen:
Verwende für den Anfang das Tool Pingdom. Dieses werde ich nachfolgend nutzen, um die Ergebnisse der Optimierungen zu erhalten.
Auf dem Test-Blog habe ich populäre Plugins installiert, um eine realistische Umgebung zu schaffen:
- Yoast SEO
- Antispam Bee
- Page Builder by SiteOrigin
- das populäre Theme „Sydney“ aus dem Theme-Verzeichnis von WordPress
Du siehst im Screenshot die aktuelle Ladezeit, die Anzahl der Requests und die Gesamt-Größe der Startseite (mit Pingdom Tool analysiert).
Die Ladezeit von unter 2 Sekunden ist bereits ein super Ergebnis. Auch Google empfiehlt eine solche Ladezeit.
4 wichtige Faktoren bei der Website-Geschwindigkeit:
- nicht optimierte/zu viele Bilder
- langsamer Server
- aufgeblähtes WordPress-Theme
- zu viele Plugins
1. Optimierung der Bilder
So, nun beginnen wir mit der WordPress Optimierung und fangen mit den Bildern an, da diese bei den meisten Blogs ein hohes Potential bergen.
Bilder werden häufig in zu hohen Auflösungen und schlecht komprimiert auf den Blog hochgeladen.
Falls du nicht gerade einen Foto-Blog mit hochauflösenden Bildern betreibst, solltest du diese weitestmöglich verkleinern, ohne dass es zu spürbaren Qualitätsverlusten kommt.
Beträgt die Breite der Blogbeitrags-Seite 700 Pixel, dann sollten auch die Bilder maximal 700 Pixel breit sein.
Der Vorteil liegt darin, dass ein kleineres Bild mit 700 anstatt 1500 Pixeln wesentlich schneller geladen wird.
Wenn du Bilder mit einem Grafik-Programm bearbeitest, dann verkleinere sie auf die entsprechende Breite deines Blogs.
Wie du diese Breite herausfindest, zeige ich dir im Screenshot (anhand des Chrome-Browsers).
Lade eine Blogbeitrags-Seite > klicke mit der rechten Maustaste auf ein Bild > klicke im Menü auf „Untersuchen“
Anschließend wird dir die Breite in Pixel angezeigt.
Im Screenshot siehst du, dass im Test-Blog das Bild eine Originalgröße von 1600 x 1047 Pixeln hat. Der Browser muss diese herunterskalieren, was ebenfalls Zeit kostet.
Wie können wir nun die Bilder nachträglich verkleinern und besser komprimieren?
Dafür gibt es sehr gute Plugins, z. B.:
Mit letzterem erledigst du die Arbeit mit wenigen Mausklicks und erhältst eine gute Komprimierung ohne nennenswerte Qualitätsverluste.
- Installiere Compress JPEG & PNG images.
- Registriere dich mit deiner E-Mail-Adresse, um den API Key zu erhalten (500 Bilder im Monat sind kostenlos).
- Trage den Key ein, falls noch nicht automatisch erfolgt.
- Aktiviere den Punkt „Originalbild“ > „Resize the …“ > Gib die maximale Breite ein.
- Gehe auf das WordPress-Menü „Medien“ > „Massenoptimierung“ > „… starten“.
Hier siehst du ein Vorher-nachher-Bild als Beispiel für eine veränderte Dateigröße:
Du siehst hier deutlich, wie viel Potential in den Bildern steckt. Mit einer Optimierung verkleinerst du enorm die Seitengröße und erhöhst die Website-Geschwindigkeit.
Die extrem schnelle Ladezeit beim Test-Blog mit unter 2 Sekunden liegt auch an dem schnellen Webhoster den ich dafür nutze. Im Abschnitt „Hosting“ gehe ich näher auf die Wahl eines guten Webhosters ein.
Wenn du neue Bilder hochlädst, werden diese durch das Plugin ab sofort automatisch komprimiert und skaliert.
Ich empfehle, dies bereits bei der Erstellung zu tun, und habe gute Erfahrungen gemacht mit dem Online-Komprimierungs-Tool https://tinypng.com.
2. Komprimierung auf dem Server aktivieren
Internet-Browser unterstützen das Laden einer Seite in komprimierter Form. Dabei werden der HTML-Code, CSS- und JavaScript-Dateien als Zip komprimiert und an den Browser übertragen.
Das verringert die Dateigröße enorm, da HTML-/CSS-/JS-Dateien Text enthalten und dieser stark komprimiert werden kann.
Die meisten Webserver laufen mit der Webserver-Software Apache und die Aktivierung erfolgt einfach über die .htaccess-Datei im Hauptverzeichnis deiner WordPress-Installation.
Füge diesen Code am Anfang der .htaccess-Datei ein:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript
Tool zum Testen: varvy.com
Auf meinem Test-Server ist die Komprimierung bereits Server-seitig aktiviert. Es kommt aber häufig vor, dass die Komprimierung erst mit Hilfe der .htaccess-Datei aktiviert werden muss.
Falls dies nicht erfolgreich ist, frage beim Hoster nach, ob das Modul „mod_deflate“ installiert ist. Wenn nicht, solltest du zu einem Hoster wechseln, der auf dem Stand der Zeit ist!
3. Browser-Cache nutzen
Wir bleiben in der .htaccess-Datei und fügen weiteren Code ein für „Expires Header“.
Wenn jemand deine Website besucht, werden vom Browser alle Dateien vom Server heruntergeladen und die Website gerendert.
Mit „Expires Header“ wird dabei für statische Dateien eine Zeit festgelegt, wie lange der Browser diese Dateien im Cache behält.
Wenn der Nutzer die Seite innerhalb dieser Zeit ein zweites Mal besucht, werden diese Dateien aus dem schnellen Cache des Browsers aufgerufen und müssen nicht erneut vom Server heruntergeladen werden.
Das beschleunigt enorm den Seitenaufbau bei wiederkehrenden Besuchern.
Füge folgenden Code zur .htaccess-Datei hinzu:
<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css|woff)$">
ExpiresActive On
ExpiresDefault A2592000
</FilesMatch>
4. Plugins überprüfen
Es gibt tausende Plugins für WordPress. Das heißt aber nicht, dass alle sauber und performant programmiert sind. Meine Blogs wurden schon 2-mal gehackt aufgrund von Sicherheitslücken sehr weit verbreiteter Plugins.
Du solltest daher nur Plugins installieren, welche die aktuelle WordPress-Version unterstützen und als gut bewertet sind. Orientiere dich dabei an den Sterne-Bewertungen der Plugins.
Aber auch unter dieser Prämisse kommen mit den Jahren einige Plugins zusammen. Das bremst natürlich dein System, da jedes Plugin Ressourcen benötigt (Speicher, CPU).
Überlege dir deshalb, welche Funktionen du wirklich brauchst, und entferne Plugins, die nicht mehr benötigt werden.
Vielleicht lässt sich das benötigte Feature auch im Template umsetzen bzw. in der functions.php-Datei.
Wie die WordPress Optimierung ohne Plugins möglich ist, erfährst du auch in diesem Guide. Ich bevorzuge selbst diese Variante und reduziere installierte Plugins auf ein Minimum.
5. HTML, JavaScript & CSS reduzieren
WordPress-Themes und viele Frontend-Plugins fügen deiner Seite CSS-/JS-Code hinzu.
Browser laden maximal 6 Dateien parallel herunter, wenn der Server nur das Protokoll HTTP/1.1 unterstützt. Im Abschnitt „Server“ erläutere ich dir das neue, bessere Protokoll HTTP/2.
Wenn nun dein Blog mehr als 20 CSS- und JS-Dateien laden muss, benötigt das viel Zeit, bis dem Besucher die Seite korrekt angezeigt wird.
Dieser Flaschenhals wird „Head-of-Line Blocking“ genannt.
Du erinnerst dich noch an die anfangs erwähnte hohe Absprungrate, wenn Seiten lange zum Anzeigen des Inhalts benötigen!
Prüfe bitte, ob dein Server HTTP/1.1 oder bereits das neue HTTP/2 unterstützt.
Verwende dazu dieses Tool: https://http2.pro.
HTTP/2 funktioniert nur auf Domains, die ein SSL-Zertifikat installiert haben. Falls du dies noch nicht getan hast, dann wird es höchste Zeit. Browser markieren Seiten ohne SSL als „unsicher“.
Auch Google dürfte das nicht gefallen, obwohl es offiziell kein Ranking-Kriterium ist. Doch wer weiß?
Wenn dein Server nur HTTP/1.1 unterstützt, empfehle ich dir die Installation von Autoptimize.
Autoptimize minimiert und kombiniert die statischen CSS-/JS-Dateien in einer bzw. zwei Dateien. Das beschleunigt enorm den gesamten Ladeprozess.
Es wird von einigen Page-Speed-Tools zwar mit mehr Punkten bewertet, wenn wenig CSS- bzw. JS-Dateien geladen werden. Konzentriere dich aber nicht zu sehr auf den Punkte-Score bzw. Rating-Buchstaben, sondern vielmehr auf die Optimierung der Ladezeit.
Ein Rating von A mit 100 Punkten beim Page-Speed-Check ist machbar und ich zeige dir im Teil 2 noch weitere Tuning-Maßnahmen, um dies zu erreichen.
6. Lazy Load für Bilder
Lazy Load zeigt Bilder auf der Webseite nur im aktuell sichtbaren Bereich an. Bilder, die sich noch außerhalb dieses Bereichs befinden, werden also noch nicht geladen.
Dies reduziert Requests und erhöht die Ladegeschwindigkeit bei vielen Bildern auf der Seite enorm.
Mittlerweile wurde Lazy Loading in die Browser Firefox und Chrome integriert.
Das Einzige was du dafür tun musst, ist das hinzufügen eines Attributs mit entsprechenden Werten.
<!-- Lazy-Load: Bild wird erst bei Bedarf geladen -->
<img src="bild.jpg" loading="lazy" alt="..."/>
<!-- Das Bild wird direkt beim Seitenaufruf geladen -->
<img src="bild.jpg" loading="eager" alt="..."/>
<!-- Browser entscheidet ob Lazy-Load zum Einsatz kommt oder nicht -->
<img src="bild.jpg" loading="auto" alt="..."/>
Bei Bildern die sofort geladen werden sollen – verwende loading=“eager“.
Befinden sich die Bilder in der zweiten Hälfte, dann ist loading=“lazy“ zu empfehlen.
Falls du nicht sicher bist verwende „auto“.
Nach dem selben Prinzip kannst du auch iframes einbinden.
Damit du nicht jedes Bild in deinem Blog anpassen musst, kannst du folgenden Code in die functions.php einfügen:
// ad lazy load to content image function replace_imglazy($text) { if (strpos($text, "loading=")) { return $text;} else { $text = str_replace('
Weniger ambitionierte Anwender können auch eines der oben genannten Plugins nutzen.
Ich empfehle WP Rocket*, ein hervorragendes Cache Plugin was auch Testsieger geworden ist (siehe bei Thema 8).
WP Rocket bietet neben Lazy Load noch weitere geniale Tuning-Features an.
7. Optimiere deine Datenbank
Wenn dein Blog schon ein paar Jährchen auf dem Buckel hat, sammeln sich in der Datenbank unnötige Eintragungen.
Das muss nicht zwingend auf die Website-Geschwindigkeit Einfluss haben, kann es aber.
Hier einige Plugins, die du für die Säuberung deiner Datenbank nutzen kannst:
WP-Sweep gefällt mir am besten und ist einfach zu bedienen. Es löscht Spam-Kommentare, Beitragsrevisionen, Beitragsentwürfe und noch einige andere Dinge.
Eine optimierte Datenbank sorgt auch für einen schnellen WordPress-Adminbereich.
Es gibt dafür unzählige Plugins. Ich habe einige ausprobiert und nutze aktuell UpdraftPlus. Damit lässt sich nicht nur die Datenbank sichern, sondern auch die komplette WordPress-Installation inklusive Plugins und Bilder-Uploads.
Begrenze die Beitragsrevisionen
Wenn wir Beiträge schreiben, ist es oft hilfreich, wenn Zwischenversionen gespeichert werden, falls etwas schiefläuft.
Füge in die Datei wp-config.php im Hauptverzeichnis folgenden Code ein:
define('AUTOSAVE_INTERVAL', 600);
define('WP_POST_REVISIONS', 3);
Du kannst dabei den Wert für Autosave und Revisionen deinen Bedürfnissen anpassen.
8. Cache-Plugin installieren
An der Nutzung von Caching kommst du nicht vorbei, wenn du schnelle Ladezeiten erreichen willst.
Dabei wird eine HTML-Version der abgerufenen Seite erstellt und beim nächsten Aufruf ausgeliefert. Eine Ausführung von PHP-Code und Datenbank-Abfragen, was einige Zeit mehr benötigt, um die Seite an den Browser in HTML-Code auszuliefern, ist nicht mehr notwendig.
Für WordPress gibt es sehr ausgereifte Plugins, die allesamt ähnlich gute Resultate liefern.
Lies dazu meinen Beitrag wo ich 5 der besten WordPress Cache Plugins ausführlich getestet habe.
Ein besonders einfaches Einrichten bietet meines Erachtens das WP-Super-Cache-Plugin, das es schon lange gibt und das von vielen Nutzern empfohlen wird. Es wird von Automattic, den Machern von WordPress, angeboten, und die besitzen natürlich besonders viel Know-how.
Wenn du noch keine Erfahrung mit Caching-Plugins hast, solltest du zunächst dieses Plugin nutzen.
Mehr Funktionen bietet das W3-Total-Cache-Plugin, darunter die Minimierung von CSS- und JS-Dateien.
Aufgrund der vielen Möglichkeiten kann natürlich auch viel falsch eingestellt und die Website komplett „zerschossen“ oder ein anderer Fehler verursacht werden.
Das Plugin sollte daher nur von erfahrenen Nutzern verwendet werden.
Außerdem gibt es noch ein professionelles und leistungsstarkes Plugin, das allerdings kostenpflichtig ist: WP Rocket* ist ein Premium-Plugin und aktuell das beste auf dem Markt.
WP Rocket* punktet nicht nur bei der Geschwindigkeit sondern auch bei der unkomplizierten Einrichtung – einfacher noch als WP Super Cache.
Nachfolgend zeige ich dir die Ergebnisse aller 3 getesteten Plugins auf meinem Test-Blog.
WP Super Cache
W3 Total Cache
WP Rocket
WP Rocket* ist klarer Sieger und das hatte ich auch für ein Premium Plugin erwartet.
Natürlich spielen viele Faktoren eine Rolle für eine schnelle Ladezeit – z.B. ein schlankes Theme und schneller Hoster, wozu ich gleich kommen werde.
Im zweiten Teil dieser Serie gehe ich noch auf weitere Optimierungen ein, damit du die beste Performance aus deinem Blog herausholen kannst.
Hinweis: Wenn du deine Website nach der Konfiguration testest, lösche vorher den Browser-Cache. Dann lade die Seite und warte 30 Sekunden. Lade die Seite anschließend erneut.
Achte darauf, dass du nicht in WordPress eingeloggt bist, bzw. nutze einfach ein Inkognito-Fenster.
9. Nutze ein schlankes Theme
WordPress-Themes mit vielen Funktionen, Slidern, Widgets, Social Icons und vielen anderen visuellen Elementen sehen für den Besucher schön aus. Doch jedes Element erhöht die Seitengröße und damit die Ladedauer.
Wenn du die Seite Themeforest kennst, dann hast du bestimmt schon die tollen Multipurpose-Themes gesehen. Die Anbieter überbieten sich gegenseitig mit immer tolleren Features.
Das meistverkaufte Theme ist Avada*, das ich auf diesem Blog einsetze. Es bietet unzählige Einstellungen und fast unbegrenzte Möglichkeiten, Websites zu gestalten.
Sehr einfach lassen sich auch Landingpages gestalten, in voller Breite und ohne Header.
Kritisiert werden solche Themes jedoch häufig insofern, als die Ladegeschwindigkeit extrem hoch ist.
Mit etwas Zeitaufwand habe ich Avada* optimiert und der Page-Speed kann sich sehen lassen. Es ist also durchaus möglich, auch mit solch aufgeblähten Themes gute Ergebnisse zu erzielen.
Ich rate aber von der Verwendung ab, wenn du nur wenige Funktionen benötigst und einfach nur bloggen willst.
Die Standard-Themes von WordPress sind extrem gut programmiert sowie schnell und einfach anzupassen.
Vor einiger Zeit bin auf der Suche nach schnellen Themes auf zwei Vertreter aufmerksam geworden, da diese häufig empfohlen wurden:
Beide Themes sind auf Schnelligkeit getrimmt, sind extrem klein (Astra hat ca. 150 KB) und bieten trotzdem einige Features an, um das Theme den eigenen Bedürfnissen anzupassen.
Neben einer kostenlosen Version gibt es bei beiden auch eine kostenpflichtige Pro-Version mit weiteren Funktionen. Schau dir am besten beide an und installiere sie auf deinem Blog, falls du gerade einen Theme-Wechsel beabsichtigst.
Wie gesagt ist ein schlankes Theme enorm wichtig, um gute Ladezeiten zu erreichen.
Mit viel Erfahrung und Zeitaufwand kann auch ein Multipurpose-Theme auf Schnelligkeit optimiert werden, wie ich dies bei Avada getan habe. Bedenke aber, ob du tatsächlich all die Features etc. benötigst.
Hier eine Analyse mit dem Tool Pingdom eines Blog-Artikel mit über 1500 Wörtern und vielen Bildern.
10. Wähle einen guten Webhoster
Dieser Punkt wird eigentlich zu Punkt 1. Denn du kannst erst damit beginnen, deinen Blog zu optimieren, wenn du sicher bist, dass du einen schnellen Webhoster hast.
Es gibt hunderte von Anbietern und ich habe, seit ich WordPress nutze (2005), schon einige ausprobiert.
Aktuell bin ich bei Netcup gelandet und wirklich begeistert. Du hast die Leistung dieses Anbieters schon an den guten Ergebnissen gesehen. Netcup ist 2018 bereits zum dritten Mal Sieger bei den Hosting Awards geworden.
Einen guten Hoster zu finden, ist aber nicht so einfach. Vor allem solltest du nicht auf den Preis schauen. Oft ist ein günstiger Anbieter nicht besonders schnell.
Viele Hoster legen tausende Domains auf einen Server, die sich dessen Leistung teilen müssen. Darum heißen die Pakete auch „Shared Webhosting“. Achte also darauf, dass der Webhoster nicht zu viele Domains auf einem Server erfasst.
Das Problem dürfte aber sein, dass entsprechende Informationen kaum veröffentlicht werden.
Sie lassen sich aber trotzdem einfach herausfinden. Wie das geht, erkläre ich im 2 Teil.
Für holgerfreier.de nutze ich einen vServer und habe eine eigene IP-Adresse dafür. vServer sind zwar virtuell und teilen sich mit anderen vServern einen Host-Rechner, sind aber viel leistungsfähiger gegenüber einem Shared Webhosting.
Ich setze statt der Webserver-Software Apache Nginx ein (gesprochen: engine X) mit FastCGI-Cache im RAM – schneller geht es nicht.
Nginx kann 10.000 Anfragen pro Sekunde verarbeiten. Große Seiten setzen daher auf Nginx, z. B. Facebook, Netflix und Amazon (https://t3n.de/news/nginx-vs-apache-814684/).
Um einen vServer bzw. Root-Server selbst zu betreiben, ist viel Erfahrung mit Linux notwendig. Da ich schon viele Jahre Linux als Betriebssystem nutze, administriere ich meine Server selbst. Webserver laufen zu 99,9 % mit Linux.
Falls du weniger als 10.000 Besucher am Tag hast, lohnt sich der Einsatz allerdings nicht. Dann reicht ein Shared-Hosting-Paket völlig aus. Wie du oben gesehen hast, erreicht der Test-Blog, der auf dem kleinsten Shared-Webpaket von Netcup läuft, super Ergebnisse.
Netcup setzt Nginx als Proxy ein, der Apache vorgeschalten wird (bereits als Standard voreingestellt). Hierbei werden statische Inhalte über den schnellen Nginx-Server ausgeliefert und nur dynamische Anfragen an Apache weitergeleitet.
Das bringt einen enormen Geschwindigkeits-Vorteil gegenüber Hostern, die nicht Nginx als Reverse-Proxy einsetzen.
Daher kann ich dir Netcup ganz klar empfehlen, falls du einen Wechsel zu einem schnellen Hoster planst.
Wie gesagt, ist das die Grundvoraussetzung für einen hohen Page-Speed und gute Rankings in den Suchmaschinen.
- PHP 7
- SSL-Zertifikat (häufig ohne Aufpreis, da von „Let’s Encrypt“ kostenlos bereitgestellt)
- mindestens 128 MB RAM (besser 256 MB)
- HTTP/2-Unterstützung
- Einsatz von Nginx als Reverse-Proxy vor Apache
- PHP Execution Time 180 Sekunden oder mehr (einige WP-Plugins benötigen 180 s)
- Opcode-Cache (PHP-Code wird gecached für schnellere Ausführung)
- Redis- oder Memcache Modul
All das bietet Netcup bereits mit dem Einstiegs-Paket „Webhosting 1000“ an.
11. Gravatare deaktivieren
Wenn du das WordPress-Kommentarsystem nutzt, ist jeder Aufruf eines Gravatar-Bildes ein Request. Erhalten deine Beiträge viele Kommentare, entsteht demzufolge eine Menge an Requests und Redirects.
In WordPress lässt sich die Anzeige von Gravataren einfach abstellen unter Einstellungen > Diskussion:
Durch das Anzeigen von Gravataren werden bei deren Aufruf Daten des Besuchers an den Anbieter der Gravatare übertragen. Mit dem Deaktivieren sorgst du daher auch für mehr Datenschutz.
12. Trackbacks und Pingbacks deaktivieren
WordPress verwendet Pingbacks und Trackbacks für die Interaktion mit anderen WordPress-Blogs.
Wenn jemand deinen Blog in seinen Beiträgen erwähnt, benachrichtigt er hierüber automatisch (Pingback) oder manuell (Trackback) deinen Blog. Diese Funktion wird häufig für den Erhalt eines Backlinks verwendet.
Deaktiviere in den Diskussions-Einstellungen die Link-Benachrichtigungen von anderen Blogs (Pingbacks und Trackbacks) für neue Artikel.
13. Entferne Google Web Fonts
Viele Themes ermöglichen es, aus einer Vielzahl an Google Fonts auszuwählen, oder sie nutzen bereits einen bestimmten Google Font.
Das Laden der Fonts kostet natürlich Zeit, und wenn du Google Fonts verwendest, musst du dies auch in deiner Datenschutzerklärung erwähnen.
Überlege dir deshalb, ob du tatsächlich einen Google Font benötigst und ob nicht auch ein „Websafe-Font“ wie z. B. Arial, Helvetica oder Verdana ausreicht. Diese sehen ebenfalls gut aus und jeder kennt sie.
In den Einstellungen des Autoptimize-Plugins lässt sich das Laden von Google Fonts verhindern.
Premium-Themes bieten unter „Typografie“ häufig eine Auswahl an, welche Schriftarten genutzt werden sollen.
Ich selbst nutze hier „Verdana“, dieser Font gefällt mir besser als Arial.
An dieser Stelle möchte ich dir noch die Ergebnisse einer Analyse von KeyCDN zeigen, die die Ladegeschwindigkeit von Standard- und Google Fonts getestet haben.
Es ist also eine Überlegung wert, auf Google Fonts zu verzichten.
14. Einsatz eines Content Delivery Networks (CDN) prüfen
Zu diesem Punkt gibt es verschiedene Meinungen und es hängt immer vom Einzelfall ab, ob sich der Einsatz lohnt.
Wenn du auf einem schnellen Server einen kleinen Blog betreibst mit Beiträgen, die nur wenige, gut optimierte Bilder bzw. statische Elemente enthalten, dann benötigst du meiner Meinung nach kein CDN.
Erst wenn deine Website mehr als 10.000 Besucher am Tag hat, viele statische Dateien geladen werden und die Besucher zudem weltweit verteilt sind, dann empfehle ich ein CDN.
Dazu, wie das CDN die Zugriffszeit verlangsamen kann, habe ich einen meiner Blogs mit dem CDN-Anbieter MaxCDN getestet.
Als Caching-Plugin verwendete ich das einfach zu konfigurierende WP Super Cache.
In folgender Auswertung siehst du die Ladezeit mit und ohne CDN.
Mit CDN
Ohne CDN
Warum bewirkt nun der Einsatz eines CDN in diesem Fall keinen Geschwindigkeitszuwachs, sondern sogar das Gegenteil?
Ein CDN-Anbieter betreibt rund um die Welt mehrerer Datencenter. Ruft nun als Beispiel ein Nutzer aus Australien deine Website auf, werden statische Dateien vom nächstgelegenen Datencenter an den Nutzer ausgeliefert.
Die Auflösung des DNS-Namens (z. B. deinedomain123.stackpath.com), um auf den Server des CDN-Anbieters zuzugreifen und die entsprechenden Dateien anzufordern, benötigt Zeit.
Beim Aufruf ohne Einsatz eines CDN entfällt dieser Schritt und das Laden statischer Inhalte erfolgt direkt von deinem Hoster.
Wenn du also bereits einen schnellen Hoster nutzt, so wie ich Netcup, der sogar statische Dateien über Nginx als Reserve-Proxy ausliefert, dann lohnt sich der Einsatz eines CDN erst bei vielen Besuchern (international) und einer hohen Zahl statischer Dateien.
15. WordPress-Header entschlacken
Im Header-Bereich von WordPress befinden sich mitunter Eintragungen, die nicht benötigt werden oder sogar ein Sicherheitsrisiko darstellen können.
Da WordPress oft ein Ziel von Hackern ist, müssen wir bspw. nicht extra darauf hinweisen, dass unsere Seiten mit WordPress betrieben werden.
Meta-Element Generator entfernen
Füge dazu einfach in der functions.php-Datei deines Themes am Ende folgenden Eintrag hinzu:
remove_action('wp_head', 'wp_generator');
WP-JSON-Schnittstelle entfernen
Ab der Version 4.4. steht in WordPress eine API-Schnittstelle zur Verfügung. Falls du keine externen Tools nutzt, die Daten deines Blogs auslesen, dann deaktiviere diese Funktion:
remove_action( 'wp_head','rest_output_link_wp_head');
Um die Schnittstelle komplett zu deaktivieren, füge noch diesen Code ein:
add_filter('json_enabled', '__return_false');
add_filter('json_jsonp_enabled', '__return_false');
DNS Prefetch entfernen
Diese Methode wird genutzt, um die Zugriffszeit zu optimieren, und ist recht sinnvoll.
Falls du nicht die Ressourcen von wordpress.org nutzt und gerade überlegst, was das sein sollte, dann kannst du getrost folgenden Code entfernen:
mit diesem Eintrag:
remove_action('wp_head', 'wp_resource_hints', 2);
RSD-Verweis und WLW-Manifest entfernen
Falls du mit keinem externen Tool auf deinen Blog zugreifst, wie z. B. Windows Live Writer, dann können auch die folgenden Einträge ohne Bedenken entfernt werden:
mit diesem Code:
remove_action('wp_head', 'rsd_link');
remove_action( 'wp_head', 'wlwmanifest_link' );
Emoticons deaktivieren
Nutzt du keine grafischen Emojis in deinem Blog, dann kannst du durch Entfernen dieser Funktion zusätzlichen CSS-/JS-Code einsparen und damit auch Requests:
remove_action('wp_head', 'print_emoji_detection_script', 7); remove_action('wp_print_styles', 'print_emoji_styles');
Wenn du lieber ein Plugin nutzen möchtest, dann kannst du WP Rocket* dafür verwenden. Das Cache Plugin bietet alle Optionen in diesem Kapitel ebenfalls an.
16. CSS- & JavaScript-Code optimieren
Jetzt steigen wir tiefer in die Optimierung deines WordPress-Themes ein.
Viele Themes laden umfangreiche CSS- & JS-Dateien, denn die meisten Entwickler achten auf einen ansprechend gestalteten Code mit Kommentaren zu einzelnen Bereichen, gesetzten Leerzeichen und eingefügten Zeilenumbrüchen.
Das erhöht die Dateigröße und somit die Ladezeit, was Punkte beim Google PageSpeed kostet.
Normaler CSS-Code:
body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}
Und minimierter Code:
body{margin:20px;padding:20px;color:#333;background:#f7f7f7}h1{font-size:32px;margin-bottom:10px}
Wenn du einen Google PageSpeed Score von 100 erreichen möchtest, dann erzielst du mit der Minimierung eine Erhöhung deines Scores.
Hier ein Beispiel für die Größe einer CSS-Datei des populären Themes „Sahifa“ von Themeforest vor und nach der Minimierung.
Du siehst eine deutliche Einsparung von einigen Kilobytes, und die wird mit mehr Punkten belohnt.
Das Tool Google PageSpeed Insights bietet bereits die optimierten Dateien – CSS & JS – zum Download an.
Du brauchst diese nur noch in die entsprechenden Theme-Ordner hochzuladen.
Oder du nutzt einen der vielen Online-Optimierer wie z. B.:
- jscompress.com – für JavaScript
- htmlcompressor.com – für CSS
Alternativ bietet diese Minimierung auch das Plugin Autoptimize an. Du brauchst dann bei einem Theme-Update die neuen CSS- & JS-Dateien nicht mehr manuell zu minimieren.
Natürlich gibt es auch viele Theme-Entwickler, die bereits minimierte CSS- & JS-Dateien einbinden – wie das beim „Avada“-Theme der Fall ist.
Das Premium-Caching-Plugin WP Rocket* unterstützt die Minimierung ebenfalls.
17. JavaScript- und CSS-Ressourcen prüfen, die das Rendering blockieren
JavaScript
Das Tool PageSpeed Insights unterbreitet viele Optimierungsvorschläge. Bei dem Vorschlag, den „Above-the-Fold“-Bereich zu optimieren, geben jedoch viele Websitebetreiber auf.
Dies ist einer der schwierigsten Parts, Googles Vorschläge umzusetzen.
Ich versuche hier, dir bestmöglich zu erklären, wie du die Optimierung umsetzt. Das Prinzip ist einfach erklärt:
Es gibt zwei Möglichkeiten, JavaScript-Code (z. B. jQuery) zu laden: im Kopfbereich (Header) und im Fußbereich (Footer) der Webseite.
Der Browser kann die Webseite erst anzeigen, wenn alle JavaScript-Ressourcen im Header geladen sind. Das Rendering ist bis dahin blockiert.
Nachdem die HTML-Seite angezeigt wird, werden die Ressourcen im Footer geladen. Insofern würde es sich anbieten, die JS-Ressourcen ausschließlich im Footer zu platzieren.
Je nach verwendetem Theme und der Implementierung von JavaScript können aber auch negative Effekte bei der Darstellung der Seite entstehen, wenn wir die Dateien in den Footer verschieben.
Es gibt also keine Allzwecklösung, da etliche Stolperfallen existieren.
Ich möchte dir dennoch eine Möglichkeit zeigen, wie du die Optimierung mit dem bereits vorgestellten Plugin Autoptimize umsetzen kannst.
Du hast bereits gelernt, wie du CSS- bzw. JS-Dateien zu einer Datei zusammenfügst. Mit wenigen Mausklicks lässt sich sowohl die Datei als auch inline JavaScript im Footer der Webseite laden:
Beim „Sydney“-Theme sowie den von mir genutzten Themes „Avada*“ und „Sahifa*“ zeigen sich glücklicherweise keine Nebeneffekte.
Optimierung der CSS-Darstellung „Above the Fold“
Beim CSS-Code verhält es sich ähnlich. Der Browser benötigt nach dem Laden der HTML-Seite noch den CSS-Code für die Darstellung.
Häufig wird dabei aber auch CSS-Code geladen, der für die Darstellung (erstmal) nicht notwendig ist (z. B. nicht sichtbare Inhalte und CSS-Code von Plugins).
Google schlägt uns nun vor, das „Above-the-Fold“-CSS im HTML inline einzufügen, damit die Seite schnell korrekt angezeigt werden kann, ohne auf den übrigen CSS-Code warten zu müssen.
Der „Above-the-Fold“-Bereich kann natürlich von Seite zu Seite verschieden sein, je nachdem welche Funktionen, Effekte etc. angezeigt werden. Daher müsste jede Webseite separat optimiert werden.
Doch wie finden wir nun heraus, welcher CSS-Code zu „Above the Fold“ gehört? Darauf gibt es keine pauschale Antwort, deshalb zeige ich dir, wie du vorgehen kannst:
- Das Tool „Critical Path CSS Generator“ extrahiert aus der Seite sehr zuverlässig den „Above-the-Fold“-CSS-Code. Dieser Code wird aber nicht die Qualität erreichen, die ein Webentwickler liefern könnte.
- Falls Google immer noch Beanstandungen hat, dann hilft nur noch ein HTML-/CSS-Experte und Ausprobieren.
Je nach benutztem Theme kann es dann sehr aufwendig und kaum lohnenswert sein, an dieser Stelle weiterzumachen. Fokussiere dich bitte nicht zu sehr auf das Erreichen von 100 Punkten und investiere nicht zu viel Zeit. Ein Ergebnis von 90 Punkten ist schon ein Top-Wert.
„Above-the-Fold“-CSS-Code zur Website hinzufügen
Mit dem Autoptimize-Plugin können wir einfach den „Above-the-Fold“-CSS-Code hinzufügen:
So gehst du vor:
- Lass dir den Code mit dem Tool „Critical Path CSS Generator“ generieren
- Setze einen Haken in die entsprechenden Boxen wie im Screenshot
- Füge den Code ein
Es dürften (fast) keine Darstellungsprobleme auftreten. Falls doch, entferne den Haken bei „Also aggregate inline CSS?“.
Eine Vorhersage auftretender Probleme ist unmöglich. Hier müsste dann eine intensive Überprüfung erfolgen.
Bei WP Rocket* wird die Erstellung und das Einfügen des „Above-the-Fold“-CSS-Codes einfach mit einem Klick auf einen Button durchgeführt. Einfacher geht es nicht!
18. Antwortzeit des Servers reduzieren (Time to First Byte)
Wenn dein WordPress-Theme bereits stark optimiert ist, du wenige Plugins einsetzt und einen schnellen Hoster nutzt, dann hast du vielleicht schon einen Top-Score erreicht. Herzlichen Glückwunsch!
Bei den meisten Blogs ist aber der Hoster zu langsam. Google empfiehlt eine Antwortzeit von höchstens 200 Millisekunden für das Reagieren des Servers bei einer Anfrage bzw. für das Senden der ersten Daten.
Hinweis: Bitte nicht verwechseln mit der Gesamtdauer, die für die Anzeige der Seite benötigt wird!
Liegt man unter diesem Wert, wird das von Google mit Punkten belohnt. Im Test mit Einsatz von WP Rocket lag die Zeit bei schnellen 109 Millisekunden.
Es gibt verschiedene Faktoren, welche die Antwortzeit des Servers verzögern. Durch Einsatz von Caching kann diese Zeit bei den meisten WordPress-Blogs stark verringert werden. Du solltest daher wie bereits beschrieben ein Caching-Plugin installieren.
So, nun teste ich, ob das für den perfekten PageSpeed-Score reicht.
Perfekt, 100 Punkte!
Mit dem Astra Theme* wie im Teil 1 vorgestellt, erzielte ich mit WP Rocket* eine noch schnellere Ladezeit:
Fazit:
Du hast gesehen wie mit nur wenig Änderungen die Geschwindigkeit bei einem WordPress-Blog enorm gesteigert werden kann. Es lohnt sich diese Zeit zu investieren um bessere Rankings und Nutzungserlebnis zu erzielen.
Wer sich nicht traut tiefergehende Änderungen am System vorzunehmen, den empfehle ich WP Rocket*.
Die Konfiguration ist sehr leicht und es können damit fast alle Optimierungen umgesetzt werden, wie in den beiden Teilen vorgestellt wurden.
Hast du selbst noch einen Speed-Tipp? Schreibe doch deine Optimierungs-Ergebnisse als Kommentar oder stelle eine Frage!
Und wieder ein schlecht recherchierter Artikel zum Thema PageSpeed. Fängt schon damit an dass der Autor nicht mitbekommen hat dass man in den Google Page Speed Tools schon seit Monaten auch gemessene Zeiten einsehen kann. Ganz davon zu schweigen dass Google gleich mehrere andere Tools anbietet die Ladezeit zu prüfen.
Und dafür schaltet man Werbung auf Facebook?
Hallo Stefan,
deine Aussage ist nicht ganz korrekt. Es wäre auch schön gewesen, du hättest die anderen Tools benannt.
Ich habe diese Google Tools – außer PageSpeed Insights – bewusst nicht unter dem Punkt „Teste die Geschwindigkeit deiner Website“ aufgeführt.
Das Tool PageSpeed Insights zeigt nur die Geschwindigkeit bei Seiten mit hohem Traffic an.**UPDATE** Seit Januar 2019 wird auch die Geschwindigkeit gemessen.Warum das so ist und es nicht empfohlen wird zu Geschwindigkeits-Messung wird hier beschrieben:
Hier mal Analysen der Seite vom Marketing Experten Björn Tantau und das Magazin t3n:
(Wobei die Seite von Björn mit Sicherheit auch hohe monatliche Besucherzahlen aufweist)
Ich vermute du meinst auch noch das mobile Speed Test Tool von Google.
Dieses testet die Geschwindigkeit einer mobilen Seite mit einer simulierten 3G Verbindung und liefert dementsprechend eine deutlich höhere Ladezeit.
Ich würde das Tool nicht verwenden für die Durchführung der Optimierungen unter Punkt 1-10.
Nach Abschluss aller Optimierungen kann es genutzt werden, um festzustellen wo die Seite mobil „steht“.
Weiterhin gibt es von Google noch „Lighthouse“ was zu den Chrome DevTools gehört und mehr was für erfahrene Nutzer ist.
Es kann im Chrome Browser über die Console aufgerufen werden und liefert tiefgreifende Analysen.
Aus o.g. Gründen empfehle ich das Tool „Pingdom“ WordPress Nutzern, die erst mit Optimierungen anfangen.
Pingdom liefert hier schnell und übersichtlich Ergebnisse von Seitengröße, Geschwindigkeit und ein Wasserfall Diagramm um festzustellen, welche Elemente auf der Seite lange zum laden benötigen.
Das Thema Website Optimierung ist sehr komplex. Es ist unmöglich das Thema abschließend zu behandeln. Es gibt darüber schon große Bücher z.B. hier >
Im zweiten Teil gehe ich aber noch tiefer in das WordPress System und zeige viele „Tweaks“.
Facebook ist aktuell immer noch die beste Traffic Quelle um schnell hochwertigen und günstigen Traffic zu erzielen.
Nicht nur meine Meinung 🙂
Danke für die tolle Anleitung. Bin gerade dabei die Optimierungen umzusetzen. Auch Teil 2 werde ich mir noch anschauen.
Hallo Herr Freier,
Guter Artikel, wirklich interessant. Ich selber nutze HTTP/2 und habe über Plugins Java Script und css reduziert. Bei Goggle Page Speed wird mir jetzt eine viel bessere Wertung angezeigt.
Aber in der Praxis läd meine Webseite überhaupt nicht schneller 🙁
Ich glaube Pingdom Tools, ist die bessere Wahl.
Hallo,
um wie viele KB ist die Seite kleiner geworden? Welches Plugin wurde für die Optimierung verwendet?
Wenn das nur ca. 50 – 100KB sind merkt man beim Besuch der Seite im Browser keinen Unterschied.
Die Verkleinerung von JS/CSS ist nur ein Teil von vielen Optimierungen.
Mehr dazu in meinem Guide…
Danke für den Artikel, der ist sehr gut recherchiert, auch wenn einige Kommentatoren offensichtlich anderer Meinung sind. Ich würde bei den Bildern noch das Format WebP erwähnen und natürlich SVG. WebP wird noch nicht von allen Browsern unterstützt, aber es gibt das Plugin WebP-Express, dass das Problem behebt und zuerst prüft, welcher Browser die Seite aufruft und dann das entsprechende Bild („normal“ oder WebP) lädt. Und natürlich für Grafiken SVG.
, Das Hauptproblem beim Thema Pagespeed ist (meiner Meinung nach) die „Philosophie“ der meisten Theme- und Pluginanbieter, die behaupten, dass man ohne irgendwelchen Kenntnissen in Sekundenschnelle unglaublich tolle WordPressseiten erstellen kann.
Abgesehen davon, dass man – wenn man eine Webseite macht – auch eine Idee von Grafikdesign haben sollte, verleiten aber solche Aussagen natürlich dazu, dass man Riesenthemes nutzt und dann alle Probleme mit entsprechenden Riesenplugins „löst“.
Angeblich alles kein Problem. 😉 Ja OK, man kann sich auf diese Art eine Seite zusammenklicken, aber… Die Ladezeit ist dann natürlich die erste Sache, die extrem problematisch ist.
Hallo Raphael,
danke für deinen Kommentar.
Mit WebP stimme ich dir voll zu. Werde den Guide demnächst ergänzen.
Durch Verwendung von Bildern im WebP Format lässt sich die Seitengröße erheblich verkleinern, wenn viele Bilder auf der Seite verwendet werden.
Selbst nutze ich das Plugin WebP Express
Auf dem Server muss aber eins der PHP Module imagic cwebp, vips, gd aktiviert sein. Bei Shared Hostern ist das selten der Fall.
Ich nutze einen vServer und kann entsprechend alles installieren.
Eine Alternative ist das EWWW Image Optimizer Plugin in der Paid Version https://de.wordpress.org/plugins/ewww-image-optimizer/.
Der Einsatz von Plugins sollte auf ein Minimum reduziert werden, da stimme ich dir voll zu.
Weniger ist mehr – auch wenn es um irgendwelche Fancy Features geht die kein Seitenbesucher sehen will.
Er hat nur wenig Zeit und will schnell die Informationen die er sucht.
Ich nutze das schnelle Astra Theme und für Landingpages zu bauen den Pagebuilder Elementor. Vorteil: JS/CSS Code wird nur für Seiten geladen die mit dem Builder gebaut wurden.
Blogbeiträge bleiben schlank und laden daher extrem schnell.
siehe auch meinen Test der 5 besten WordPress Cache Plugins: https://holgerfreier.de/wordpress-cache-plugins/
Hallo Holger,
schöner Guide, fasst das ganze gut zusammen und trotzdem sehr ausführlich. Vielleicht könntest du mal einen Guide zu CDNs machen, da diese Funktion gerade für die Ladezeit von Blogs und Onlineshops relevant ist. Nicht jedes Caching Tool bietet einen (geeigneten) Reiter dafür.
Hallo,
danke für die Ladezeitenoptimierungstipps! Die sind wirklich praktisch.
Liebe Grüße, Felix von der AdPoint GmbH
Kann auch „TiniPNG“ empfehlen – entweder das Plugin oder die Internetseite selbst – um Bilder fürs Web zu komprimieren.
Hallo Patrick,
nutze ich auch wenn kein Plugin installiert ist.
Natürlich kann man auch das Plugin installieren und beim Upload erfolgt sofort die Komprimierung.
Durch Google bin ich hier auf diesen Blogbeitrag aufmerksam geworden. Ich möchte mich gerne für die tollen und nützlichen Tipps bedanken. Selbst kenne ich mich auch bisschen mit WordPress aus und versuche immer selber neue Dinge an meiner Seite zu ändern.
Letztens habe ich es gelernt, wie ich neue WordPress Videos leicht einbinden kann, jetzt möchte ich mehr dazu erfahren, wie man eine Seite schneller machen kann.
Ich nutze dafür auch W3Total Cache Plugin und kann sagen, dass damit die Seite bisschen schneller gemacht wird.
Was haltest du eigentlich von dem Plugin?
Hallo David
W3Total Cache ist mehr was für ambinionierte Anwender die keine Angst haben den Blog auch mal komplett zu zerschiessen.
Im Beitrag „5 besten WordPress Cache Plugins“ gehe ich näher darauf ein.
Statistiken von Google zeigen, dass 50% der Website-Besucher erwarten, dass eine mobile Website innerhalb von 2 Sekunden geladen wird. 53% der Benutzer verlassen wahrscheinlich die Blog-Seite, wenn das Laden länger als 3 Sekunden dauert.
Laut einer Studie von Amazon 1 stieg der Umsatz pro 100 ms verbesserter Seitenladezeiten um mindestens 1%
Dies bedeutet, dass die Seitengeschwindigkeit einen direkten Einfluss auf die Benutzererfahrung und Ihre Conversion-Rate hat.
Die Tipps, die Sie erwähnt haben, sind wichtig zu berücksichtigen. Vielen Dank für das Teilen. Ich habe die wenigen auf meiner Website implementiert. Ich hoffe, ich werde ein besseres Ergebnis in Form eines besseren SEO-Ranges erzielen.
Danke für den tollen Guide.
Wir haben einiges umgesetzt und konnten unseren Pagespeed signifikant steigern.
WP Rocket lohnt sich in jedem Fall.
Hallo. Erstmal danke für den wirklich informativen Guide ! Zum Punkt mit den Hostern muss ich aber sagen, das die v-und Rootserver bei Netcup wirklich flott laufen, aber das Webhosting nicht wirklich zu empfehlen ist. Ich persönlich hatte dort ellenlange Ladezeiten, die sich auch nicht beseitigen ließen und erst mit einem Umzug zu einem anderen Hoster behoben waren. Wenn man in das Kundenforum von Netcup schaut, haben da auch andere ihre Probleme.
Hallo David,
das freut mich.
Ich habe diese Erfahrung in den vielen Jahren noch nicht gemacht.
Seit dem Netcup bei den Webhosting-Paketen Nginx als Reverse Proxy mit Fastcgi Cache anbietet, sind die TTFB Zeiten rasend schnell bei mir.
Nutze auch Rootserver von Netcup.
ja, ich habe jetzt auf Nginx gewechselt und bin sehr zufrieden. Installation war denkbar einfach aber die Einrichtung…. na ja 🙂
Vielen dank für deine Mühe.
Grüße
Dirk
Hallo Dirk,
freut mich das du Nginx am laufen hast.
Hallo,
Danke für den Artikel, er ist eine große Hilfe.
Derzeit mache ich mich schlau wie vernünftig es ist, WP Rocket mit Autoptimize in Kombination zu nutzen.
Bis zum Frühling ist es nicht mehr lange und dann wird das Update von Google kommen.
Beste Grüße
sassie
Hallo Sassie,
WP Rocket enthält auch viele Funktionen von Autoptimize.
– Zusammenfassung von JS/CSS
– Minification
– „Above the Fold CSS“ Optimierung uvm.
Eine ausführliche Anleitung zur Konfiguration von WP Rocket findest du hier > holgerfreier.de/wp-rocket-anleitung
Die Installation von Autoptimize ist daher nicht notwendig bzw. könneten sich gegenseitig beeinflussen.
Hallo Holger,
der Artikel ist wirklich informativ und geht deutlich mehr in die Tiefe als andere Artikel die ich bislang gefunden habe. Eigentlich bin ich durch Zufall hier gelandet, da ich eher auf der Suche nach Infos zu den Google Web Vitals bzw. dem „Largest Contentful Paint“. Vielleicht könnte man den obigen Artikel dahingehend noch etwas erweitern! Im Endeffekt ist es trotzdem echt mühsam ein halbwegs schnelles WordPress-Theme zu finden, da ja fast alle Theme-Anbieter behaupten, sie hätten ein superoptimiertes „Fast Loading Theme“. Nach der Installation ist man dann meistens klüger und sieht, dass es entweder hoffnungslos ist mit diesem Theme weiterzuarbeiten oder man fängt an mit „Autoptimize“ und zahlreichen .htaccess Spielereien. In den „grünen“ Pagespeed-Bereich bei mobilen Seiten habe ich es allerdings trotzdem bislang eher selten geschafft…
Viele Grüße, Marc
Hallo Marc,
ein schnelles Theme zu finden ist wahrlich nicht einfach.
Viele laden eine Menge an Codes was das Theme langsam macht.
Ich bin sehr zufrieden mit dem Astra Theme, welches ich hier einsetze.
Zum Thema Web Vitals und „Large Contenful Paint“ habe ich vor paar Tagen einen Artikel veröffentlicht.
https://holgerfreier.de/google-pagespeed-insights/
Gruß
Holger
Vielen lieben Dank für die großartige Auflistung der Punkte, wie man sie behebt. Bei mir scheitert es bei der Optimierung schon am Webdesign. Ich habe viele Bilder und nutze Baukastensysteme, die die Inhalte dynamisch generieren. Von daher muss man auf den einen oder anderen Optimierungspunkt wohl oder übel verzichten. Aber ich nehme mal einige Punkte von dem Beitrag in Angriff.
Hallo Holger,
Hut ab vor deiner Liste hier. So detailliert hat es bisher noch niemand serviert. Vieles war mir als klar – aber genauso viel neues konnte ich mir abschauen.
Werde mir die Punkt zu Herzen nehmen und so schnell wie möglich in Umsetzung gehen.
Tausend Dank für den Mehrwert.
Liebe Grüße aus München, Timo
Hallo Holger,
wow! Eine umfangreiche Liste! Habe mir die URL gerne gespeichert. Hut ab!
Gruß aus Rosenheim, Marco
Sehr gut geschrieben Artikel zu WordPress Ladezeiten es ist ein sehr komplexes Thema. Danke
Hallo Holger,
wohl eine der umfangreichsten Aufstellungen zum Thema PageSpeed in Sachen WordPress. Vieles davon ist auch ohne Probleme sehr gut auf andere CMS (Joomla, Drupal, Typo3, etc.) übertragbar. Und wird einem auch mal wieder ins Gedächtnis gerufen. Vielen Dank für deine Arbeit!
Gruß Torsten
Beste Liste bisher.. musste etwas suchen bis ich sie wieder gefunden habe. Wir bauen mehrere Blogs und deine Tipps sind im Blue Print.
Danke Katharina
Hallo Holger,
danke für die diese umfassende Anleitung! Da waren viele neue Dinge für mich dabei. Ich habe dieses Jahr das Plugin/Tool Nitropack für mich entdeckt, worüber es sehr einfach ist Seiten zu optimieren und die Werte definitiv deutlich besser sind als mit herkömmlichen Plugins. Hast du damit schon Erfahrung? Wenn ja, wie ist deine Meinung dazu?
LG
Noah
Hallo Holger,
danke für den ausführlichen Beitrag, ich bin immer wieder auf der Suche nach Möglichkeiten zur Optimierung der Geschwindigkeit und Größe. Hierbei habe ich schon zahlreiche Anpassungen vorgenommen. Am meisten hat hierbei WP-Rocket geholfen, mit Abstand eines der besten Tools für WordPress. Zudem kann ich nur empfehlen wirklich alle nicht benötigen Plugins zu deaktivieren. Wir nutzen z.B. ein fertiges WP Theme wo ein Haufen Plugins installiert werden, welche wir jedoch für den gewöhnlichen Betrieb nicht benötigen: z.B. 2 verschiedene Slider und ein Kontaktformular Plugin.
Das mit dem DNS Prefetch entfernen habe ich noch nicht gekannt und probiere das gleich mal aus.
Viele Grüße
Martin
Wow, danke für den Beitrag. Nehme mir vor allem den CDN Part mit. Dachte das da mehr zu holen ist.
Danke und LG aus Wien,
Thomas
Hi Holger,
wow, was für eine umfassende Liste. Tausend Dank dafür! Konnte einiges Neues lernen.
Liebe Grüße
Dominik
Hallo Holger,
danke für diese großartige Liste und vielen Empfehlungen! Nutzt du eigentlich zusätzlich zu einem Plugin wie WP Rocket, was vor allem am Cache arbeitet noch zusätzlich ein Plugin wie WP Smush für die Bilder oder sind zwei Plugins dann kontraproduktiv?
LG
Hallo Thomas
ich lade bereits optimierte Bilder hoch und nutzte kein WP Smush o.ä.
Wie im Beitrag beschrieben sollte Bilder auf die Breite der Blogseite skaliert werden. Wer einen Fotoblog betreibt, der benötigt natürlich hochauflösende Bilder.
Hallo Holger,
danke für deine wirklich sehr ausführlich Anleitung zur Optimierung von Ladezeiten mit WordPress. Hat mir sehr geholfen.
Liebe Grüße Max
Hallo Holger,
sehr gut recherchierter Beitrag!
WP Rocket ist in der Tat ein tolles Plugin!
Der einzige Nachteil ist, dass sein Preload-Bot auf einigen Shared-Hosting-Servern zu einer Überlastung der CPU führen kann.
Aber das lässt sich immer deaktivieren.
Ansonsten ist alles bei WP Rocket erstklassig!
Grüße aus München,
Timo
Hallo Holger,
hab mir deine Liste in den Lesezeichen gespeichert und werde mit Sicherheit darauf zurückgreifen. Gerade heutzutage, wo kaum jemand Geduld hat, macht es Sinn seine Website auf kürzere Ladezeiten zu optimieren.
Hallo Holger,
zu Beginn hat mich dieses Thema verrückt werden lassen. Doch da musste ich durch. Konnte einige Seiten meiner Kunden erheblich schneller machen, was sich dann positiv aufs Ranking ausgelöst hat.
Danke für die tolle Anleitung.
Auch wenn wir für unsere Klienten keine direkte Optimierung der Webseiten machen, hilft uns deine umfassende Anleitung sehr dabei, unsere Seite nochmal zu verbessern. Danke für deine Arbeit.
Vielen Dank für den ausführlichen Artikel, Holger.
Als SEO Freelancer habe früher auch immer diverse Cache-Plugins verwendet, um die Geschwindigkeit der Seiten meiner Kunden zu optimieren. Leider gabs mit den Plugins auch immer wieder Probleme – gerade mit dem auch hier erwähnten Nitro-Pack. Mit Freude sehe ich aber auch, dass immer mehr Theme-Anbieter sich Mühe geben, „out of the box“ ihre Themes massiv zu beschleunigen. Lobend zu erwähnen ist hier Avada. Hier kann ich inzwischen quasi alles ausknipsen, was ich nicht an Features benötige. Hoffe, dieser Trend setzt sich fort.
Sonnige Grüße aus München!
Nikolas
Sehr interessanter Artikel und vor allem sehr hilfreich! Für SEO Einsteiger und Neulinge erleichtert der Beitrag und auch das Tool das Optimierten der Ladegeschwindigkeit. Danke für die vielen Tipps!
Macht die Ladegeschwindigkeit einen so großen Rankingfaktor aus? Ich sehe auch immer wieder Websites, welche wirklich langsam laden und dennoch auf Seite 1 ranken… wie viel % würdet ihr schätzen?
Lässt sich schwer sagen. Die Geschwindigkeit hat auch einen Einfluss auf die Nutzererfahrung. Dauert das Laden zu lange springen diese schneller ab, d.h. die Conversion Rate sinkt. Vor allem Onlineshop Betreiber sollten auf schnelles Laden optimieren.
Wichtig sind natürlich wertvolle Inhalte. Es nützt nichts wenn die Seite schnell lädt, der Content aber schlecht ist und der Nutzer zu Goole zurück kehrt. Google merkt das und stuft die Seite bzw. das Suchergebnis herab.
Hallo Holger, vielen Dank für diesen echt guten Beitrag.
Zum Punkt meines Vorredners:
Ich bin da bei dir und glaube, dass die Geschwindigkeit vor allem dann relevant wird, wenn sich konkurrierende Webseiten auf ähnlichem, ich nenne es mal „SEO-Niveau“ befinden.
Hallo Holger,
ich bin wirklich beeindruckt von deiner Liste – so präzise und ausführlich aufbereitet habe ich die Informationen noch nirgends gesehen. Einiges davon war mir schon bekannt, aber ich habe auch eine Menge Neues entdeckt, das ich sicherlich anwenden werde. Ich nehme mir deine Punkte zu Herzen und werde sie so schnell wie möglich umsetzen. Vielen Dank für den enormen Mehrwert, den du bietest.
Liebe Grüße aus München, Max
Lieber Holger,
ich möchte noch gerne erwähnen, dass Punkt 12 völlig neu für mich war!
Ich benutze immer eine Liste von Punkten um bei einer Website Pagespeed Optimierung immer alles abzuhacken und nichts zu vergessen und die Pingbacks und Trackbacks zu deaktivieren wurde bei keinen anderen Listen angesprochen. Nun verwende ich immer deine Liste. 🙂
Danke!
Hallo Holger,
danke für diese fantastische Ressource! Du machst die Welt des WordPress Pagespeeds wirklich zugänglich und hilfst uns, unsere Websites auf das nächste Level zu bringen. Keep up the great work!
Liebe Grüße,
Nora Pergola
Servus Holger,
leider bin ich erst jetzt auf diese tolle Anleitung gestoßen. Ich wünschte, ich hätte sie schon früher gesehen. Ausgezeichnet geschrieben und super Tipps! Vielen lieben Dank dafür! Chapeau!
LG,
Melvin von Kapwa Marketing
Ich möchte mit Euch einen kleinen Trick mit dem „Tinypng“ teilen. Bilder können eine kleinere Größe erreichen, wenn sie nicht nur einmal, sondern mehrfach mit dem Tool komprimiert werden. Und um noch bessere Ergebnisse zu erzielen: Dieses Bild kann in das „webp“-Format umgewandelt werden. Dieser Prozess dauert zwar, lohnt sich aber auf jeden Fall bei wichtigen Bildern wie z.B. Logos.
Dein Guide zur WordPress Pagespeed Optimierung ist wirklich umfassend und gut strukturiert. Was mir besonders gefällt, ist die praktische Anleitung, die du Schritt für Schritt bietest, und dass du die Ergebnisse an einem Test-Blog demonstrierst. Das hilft ungemein, die Auswirkungen der einzelnen Optimierungen zu verstehen. Für Webdesigner wie mich ist es besonders wichtig, dass Websites nicht nur gut aussehen, sondern auch schnell laden. Deine Tipps zur Bildoptimierung, Nutzung des Browser-Caches und Auswahl eines guten Webhosters sind Gold wert. Besonders interessant finde ich den Hinweis auf Lazy Load für Bilder, um die Ladezeiten weiter zu verbessern. Danke für diesen hilfreichen Beitrag!
Lieber Holger,
vielen vielen vielen Dank für diesen tollen Artikel! Ich war gerade auf der Suche, da ein Kunde ein Problem mit seiner Ladezeit hatte, konnte Ihn auf diesen Artikel verweisen und gemeinsam letztendlich das Problem lösen.
DANKE!
Timo
Toller Beitrag zum Thema WordPress Page Speed! Geschwindigkeit ist entscheidend für die Nutzererfahrung und SEO. Besonders hilfreich fand ich die Tipps zur Bildoptimierung und zum Caching. Ein schneller Tipp für alle: Nutzt Plugins wie WP Rocket oder W3 Total Cache und komprimiert Bilder mit Tools wie Smush oder Imagify. Dank euch wird meine Seite jetzt deutlich schneller laden. Weiter so!