Hast du dir schon mal die Frage gestellt, warum es WordPress-Websites mit sehr vielen Bildern auf der Startseite gibt, die trotzdem deutlich unter einer Sekunde laden? Richtig gelesen. Deutlich unter einer Sekunde Ladezeit. Das ist durchaus möglich und machbar, allerdings erfordert es sehr viel Sachkenntnis und vor allem Arbeit. Doch der ganze Aufwand lohnt sich, denn für Google ist eine solch schnelle Seite ein echter Grund, sie höher zu ranken.
Die Optimierung der Ladezeiten in ein Teilbereich der SEO und gehört zum technischen SEO. Um sich ein Gesamtbild von dem SEO-Gesundheitszustand Ihrer WordPress Website zu verschaffen, sollten Sie zunächst ein SEO Audit durchführen. Sie wollen die Ladezeiten von denjenigen Seiten optimieren, die für ein wichtiges Long Tail Keyword ranken sollen. Das finden Sie im Rahmen einer SEO Keyword Recherche heraus.
Warum sind schnelle Ladezeiten so wichtig?
Die einfache Antwort: Die Nutzererfahrung kommt an erster Stelle! Rufst du eine Website auf und sie lädt nicht, fühlt sich das schnell wie eine Ewigkeit an. Und niemand wartet gerne.
Was passiert also? Klar, nach nur wenigen Augenblicken schliesst du den Tab oder suchst woanders weiter. Als Faustregel gilt, dass 50 % der Nutzer nach 3 Sekunden Ladezeit abspringen.
Was sind die Gründe für eine langsame WordPress Website?
Warum eine Website langsam lädt, hat eigentlich immer mehrere Ursachen:
- Es werden keine optimierten Bilder und Grafiken eingesetzt
- Es werden zu viele Plugins eingesetzt
- Das Hosting-Paket genügt nicht den Anforderungen an die Website
- Die vorhandenen Styles und Skripte werden nicht optimiert
… und viele andere Ursachen mehr, wie wir gleich sehen werden!
Was sind die Folgen einer langsamen Website?
Insbesondere für Online Shops kann es enorm geschäftsschädigend sein, wenn die Website aus Kundensicht nicht tut, was sie soll. Wer eine eigene E-Commerce-Seite hat, muss also nebst der technischen Umsetzung auf eine schnelle Ladezeit achten. Denn laut Google sinkt die Konversionsrate mit jeder weiteren Sekunde Ladezeit um 7 %. Wer also nicht in die Pflege und Optimierung seines Online Shops investiert, verliert hier bares Geld.
So kannst du Websites rasend schnell machen
Ich will dir im Folgenden aufzeigen, dass es absolut möglich ist, auch Websites rasend schnell zu machen, die bspw. mit einem Hero-Video oder Hero-Images arbeiten, die Pagebuilder wie Elementor im Einsatz haben oder Themes verwenden, die eine Vielzahl an Skripten laden — alles Faktoren, die die Ladezeit einer Website verlangsamen.
Im Übrigen ist die Endgeschwindigkeit einer Website oftmals Fleissarbeit: Es greifen viele kleine Optimierungen ineinander, die in der Summe die Website richtig flott machen werden!
Doch der Reihe nach. Fangen wir bei den Grundlagen an und arbeiten uns dann Stück für Stück voran! Hol dir einen Tee oder Kaffee und nimm dir etwas Zeit:
Die Wahl des richtigen Hosters
Die Wahl des richtigen WordPress-Webhostings mit einer passenden Lösung für deine jeweiligen Anforderungen ist sehr wichtig. Denn die Geschwindigkeit beginnt bereits hier. Viele bestellen sich ein günstiges Shared-Hosting-Paket. Doch das ist oftmals die falsche Wahl, wenn du Geschwindigkeit willst. Denn auf diesen günstigen Webhosting-Paketen teilen sich zum Teil weit über 100 Websites einen virtuellen Server.
Haben andere Websites auf diesem Server viel Traffic, hat deine Website das Nachsehen. Schon kleinere Websites können dann sehr langsam werden, wenn es um Interaktionen wie z.B. ein Produkt in den Warenkorb legen geht. Wer seine Kunden nicht warten lassen will, braucht eine vernünftige Lösung, die oftmals nur einige Euro mehr kostet.
Performance-Tipp: Auf HTTP/2 achten
HTTP/2 ist der Nachfolger des HTTP 1.1-Protokolls. Dieses Protokoll wurde für moderne und komplexe Websites von heute entwickelt. Die Vorteile liegen darin, dass das neue Protokoll dem Browser ermöglicht, viele verschiedene Dateien gleichzeitig zu laden, und nicht mehr nacheinander, wie es bei HTTP 1.1 noch der Fall war. Denn HTTP 1.1 musste für jede Anfrage (Request) eine Verbindung öffnen, während der Browser mit HTTP 2 auf einer TCP-Verbindung mehrere Ressourcen gleichzeitig laden kann. Das verschafft einen großen Geschwindigkeitsvorteil.
Immer wieder sehe ich in meiner Arbeit vor allem ältere Websites, die immer noch nicht HTTP/2 einsetzen. Dabei ist die Verwendung der modernen Protokolls tatsächlich Grundlage für alle weiteren Arbeitsschritte. Mit diesem Online-Tool kannst du selbst testen, auf welcher Website HTTP2 bereits eingesetzt wird. Ein weiterer Vorteil: HTTP/2 kann nur mit einem HTTPS-Zertifikat genutzt werden, was ebenso eine Voraussetzung für die Übermittlung sensibler Kontakt- oder Zahlungsdaten ist.
Performance-Tipp: Plugins ausmisten
Die meisten WordPress-Websites haben zu viele Plugins aktiviert. Jedes zusätzliche Plugin verlangsamt die Website ein bisschen mehr. Insbesondere bei Interaktionen, die sich nicht cachen lassen (also z.B. Produkt in den Warenkorb legen oder ein Kontaktformular absenden), wird das zum Problem.
Lasse deshalb nur die wirklich notwendigen Plugins aktiviert und installiert. Die meisten Plugins liefern ihre eigenen Dateien mit und irgendwann hat das Theme dann schnell 15 bis 25 CSS- und JavaScript-Dateien auszuliefern.
Selbst Plugins, die deaktiviert sind, können dein WordPress langsam machen. Deshalb: lösche sie. Mit dem Plugin Code Profiler kannst du sehr schnell feststellen, welche Plugins die Performance-Fresser sind, wie du im folgenden Beispiel sehen kannst. Die müssen dann nach Möglichkeit raus.
Elementor ist z.B. ein Pagebuilder-Plugin, das sehr viel Performance frisst und eine Website langsam macht. Besonders die »Multi-Purpose«-Themes leiden unter dieser Krankheit. Zwar kannst du auch solche Themes optimieren, allerdings wirst du damit nicht in den Millisekundenbereich der Ladezeit vordringen. Ein Theme mit wenig Dateien und nur den nötigsten Plugins ist daher die absolute Voraussetzung für wahre Schnelligkeit.
Code aufräumen im WordPress-Theme
Je nachdem, welches WordPress Theme sich im Einsatz befindet, ist es entweder gut oder weniger gut programmiert worden. Viele Themes schleppen einen Overhead an Quellcode mit sich rum, der sie langsam macht.
Insbesondere die Full-Feature WordPress Themes sind allesamt total überladen mit Styles und Skripten, schliesslich sollen sie ja auch in dutzenden von verschiedenen Einsatzszenarien passen. Davon kann ich nur abraten!
Nach Möglichkeit solltest du ein schlankes, aber flexibles Theme wie z.B. KadenceWP oder GeneratePress einsetzen. Mehr dazu in unserer Minimal WordPress-Themes.
Icon-Fonts entfernen
Icon-Fonts wie FontAwesome finden sich auf fast jeder Website, auf der ein Pagebuilder im Einsatz ist. Icon-Fonts sind einerseits enorm praktisch, da du damit die verschiedensten Icons sehr einfach einbinden kannst, bspw. das Hamburger-Icon für ein Dropdown-Menü oder das Pfeil-nach-unten-Icon („Caret down“), dass anzeigt, dass ein Navigationspunkt ein Untermenü enthält.
Nachteil dessen ist allerdings, dass in der Regel drei oder mehr CSS-Dateien nur für die Icon-Fonts geladen werden, was wiederum die Ladezeit der Website verlangsamt.
SVG-Icons verwenden
Die Lösung? SVG-Icons! Das Astra Theme verwendet diese von Haus aus. Einer der Gründe, warum es eines der performantesten Themes am Markt ist. Aber auch in PageBuildern wie Elementor kannst du SVG-Icons individuell einsetzen, sodass sich die Ladezeit der Seite verbessert:
Elementor ist immerhin so schlau, dass es die Icon-Fonts nur dann lädt, wenn sie auf einer Seite auch gebraucht werden. Wenn du also darauf achtest, überall nur SVG-Icons einzusetzen, bekommst du hier einen ordentlichen Performance Boost!
Wo bekomme ich SVG Icons her?
Grundsätzlich gibt es zwei Optionen: a) Du holst dir z.B. das Dr. Web Icon-Set, das über 970 verschiedene Icons im SVG-Format enthält.
Natürlich gibt es auch viele andere Icon-Sets. Einen Überblick zu Icon-Sets verschaffst du dir hier.
b) Iconmoon. Iconmoon ist eine großartige Seite, auf welcher du dir z.B. die Fontawesome-Icons als SVG herunterladen kannst. Ferner kannst du auch deren Größe definieren. Eine Seite, die ich immer wieder gerne benutze!
Emoji-Support entfernen
Emojis sind Teil des WordPress-Core seit der Version 4.2. Das bedeutet, dass deren Skripte bei jedem Seitenaufruf sowohl im Backend wie auch im Frontend ausgeliefert werden. Völlig egal, ob man diese Emoji irgendwo genutzt hat oder nicht. Also gehört auch dieser Code deaktiviert, denn er frisst nur Performance.
Hierfür gibt es ein Plugin namens Disable Emojis. Das schön daran: Emojis funktionieren sowieso in modernen Browsern. Lediglich ältere Browser, die von Haus aus keine Emojis unterstützen, bekommen die Emojis dann nicht mehr zu sehen.
Wer lieber kein extra Plugin installieren möchte, kann folgendes WordPress Snippet in die functions.php einfügen:
/** * Disable the emoji's * @source: netmagik.com/how-to-disable-emojis-in-wordpress/ */function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); // Remove from TinyMCE add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );}add_action( 'init', 'disable_emojis' );/** * Filter out the tinymce emoji plugin. */function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); }}Bilder optimieren
Der Bereich Bilder komprimieren bzw. optimieren ist dank des nicht mehr ganz so neuen WebP-Formats deutlich einfacher geworden als dass noch vor 4-5 Jahren der Fall war. Bilder im WebP-Format sind bis zu 70% kleiner als deren Geschwister im PNG oder JPG-Format. Die einfache Formel lautet also: Nutze WebP!
WebP wird seit dem WordPress Update 5.8. nativ unterstützt. Und auch der Browser–Support für WebP–Bilder ist mit 95 % hervorragend!
Für WordPress-Websites eine weitere gute Nachricht: Mit dem Plugin WebP Express kannst du mit wenigen Handgriffen deine bestehenden Bilder komprimieren. Ältere Browser, die noch kein WebP unterstützen, bekommen Dank des Plugins aber immer noch die PNG- oder JPG-Formate angezeigt.
Auch Nutzer, die ihre Websites bei Raidboxes oder Kinsta hosten, können aufatmen. Sie können auch das WebP Express Plugin einsetzen, was bis dato aufgrund der Nutzung von Nginx-Servern immer ein Problem war.
Summa summarum: Es spricht alles für die Nutzung des WebP-Formats mittels WebP Express!
WordPress Performance-Fresser abschalten
Wenn du aus deinem WordPress viel Geschwindigkeit herausholen möchtest, dann solltest du einige Funktionen des Content Management Systems abschalten. Denn ein paar Dinge sind in den Core gewandert, obwohl sie das CMS langsamer machen.
WordPress Heartbeat API
Die Heartbeat API steuert alle Ajax-Aufrufe innerhalb von WordPress. Zudem sorgt sie auch für das Zwischenspeichern beim Schreiben eines Artikels Im Backend. Allerdings tut sie das sehr regelmäßig, wie ein Herzschlag bei einem Menschen. Diese ständigen Anfragen an den Server gehen stark auf die CPU und fressen damit wichtige Performance. Gleichwohl hat die Heartbeat API natürlich Vorteile. Die Vorteile kann man allerdings nur ausschöpfen, wenn man keine statische Website hat, sondern einen Blog oder ein Magazin führt.
Über das Plugin WP Rocket kannst du die „Herzschlag“-Frequenz reduzieren und somit die Last auf den Server verbessern.
Auf Background-Images verzichten
Mit CSS Background Image kannst du Hintergrundbilder oder -Videos und Farbverläufe in eine Website einbetten. Typische Einsatzgebiete sind z.B. Hero Images oder Hero Videos.
Und hier liegt der Hund begraben: Denn Hintergrundbilder werden nicht direkt im HTML-Markup einer Website ausgeliefert, sondern über deren CSS. Ergo muss erst das ganze CSS geladen werden, bevor überhaupt eigentlich Hero Image abgerufen werden kann. Eine echte Performanz-Bremse also.
Bei Background Images kannst du nur bedingt etwas optimieren. Klar sollte das Bild selbst optimiert sein (siehe Punkt 7). Aber bei der Auslieferung des Bildes führt der Weg über das CSS. Du kannst zumindest den Ladevorgang des Bildes etwas abkürzen, indem du dem Browser anzeigst, dass das Hintergrundbild eine hohe Ladepriorität geniesst, und zwar wie folgt:
<link rel="preload" href="https://drweb.de/wp-content/themes/child-theme/images/name-des-hero-images.webp" as="image" fetchpriority="high" /> </head> Besser aber, du verzichtest ganz auf Hero Images, falls möglich. Zumindest sollte die extra Ladezeit immer beim Design und beim Performance Budget einer Website bedacht werden.
Unseren detaillierten Leitfaden zu Background Images findest du hier.
WooCommerce-Styles & Skripte nur auf Produktseiten laden
WooCommerce lädt standardmäßig eine Vielzahl an Skripten auf allen Seiten, auch wenn sie nicht benötigt werden. Mit diesem WooCommerce Snippet für die functions.php werden die Skripte nur dort geladen, wo sie im Einsatz sind.
/*** Optimizing WooCommerce Scripts* Removes WooCommerce styles and scripts from non WooCommerce pages.* @source brad-holmes.co.uk/5-most-used-woocomerce-snippets/*/ if (!function_exists( 'woo_manage_woocommerce_styles' ) ) :function manage_woocommerce_styles() { //first check that woo exists to prevent fatal errors if ( function_exists( 'is_woocommerce' ) ) { //dequeue scripts and styles if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) { wp_dequeue_style( 'woocommerce-layout' ); wp_dequeue_style( 'woocommerce-smallscreen' ); wp_dequeue_style( 'woocommerce-grid' ); wp_dequeue_style( 'woocommerce-general' ); wp_dequeue_script( 'wc_price_slider' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-add-to-cart' ); wp_dequeue_script( 'wc-cart-fragments' ); wp_dequeue_script( 'wc-checkout' ); wp_dequeue_script( 'wc-add-to-cart-variation' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-cart' ); wp_dequeue_script( 'wc-chosen' ); wp_dequeue_style( 'wc-blocks-style' ); wp_dequeue_script( 'woocommerce' ); wp_dequeue_script( 'prettyPhoto' ); wp_dequeue_script( 'prettyPhoto-init' ); wp_dequeue_script( 'jquery-blockui' ); wp_dequeue_script( 'jquery-placeholder' ); wp_dequeue_script( 'fancybox' ); wp_dequeue_script( 'jqueryui' ); } }}add_action( 'wp_enqueue_scripts', 'manage_woocommerce_styles', 99 );endif;Selbstredend musst du aber testen, ob dadurch nicht etwaige Funktionalität kaputt geht. Wenn du auf einer Seite bspw. einen Warenkorb in die Navigation einbindest, kann es sein, dass du z.B. die Zeile wp_dequeue_style( 'woocommerce-general' ); entfernen musst — ansonsten wird er auf normalen nicht-Produktseiten nicht mehr funktionieren.
CSS und JavaScript minifizieren
Neben den Bildern und Grafiken sind die CSS- und JavaScript-Dateien und ihre korrekte Auslieferung maßgeblich dafür verantwortlich, wie schnell eine Website werden kann. Dabei entscheidet die Größe der Dateien über eine schnelle Ladezeit. Und die Größe dieser CSS- und JS-Dateien kannst du maßgeblich reduzieren, indem du sie „minifizierst“.
Was ist eine „Minifizierung“?
Bei einer Minifizierung werden Leerzeichen, Zeilenumbrüche und Kommentare entfernt. Dadurch können viele Dateien auf einen Bruchteil ihrer ursprünglichen Größe geschrumpft werden. Nachteil ist jedoch, dass hierdurch die Lesbarkeit der Dateien stark beeinträchtigt wird.
Grund genug also, diesen Vorgang automatisieren zu lassen. Das geht bei den meisten Caching-Plugins. WP Rocket hat ebenfalls eine eigenen Abschnitt nur zum Thema Minifizierung für CSS (und für JavaScript):
JavaScript verzögert laden
Viele Plugins laden viel JavaScript. Das lässt sich zwar nicht immer vermeiden, jedoch kannst du beeinflussen, wie das JavaScript geladen werden soll.
Indem du Javascript verzögert („delayed“) lädst, kannst du die Ladezeit eine Seite spürbar verbessern.
JavaScript-Ausführung verzögern
Selbiges gilt für die Option, die Ausführung von JavaScript zu verzögern. Immerhin wird oftmals einiges an Rechenleistung benötigt, um JavaScript zu parsen.
Mit der Aktivierung der Option in WP Rocket wird das JavaScript erst dann ausgeführt, sobald die Nutzer auf der Seite aktiv werden, also indem sie scrollen oder den Mauszeiger bewegen.
Da die Option aber zu Fehlern auf der Website führen kann (wie auch bei Punkt 12 „JavaScript verzögert laden“), solltest du unbedingt alle wichtigen Funktionen auf der Seite in ausgeloggtem Zustand testen. Ggf. müssen Regex-Ausnahmen gesetzt werden, sodass bestimmte Dateien von der verzögerten Ausführung ausgenommen werden:
js-(before|after)(?:/wp-content/|/wp-includes/)(.*)
Schriftarten lokal hosten
Google Fonts sind auch ein gewichtiger Performance-Fresser, werden sie doch standardmäßig von extern über die Google-Server geladen. Das ist nicht nur nicht DSGVO-konform sondern verlangsamt auch die Ladezeit deiner Seite. Hier unser Leitfaden wie du Google Fonts datenschutzkonform einbinden kannst.
Auch Pagebuilder wie Elementor laden standardmäßig Google Fonts, in dem Fall die Roboto-Schriftart. Da wir die Schriftart aber entweder nicht brauchen oder aber schon lokal hosten, können wir uns die extra Ladezeit sparen, und zwar mit dem folgenden Schnipsel:
/*** Remove Google Fonts*/ add_filter( 'style_loader_src', function($href){ if(strpos($href, "//fonts.googleapis.com/") === false) { return $href; } return false;});content-visibility: auto; einsetzen
[Update 21. Juni 2022] Mit der CSS-Eigenschaft content-visibility kannst du steuern, inwiefern ein Element nachrangig geladen bzw. gerendert werden soll. Der Vorteil? Dadurch, dass du dem Browser anzeigst, bestimmte Inhalte verzögert zu laden, verbessert sich die Ladezeit und auch der Pagespeed einer Seite.
Dafür verwendest du folgenden CSS-Code, um dem Chrome-Browser anzuzeigen, dass ein oder mehrere Segmente einer Website nachrangig geladen werden können:
#perfmatters,.perfmatters { content-visibility: auto; contain-intrinsic-size: 1000px;}In den allermeisten Fällen wirst du so nochmal 5-10 Pagespeed-Punkte herauskitzeln können. Die CSS-Eigenschaft content-visibility wird aber nur von Chrome-basierten Browsern unterstützt. Mehr Infos dazu auf web.dev.
„Lazy loading“ (verzögertes Laden) der Bilder
Wie die meisten Tipps in diesem Artikel bezieht sich auch der letzte Tipp nicht nur rein auf WordPress-Websites. Indem du Bilder verzögert nachlädst, kann der Browser deine Seite viel schneller verarbeiten und darstellen. Die Bilder, die nicht sofort auf der Website sind, werden erst nach und nach beim Scrollen geladen.
Das nennt man „Lazy Loading“ und ist seit der WordPress-Version 5.5. Standard. Sobald ein img-Tags die Attribute width und height enthält, wird WordPress dem Bild ein loading="lazy" hinzufügen.
Zusätzlich kannst du diese Option auch im WP Rocket-Plugin aktivieren:
Gutenberg-CSS entfernen
Wenn Du kein Gutenberg-basiertes WordPress Theme einsetzt, wirst Du normalerweise auch kein Gutenberg-CSS benötigen. Jedoch lädt WordPress von Haus aus das Gutenberg-CSS mit.
So entfernst Du das CSS:
//Remove Gutenberg Block Library CSS from loading on the frontendfunction drwebwp_remove_wp_block_library_css(){ wp_dequeue_style( 'wp-block-library' ); wp_dequeue_style( 'wp-block-library-theme' ); wp_dequeue_style( 'wc-blocks-style' ); // Remove WooCommerce block CSS} add_action( 'wp_enqueue_scripts', 'drwebwp_remove_wp_block_library_css', 100 );Fazit
Wenn du alle Tipps abgearbeitet hast, dann hast du deiner Website schon viel Gutes getan. Du solltest eine deutliche Verbesserung der Performance spüren.
Falls du Hilfe bei der Optimierung deiner Website benötigen solltest, kannst du mir gerne eine E-Mail schreiben an markus.seyfferth@drweb.de
So, jetzt wünsche ich dir viel Spaß beim Optimieren deiner Website um beim Verbessern der Ladezeit von WordPress. Viel Erfolg!
Beitragsbild: Depositphotos
Dieser Artikel wurde erstmals von Andreas Hecht in 2016 geschrieben und in 2022 von Markus Seyfferth komplett überarbeitet und auf den neuesten Stand gebracht.
