WordPress Ladezeit optimieren [Tipps für mehr PageSpeed]
- 46shares
- Facebook45
- Pinterest1
- Twitter0
- LinkedIn0
Inhaltsverzeichnis
Warum ist die Ladezeit für deine Webseite wichtig?
In Zeiten in denen immer mehr mit mobilen Geräten im Internet gesurft wird, ist die Ladezeit deiner Webseite sehr wichtig für eine gute Nutzererfahrung.
Niemand möchte lange warten, bis eine Internetseite geladen ist. Studien zeigen auch, dass die Aufmerksamkeitsspanne von uns Internet Usern immer weiter abnimmt. Somit hast du nur wenige Sekunden um den Leser zu überzeugen, dass er auf deiner Seite bleibt.
Vor allem wenn man gerade unterwegs ist und mit dem Smartphone surft, wird das ganze noch etwas deutlicher. Denn auch bei einer langsameren Internetverbindung sollte deine Webseite in einer angemessenen Geschwindigkeit laden.
Aber nicht nur die User Experience leidet unter langsamen Ladezeiten. Auch Google bevorzugt schnelle Webseiten. Darum ist die Ladezeit auch ein Rankingfaktor für Google.
Dabei muss allerdings erwähnt werden, dass eine schnelle Webseite nicht automatisch gut rankt. Es ist eher so, wenn zwei Webseiten gleichermaßen SEO optimiert sind und den passenden Content bieten, dass Google die schnellere Webseite höher listet.
Des Weiteren hat die Performance deiner Webseite auch direkten Einfluss auf deinen Umsatz. Amazon und andere große Unternehmen hatten dies schon vor einigen Jahren in Zahlen gefasst. Eine Ladezeit Verzögerung von 1 Sekunde sorgt für 7% Conversion Verlust.
Die folgende Infografik fasst die Ergebnisse aus 12 Studien zusammen, wie sich die Geschwindigkeit einer Webseite auswirken kann.
Presented by Skilled.co
Deswegen musst du dafür sorgen, dass deine Seite so schnell wie möglich lädt.
Macht Sinn oder?
Website Performance - Wie messe ich die Ladezeit einer Webseite?
Bevor wir mit den Optimierungsmaßnahmen loslegen, müssen wir erstmal die Ausgangssituation klären. Damit wir sehen, ob die Maßnahmen unsere Webseite beschleunigen, brauchen wir die aktuelle Ladezeit.
Es gibt verschiedenste Tools, um die Ladezeit und PageSpeed einer Webseite zu messen.
Tools zur Messung der WordPress Performance
Google PageSpeed Insights
“Googles PageSpeed Tool analysiert den Inhalt einer Webseite und erstellt dann Vorschläge zur Verbesserung der Geschwindigkeit dieser Seite.”
Das heißt, die Ladezeit wird hier gar nicht wirklich gemessen. Dennoch sind die Vorschläge, die man erhält, durchaus hilfreich. Gut ist außerdem, dass Desktop und Mobil separat betrachtet wird.
Aber bitte, tu mir den Gefallen und verfalle nicht in den Wahn, den perfekten Performance Score von 100 zu erreichen.
Denn manche Vorschläge sind nur mit großem Aufwand zu beheben und im Gegenzug ist die tatsächliche Verbesserung der Ladezeit dafür viel zu gering.
Weitere Tipps & Tools von Google:
Pingdom Website Speed Test
Die Pingdom Tools helfen dir dabei die Ladezeit deiner Webseite zu analysieren. Der Test ist wirklich einfach zu nutzen und mit der optisch ansprechenden Auswertung ist es auch kein Hexenwerk herauszufinden was deine Webseite ausbremst.
GTmetrix | Website Speed and Performance Optimization
Die Auswertung umfasst den PageSpeed und YSlow Score deiner Webseite, dazu gibt dir GTmetrix die passenden Optimierungsvorschläge. GTmetrix ist optisch nicht ganz so hübsch aber dafür werden dir bei den vorgeschlagenen Maßnahmen direkt die Files angezeigt, um die du dich kümmern musst. Eine sehr gute Sache wie ich finde.
WebPageTest – Website Performance and Optimization Test
Das Coole bei Webpagetest ist, dass das Tool gleich mehrere Tests durchläuft und die Durchschnittswerte ausgibt. Ebenso wird jeder Durchgang einmal mit Cache und einmal ohne Cache durchgeführt.
Auch in den Developer Guides von Google wird Webpagetest mit aufgeführt. Lighthouse Tests lassen sich auch mit Webpagetest.org durchführen.
Ich nutze immer mehrere Tools und führe Tests mehrfach für verschiedene Seiten meiner Webseite durch. Dadurch erhält man einen sehr guten Überblick und einige Optimierungsvorschläge.
Da wir nun den Ausgangszustand unserer Webseite kennen, können wir mit der Optimierung loslegen.
Der richtige Hosting Anbieter
Wenn deine Seite bei einem langsamen Hoster liegt, wirst du es schwer haben das volle Potenzial aus deiner Webseite herauszuholen.
Deswegen sollte der erste Schritt sein zu prüfen, ob dein Webhoster für dein Projekt ausreichen Performance bietet.
Meine favorisierten Hoster sind aktuell:
- WPspace* (nutze ich hier auf meinem Blog)
Der richtige Hosting Anbieter
Bei der Wahl des Hosters solltest du darauf achten ob er einen OpCache anbietet. Das findest du am einfachsten heraus indem du den Support des Hosters kontaktierst.
OpCache sorgt dafür, dass der Webserver den PHP Code in effizienteren OpCode umwandelt und diesen im Arbeitsspeicher ablegt. Beides hilft deinem Server den Code schneller zu verarbeiten.
HTTP/2 ist mittlerweile eigentlich standard bei allen Hostern aber im Zweifelsfall auch einfach beim Support nachfragen.
Der Vorteil hierbei ist, dass der Browser alle nötigen Dateien in einer einzelnen Verbindung abfragen kann. Vorher wurde für jede Datei eine eigene Abfrage an den Server gesendet, was natürlich Zeit kostet.
Die PHP Version aktuell halten
Da WordPress zum großen Teil PHP Code nutzt, hat die genutzte Version ebenfalls Auswirkungen auf die Geschwindigkeit deiner Webseite.
Im Normalfall kannst du die Version bei deinem Hoster einfach einstellen. Aber wenn du ein Upgrade in Betracht ziehst, solltest du unbedingt vor dem Update ein Backup einrichten (das gilt für alle Updates).
Nach Möglichkeit solltest du immer die aktuellste Version nutzen, aber es kann vorkommen, dass Plugins damit Probleme haben. Gerade bei einem Upgrade einer Major Version von z.B. PHP 5 auf PHP 7 kann es zu Inkompatibilität kommen.
Das richtige WordPress-Theme wählen
Auch die Wahl des Themes hat großen Einfluss auf die Ladezeit deiner Webseite. Ich habe schon Themes getestet, die mit integriertem Page Builder verkauft werden und deren Ladezeit leider unterirdisch war.
Gerade bei Themes von Themeforest muss man da etwas aufpassen. Nicht nur, dass die eingebauten Page-Builder deine Webseite verlangsamen können, oft ist es auch sehr aufwändig bei solchen Seiten das Theme zu wechseln.
Meine bevorzugten Themes findest du in der WordPress Installationsanleitung.
Ich nutze aktuell am liebsten Astra* in Kombination mit dem Page-Builder Elementor bzw. Elementor Pro*.
Damit habe ich sehr gute Ergebnisse erzielt.
Updates für deine WordPress Website, Theme und Plugins
Gerade Updates von WordPress enthalten oft Performance Upgrades. Aber auch die Updates für dein Theme und deine Plugins können Verbesserungen für deine Ladezeit bringen.
Außerdem dient es auch der Sicherheit deiner Seite. Deshalb solltest du die Updates immer installieren.
Einfache Website Optimierung mit großer Wirkung
Kommen wir zunächst zu den Optimierungsmaßnahmen, die deiner Webseite unkompliziert einen recht großen Boost geben.
Bild Optimierung
Eine Webseite lebt von einem ansprechenden Design und hier spielen Bilder eine große Rolle. Aber zu große Bilder lasten deinen Server aus und verlangsamen deine Website ungemein. Es gibt aber einige Stellschrauben, wie du deine Bilder optimieren kannst.
Bildgröße richtig skalieren
Um deinen Server nicht unnötig zu belasten, solltest du die Bilder in der Größe hochladen, in der sie auch tatsächlich angezeigt werden.
Dazu kannst du neben dem bekannten Photoshop, kostenlose Programme wie Gimp, oder auch “einfache” Programme wie Vorschau auf dem Mac nutzen.
Bilder komprimieren
Neben der richtigen Bildgröße solltest du deine Bilder komprimieren. Dazu gibt es zahlreiche Online Tools oder Plugins.
Bei der Komprimierung werden „unnötige“ Daten aus deinem Bild entfernt. Dies sorgt für die Verkleinerung der Dateigröße der Bilder.
Aber keine Angst wenn du nicht gerade Fotograf bist wird dir die Komprimierung nicht auffallen. Dein Server wird es dir aber danken.
Ich nutze dazu das Plugin ShortPixel Image Optimizer*. Aber beachte, hier werden Bilder an Dritt-Server gesendet, wenn auf deinen Bildern erkennbare Personen abgebildet sind, solltest du die DSGVO Alternative EWWW Image Optimizer nutzen.
Beide Plugins komprimieren deine Bilder automatisch wenn du sie in WordPress hochlädst. Es gibt noch zahlreiche weitere Plugins aber die beiden liefern dir die Bilder auch automatisch im Web-optimierten Format WebP.
Lazy Load nutzen
Lazy Load sorgt dafür, dass Bilder und Videos, die sich nicht im sichtbaren Bereich befinden, erst geladen werden wenn man an die entsprechende Stelle scrollt. Das gilt auch bei eingebetteten YouTube Videos.
Du kannst dazu ein Plugin wie Lazy Load by WP Rocket oder aber du nutzt gleich das Caching Plugin von WP Rocket. Dazu gleich mehr.
Eine ausführliche Anleitung, wie du deine Bilder für bessere Ladezeiten optimierst, findest du auch hier im Blog.
WordPress-Caching
Wenn du deiner Seite wirklich einfach einen erheblichen Boost der Ladezeit verpassen möchtest, kann ich dir nur, das bereits angesprochene Plugin, WP Rocket* ans Herz legen.
Das Plugin nimmt dir einen Haufen von Aufgaben ab, die für einen guten PageSpeed sorgen, darunter unter anderem:
- Page Caching
- GZIP-Komprimierung
- Browser-Caching
- Datenbank-Optimierung
- LazyLoad
- Minimierung / Minify von CSS und JS
- CSS und JS zusammenführen
- Verzögertes Laden von JS
- CloudFlare Kompatibilität / CDN (dient der Steuerung, es ersetzt kein CDN)
- DNS Prefetching
Wie du mit WP Rocket, die Ladezeit deiner Website verbessern kannst, das findest du im entsprechenden Blogpost heraus.
Auch wenn WP Rocket Geld kostet, so habe ich mit keinem anderen Plugin dieselben exzellenten Ergebnisse erzielt. Die Einrichtung ist zudem ein Kinderspiel im Vergleich zu vielen anderen Caching-Plugins.
Kleiner Tipp: in den Tarifen von HostPress* und WPspace* ist WP-Rocket enthalten.
Kostenlose WordPress-Caching Alternative
Wenn dein Budget etwas eingeschränkt ist, kannst du auch mit kostenlosen Tools zufriedenstellende Ergebnisse erzielen.
Als Caching Alternative kannst du Cache Enabler oder WP Super Cache nutzen.
Minify und Zusammenführung HTML, CSS und JS
Hierbei kann dir das Plugin Autoptimize helfen. Dazu musst du lediglich in den Einstellungen des Plugins die entsprechenden Optionen aktivieren.
Zur genannten Alternative Autoptimize + Cache Enabler/WP Super Cache muss ich sagen, dass die Einrichtung wirklich einfach ist, aber bei meinen Tests hat WP Rocket bessere Ergebnisse geliefert.
Am besten du testest es mit deiner Webseite und entscheidest dann welche Konfiguration für dich infrage kommt.
Fortgeschrittene Performance Optimierung
Ab hier wird es etwas technischer, aber keine Sorge, ich versuche es so einfach wie möglich zu erklären. Bei Fragen kannst du gerne die Kommentare nutzen.
Browser-Caching über .htaccess konfigurieren
Den Browser-Cache kannst du auch manuell über die .htaccess-Datei konfigurieren. Die Plugins machen auch nichts anderes, als den Code automatisiert in die Datei zu schreiben.
Der Code von WP Rocket sieht beispielsweise folgendermaßen aus:
# Expires headers (for better cache control)
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 4 months"
ExpiresByType image/png "access plus 4 months"
ExpiresByType image/jpeg "access plus 4 months"
ExpiresByType image/webp "access plus 4 months"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/x-font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
gZIP und deflate in .htaccess konfigurieren
gZIP sorgt dafür, dass die Dateien von deinem Webserver vor der Übertragung an den Browser komprimiert werden und dadurch schneller übertragen werden können.
Auch hier kannst du den benötigten Code manuell in der .htaccess-Datei manuell einfügen, den ansonsten dein Caching-Plugin automatisiert in der Datei anpasst.
Der Code von WP Rocket sieht folgendermaßen aus:
# Gzip compression
# Active compression
SetOutputFilter DEFLATE
# Force deflate for mangled headers
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
# Don’t compress images and other uncompressible content
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|rar|zip|exe|flv|mov|wma|mp3|avi|swf|mp?g|mp4|webm|webp|pdf)$ no-gzip dont-vary
# Compress all output labeled with one of the following MIME-types
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
Datenbank optimieren
Deine Datenbank wird im Betrieb von WordPress einigen unnötigen Daten zugemüllt.
Darunter fallen Spam-Kommentare, gelöschte Beiträge, Seiten, Kommentare, Kategorien, Tags etc. Aber auch gelöschte Plugins hinterlassen häufig absolut unnötige Einträge in deiner Datenbank.
Zu guter Letzt erstellt WordPress beim Erstellen von Beiträgen und Seiten automatische Revisionen (automatische Speicherung). Diese Revisionen können deine Datenbank ziemlich zumüllen.
Aber es gibt hier eine recht einfache Maßnahme. Dazu musst du in der config.php lediglich folgenden Eintrag einfügen:
define( 'WP_POST_REVISIONS', 3 );
Dadurch werden nur die 3 neusten Revision gespeichert werden. Du kannst die Zahl beliebig wählen oder auch komplett „abschalten“ indem du die erlaubten Revisionen auf 0 setzt.
Aber ich würde schon 2-3 Revisionen nutzen. Das kann dir in manch einer Situation viel Arbeit ersparen.
Die anderen unnötigen Einträge in deiner Datenbank kannst du mit einem Plugin wie WP-Sweep bereinigen.
Aber natürlich die Sicherung der Datenbank nicht vergessen, bevor du deine Datenbank optimierst.
WordPress-Plugins optimieren
Jedes Plugin, dass du auf deiner Seite installierst, macht deine Seite etwas langsamer. Daher solltest du nur wirklich benötigte Plugins installieren. Außerdem solltest du nicht einfach das erstbeste Plugin nutzen, denn oft gibt es Alternativen, die einen besseren Job machen was deinen PageSpeed angeht.
Das lässt sich am einfachsten durch Testen und Vergleichen herausfinden.
Aber es gibt natürlich auch Plugins, die deine Ladezeit verbessern.
Asset CleanUp: Page Speed Booster
Manche Plugins benötigst du z.B. nur in deinen Beiträgen und nicht auf deinen Seiten. Aber oft wird der Code auf jeder Seite ausgeführt, auch wenn die Funktion auf dieser Seite gar nicht genutzt wird.
Das sorgt natürlich für unnötige Ladezeit.
Mit dem Plugin Asset Cleanup kannst du für jede Seite/Beitrag einstellen, ob bestimmter Code hier geladen werden soll. Beispielsweise die Bewertung, die du am Ende jeden Beitrags findest, benötige ich nur in den Beiträgen.
Es macht also keinen Sinn, dass der Code auf meiner Startseite oder meiner Kontaktseite geladen wird und dank des Plugins kann ich es verhindern, dass der Code auf meinen Seiten geladen wird.
@import der Stylesheets im Child-Theme optimieren
In der Vergangenheit war es üblich die Stylesheets des Parent-Themes mit @import Befehlen in dein Child-Theme zu importieren. Aber der WordPress Codex besagt mittlerweile, dass dies nicht mehr die beste Methode ist, da hierdurch unter anderem die Ladezeit der Stylesheets erhöht wird.
Besser ist es die Stylesheets mit Hilfe von Enqueue in deiner functions.php zu „laden“. Im WordPress Codex findest du eine ausführliche Anleitung hierzu.
WordPress Quellcode optimieren
Der WordPress Code enthält ein paar Funktionen, die eher in speziellen Situationen genutzt werden. In den meisten Fällen können diese Funktionen entfernt werden um den HTML Code zu entschlacken und somit noch etwas an PageSpeed zu gewinnen.
Außerdem gibt es ein paar Javascript-Dateien, die beim Aufbau deiner Seite nicht sofort benötigt werden und daher im Footer deiner Seite besser aufgehoben sind als im Header. Dadurch werden die Ressourcen für den Seitenaufbau nicht unnötig belastet.
Die folgenden Code-Schnippsel fügst du in die functions.php deines Child-Themes ein.
JavaScript-Dateien in den HTML Footer verschieben
Mit folgendem Code-Schnippsel kannst du die Javascript Dateien in den Footer befördern:
function remove_head_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('wp_enqueue_scripts', 'remove_head_scripts');
WordPress Emojis entfernen
WordPress liefert Emojis in einer Form aus, die auch auf Geräten verfügbar sind, die Emojis nicht kennen. Heutzutage ist dies aber nicht mehr wirklich nötig, da jedes halbwegs moderne Gerät Emojis kennt. Außerdem sehen die WordPress eigenen Emojis etwas anders aus als man es gewohnt ist.
Mit folgendem Code-Schnippsel kannst du die WordPress Emojis entfernen. Dadurch werden Emojis nicht komplett entfernt, lediglich die Kompatibilität für alte Geräte. Das kannst du heutzutage eigentlich ohne Bedenken entfernen.
Wenn du die Emojis entfernst kannst du auch gleich den DNS-Prefetch Befehl entfernen (die letzten beiden Codezeilen).
Die Plugins Autoptimize und WP Rocket bieten jeweils eine Option um das für dich zu übernehmen.
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
add_filter( 'emoji_svg_url', '__return_false' );
remove_action('wp_head', 'wp_resource_hints', 2);
REST API Link entfernen
Die REST API stellt externen Programmen die Inhalte deiner WordPress Webseite in einer speziellen Form zur Verfügung mit der sie besser umgehen können. Du benötigst sie Beispielsweise wenn du eine App hast, die die Inhalte deines Blogs anzeigt.
Im Normalfall benötigt man die REST API eher nicht, darum kannst du den Link mit folgendem Code-Schnippsel entfernen:
remove_action('wp_head', 'rest_output_link_wp_head');
WP-Embed entfernen
Mit WordPress hast du die Möglichkeit andere WordPress Beiträge in deinen Beiträgen einzubetten anstatt einfach nur einen Link zu setzen.
Im Regelfall möchte man diese Funktion nicht nutzen, daher kannst du den folgenden Code-Schnippsel in deiner functions.php einfügen. Am besten entfernst du auch gleich die Möglichkeit, dass andere WordPress Seiten deine Beiträge einbinden.
function delete_wpembed() {
wp_deregister_script( 'wp-embed' );
}
add_action('wp_enqueue_scripts', 'delete_wpembed', 9999);
remove_action('wp_head', 'wp_oembed_add_discovery_links' );
RSD und WLW Links entfernen
Wenn du deine WordPress Beiträge nicht mit dem Windows Live Writer oder anderen externen Programmen in deine Seite einpflegst kannst du die Links mit folgendem Code-Schnippsel entfernen.
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
WordPress Meta Generator entfernen
Durch den Meta Generator steht im HTML Code deiner Seite die WordPress Version, die du aktuell nutzt. Da dies sonst keinen weiteren Sinn macht und auch als Sicherheitslücke angesehen wird kannst du den Generator mit folgendem Code-Schnippsel entfernen.
remove_action('wp_head', 'wp_generator');
WordPress Shortlinks entfernen
Mit folgendem Code-Schnippsel kannst du die Shortlinks aus dem HTML Code entfernen. Es macht keinen wirklichen Sinn, dass die Links im Code stehen.
remove_action('wp_head', 'wp_shortlink_wp_head');
Fazit: Mit diesen Tipps solltest auch du den PageSpeed deiner WordPress-Webseite deutlich verbessern
Solltest du Probleme bei der Implementierung haben oder offene Fragen, zögere nicht und nutze die Kommentare.
Wenn du deine Webseite nach dieser Anleitung optimiert hast, würde es mich sehr interessieren, welche Ergebnisse du erzielt hast. Lass es mich in den Kommentaren wissen.
WordPress-Fan seit über 10 Jahren und Autor von Blogcraft.io
WordPress-Fan seit über 10 Jahren und Autor von Blogcraft.io
Bei Links, die mit einem * markiert sind, handelt es sich um sog. Affiliate-Links. Wenn du einen Kauf über diese Links tätigst, bekommen wir eine Provision und du kannst unsere Arbeit aktiv unterstützen. Danke dafür ❤️
Für dich entstehen dadurch keine weiteren Kosten und du kannst dir sicher sein, dass wir nur Tools empfehlen, die wir auch wirklich für gut erachten.
- 46shares
- Facebook45
- Pinterest1
- Twitter0
- LinkedIn0