wordpress pagespeed optimieren

WordPress Ladezeit optimieren fĂŒr maximale Performance [Komplett Anleitung]

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 Optimierung deines Blogs 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.

NEWS – Google bestĂ€tigt: Core Web Vitals ab Mai 2021 ein Rankingfaktor
Wie du mit Hilfe von Pagespeed Insights den Score bzw Web Vitals analysierst erfÀhrst du in diesem Beitrag >

Inhaltsverzeichnis:

  1. Optimierung der Bilder
  2. Komprimierung auf dem Server aktivieren
  3. Browser-Cache nutzen
  4. Plugins ĂŒberprĂŒfen
  5. HTML, JavaScript & CSS reduzieren
  6. Lazy Load fĂŒr Bilder
  7. Optimiere deine Datenbank
  8. Cache-Plugin installieren
  9. Nutze ein schlankes Theme
  10. WĂ€hle einen guten Webhoster
  11. Gravatare deaktivieren
  12. Trackbacks und Pingbacks deaktivieren
  13. Entferne Google Web Fonts
  14. Einsatz eines Content Delivery Networks (CDN) prĂŒfen
  15. WordPress-Header entschlacken
  16. CSS- & JavaScript-Code optimieren
  17. JavaScript- und CSS-Ressourcen prĂŒfen, die das Rendering blockieren
  18. Antwortzeit des Servers reduzieren

Warum du deinen WordPress Pagespeed optimieren solltest

  1. Google und andere Suchmaschinen lieben schnell ladende Seiten.
  2. Es ergibt sich ein besseres Nutzer-Erlebnis.
  3. Die Absprungrate (Bounce Rate) verringert sich.
  4. 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.(Quelle)
  • Jede Sekunde Verzögerung verringert die Conversion Rate um 7 %.(Quelle)
  • 47 % der Nutzer erwarten, dass eine Website in 2 Sekunden oder weniger lĂ€dt.

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:

  1. WebPagetest.org
  2. Tools.Pingdom.com
  3. PageSpeed Insights

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

wordpress pagespeed optimierung lade geschwindigkeit verbessern

Die Ladezeit von unter 2 Sekunden ist bereits ein super Ergebnis. Auch Google empfiehlt eine solche Ladezeit.

4 wichtige Faktoren bei der Website-Geschwindigkeit:

  1. nicht optimierte/zu viele Bilder
  2. langsamer Server
  3. aufgeblÀhtes WordPress-Theme
  4. zu viele Plugins
Die Ladegeschwindigkeit ist natĂŒrlich auch abhĂ€ngig vom Standort des Besuchers. Wenn du das Tool Pingdom nutzt, achte darauf, bei Standortauswahl „Europe – Germany – Frankfurt“ auszuwĂ€hlen. Die Ladegeschwindigkeit verlangsamt sich natĂŒrlich z. B. bei „Pacific – Australia“.

1. Optimierung der Bilder

So, nun beginnen wir mit der 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).

wordpress pagespeed score verbessern

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.

  1. Installiere Compress JPEG & PNG images.
  2. Registriere dich mit deiner E-Mail-Adresse, um den API Key zu erhalten (500 Bilder im Monat sind kostenlos).
  3. Trage den Key ein, falls noch nicht automatisch erfolgt.
  4. Aktiviere den Punkt „Originalbild“ > „Resize the …“ > Gib die maximale Breite ein.
  5. Gehe auf das WordPress-MenĂŒ „Medien“ > „Massenoptimierung“ > „
 starten“.

Hier siehst du ein Vorher-nachher-Bild als Beispiel fĂŒr eine verĂ€nderte DateigrĂ¶ĂŸe:

wordpress speed guide optimierung lade geschwindigkeit verbessern

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.

wordpress optimierung lade geschwindigkeit

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: https://varvy.com/tools/gzip/

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.

Den WordPress Pagespeed ohne Plugins zu optimieren, erfÀhrst du auch in diesem Guide. Ich bevorzuge selbst diese Variante und reduziere installierte Plugins auf ein Minimum.

Mit P3 (Plugin Performance Profiler) kannst du dir einen Überblick verschaffen und Ressourcen-fressende Plugins aufspĂŒren: https://wordpress.org/plugins/p3-profiler/.

wordpress plugin geschwindigkeit

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.

wordpress autoptimize installation

Autoptimize minimiert und kombiniert die statischen CSS-/JS-Dateien in einer bzw. zwei Dateien. Das beschleunigt enorm den gesamten Ladeprozess.

Das Kombinieren von CSS-/JS-Dateien fĂŒhrt nur bei HTTP/1.1-Verbindungen zu einem Geschwindigkeits-Vorteil.

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.

<iframe src="player.html" loading="lazy"></iframe>
 
<picture>
  <source media="(min-width: 30em)" srcset="mittel.jpg 1x, mittel-hd.jpg 2x">
  <source srcset="klein.jpg 1x, klein-hd.jpg 2x">
  <img loading="lazy" src="ersatz.jpg" loading="lazy">
</picture>

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('<img loading="lazy"', '<img loading="lazy" loading="lazy"', $text);
	return $text; } }
add_filter('the_content', 'replace_imglazy');

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.

Erstelle vor den Optimierungen ein vollstÀndiges Backup deiner WordPress-Installation und Datenbank.

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

wp super cache test

W3 Total Cache

wp super cache test

WP Rocket

wp super cache test

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.

wp super cache test

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:

avatare-deaktivieren

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.

javascript-footer-verschieben

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.

ladezeit-google-fonts

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

<meta name="generator" content="WordPress 5.3" />

FĂŒge dazu einfach in der functions.php-Datei deines Themes am Ende folgenden Eintrag hinzu:

remove_action('wp_head', 'wp_generator');
Nutze ein Child-Theme und fĂŒge den Code der Datei functions.php im Child-Ordner hinzu. So werden die Änderungen bei einem Theme-Update nicht ĂŒberschrieben.

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:

<link rel="dns-prefetch" href="//s.w.org">

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:

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://scheible.it/xmlrpc.php?rsd">

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.

css-komprimierung

Das Tool Google PageSpeed Insights bietet bereits die optimierten Dateien – CSS & JS – zum Download an.

google-pagespeed-download-css-js

Du brauchst diese nur noch in die entsprechenden Theme-Ordner hochzuladen.

Oder du nutzt einen der vielen Online-Optimierer wie z. B.:

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.

above-fold-optimierung-pagespeed

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:

javascript-footer-verschieben

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:

  1. 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.
  2. 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.

Viel wichtiger sind die Website-Ladezeit, die Website-GrĂ¶ĂŸe und die „Time to First Byte (TTFB)“.

„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:

  1. Lass dir den Code mit dem Tool „Critical Path CSS Generator“ generieren
  2. Setze einen Haken in die entsprechenden Boxen wie im Screenshot
  3. FĂŒge den Code ein

css above the fold code autoptimize einfĂŒgen

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!

wp rocket cache css above the fold code
 

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.

time to first byte optimieren mit wp rocket

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.

pagespeed 100 punkte optimieren desktop

pagespeed 100 punkte optimieren mobil

Perfekt, 100 Punkte!

Mit dem Astra Theme wie im Teil 1 vorgestellt, erzielte ich mit WP Rocket eine noch schnellere Ladezeit:

astra theme mit wp rocket top performance pagespeed 100 punkte

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!

Teile den Beitrag - Danke!

FacebookTwitterWhatsAppBuffer

Das könnte auch interessant sein...

27 Kommentare zu „WordPress Ladezeit optimieren fĂŒr maximale Performance [Komplett Anleitung]“

  1. 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?

  2. 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)

    https://holgerfreier.de/wp-content/uploads/2018/08/tantau.png

    https://holgerfreier.de/wp-content/uploads/2018/08/t3n.png

    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 :-)

    Wer erfahren möchte wie ich fĂŒr 1 Cent Besucher und Fans erziele, sollte einfach bei meinem kostenlosen Facebook Training teilnehmen.

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

    1. 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…

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

    1. 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/

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

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

  6. 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?

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

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

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

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

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

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

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

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

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

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und ĂŒber diesen Link einkaufst, bekomme ich von deinem Einkauf eine Provision. FĂŒr dich verĂ€ndert sich der Preis nicht.