D.r Web seit 1997 print.
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
D.r Web seit 1997 print.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » WordPress » WordPress Performance: Was Websites wirklich schnell macht

WordPress Performance: Was Websites wirklich schnell macht

WordPress ist das beliebteste Content Management System auf unserem Planeten. Die Vorteile überzeugen und die Möglichkeiten damit sind gigantisch. In Punkto Ladezeit solltest du WordPress allerdings ein wenig unterstützen, da das System standardmäßig nicht ganz so flott unterwegs ist.

Sozial sein
Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 33 Kommentare
Lesedauer: 12 Minuten
  • von Markus Seyfferth
  • 24. Juni 2022

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.

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

Screenshot einer Google Pagespeed Artikel mit 94 von 100 möglichen Performance-Punkten.
Das Endergebnis der WordPress-Optimierung is auch auf Dr. Web zu sehen: 90+ Pagespeed-Punkte für diesen und alle anderen Artikel auf Dr. Web!

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.

Screenshot eines Performance Test. Im Ergebnis sind die mit sehr gut benoteten Core Web Vitals zu sehen.
Die Core Web Vitals sind ein Rankingfaktor für Google und messen den Grad der Nutzererfahrung auf einer Website.

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:

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

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

Screenshot eines Checks, ob die Seite drweb.de das HTTP 2-Protokoll unterstützt.

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. 

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

Screenshot eines Performanz-Profils der installierten Plugins.
Elementor verbraucht mehr Rechenpower als alle anderen Plugins zusammen.

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.

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

Vorher-Nachher-Vergleich einer Pagespeed-Optimierung
Dieser Online-Shop hat ein Multi-Purpose Ecommerce-Theme und Elementor sowie über 70 weitere Plugins im Einsatz und ist vor der Pagespeed-Optimierung entsprechend langsam unterwegs gewesen.

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 großen Übersicht zu WordPress Themes.

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

Rot eingerahmte Option im Elementor Navigationsmenü für SVG hochladen.
Im Navigationsmenü von Elementor kannst du statt eines normalen Font-Icons eine eigene SVG hochladen und so die Website Performance verbessern.

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. 

Das große Dr. Web Icon-Set mit über 970 individuell anpassbaren Icons im SVG Format.

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!

Screenshot der Icomoon-Website mit einer Auswahl an Font Awesome Icons.
Auf Icomoon kannst du gezielt nach bestimmten Icons suchen, sie anpassen und herunterladen.

6. Emojis entfernen

Emojis sind Teil des WordPress-Core seit der Version 4.2. Das bedeutet, dass deren Scripte 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.

Liste an verschiedenen Emojis.
Das Plugin Disable Emojis verbessert die Ladezeit, da es das Laden eines JavaScripts unterbindet.

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();
	}
}

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

Mehr als 95% aller Browser unterstützen bereits das WebP - Format.
Bildquelle: caniuse.com

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!

Screenshot des WebP-Express Plugins.
WebP Express konvertiert neue und bestehende Bilder in effiziente WebP-Format.

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

Heartbeat-Einstellungen im WP Rocket Plugin.
WP Rocket hat eine Funktion names „Heartbeat Control“, das genau diese Abruffrequenz steuert.

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

CSS background-image

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.

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

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

Die Option CSS minifizieren ist in WP Rocket angeklickt.
CSS- und JavaScript-Dateien kannst du bspw. in WP Rocket minifizieren.

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

Die Option JavaScript verzögert laden in WP Rocket wurde aktiviert.
In WP Rocket kannst du das JavaScript verzögert laden lassen.

Indem du Javascript verzögert („delayed“) lädst, kannst du die Ladezeit eine Seite spürbar verbessern.

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

Die Option JavaScript-Asuführung verzögern wurde angeklickt und zwei Ausnahmen gesetzt.

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/)(.*)

14. 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;
});

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

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

Lazy Loading im WP Rocket Plugin ist aktiviert.

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 auf den neuesten Stand gebracht. 

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Jobs

Lead Entwickler Mobile mit Fokus iOS-Entwicklung

Karlsruhe

Grafik-Designerin

Freiburg im Breisgau

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Agenturpartner

One Step Webdesign

Hannover

Werbeagentur Hannover | 360 Grad Konzept

Hannover

WPSteinheisser Photography

Ludwigsburg

SEOlist.IO Frankfurt – SEO-Spezialist & SEO-Freelancer

Frankfurt am Main

wolli ruf – mediendesign

Freiburg im Breisgau

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

WordPress 6.0 „Arturo” ist da: Was du beachten solltest

Mit WordPress 6.0 wird ab sofort die zweite große WordPress-Version des Jahres 2022 ausgerollt. Alle wichtigen Neuerungen für dich zusammengefasst.

 →   

WordPress Themes kostenlos und kostenpflichtig

Warum kostenlos oft teuer ist. Was nichts kostet, ist nichts wert. Diese Redensart hat jeder von uns schon gehört. Und die gilt auch für Themes. Denn Themes müssen weiterentwickelt werden, und dafür braucht das Entwicklerteam schlicht Geld. Ein nicht weiter entwickeltes Theme, das deine Website crasht, kann dich also teuer zu stehen kommen. Setze deshalb lieber auf ein am Markt etabliertes Theme mit hoher Nutzerzahl.

 →   

Elementor für WordPress: Was sind die Vor- und Nachteile?

Elementor ist der führende Pagebuilder für WordPress und kann mehr als 7 Millionen (!) aktive Installationen für sich verbuchen. Ich habe mir den Senkrechtstarter für dich angesehen.

 →   

33 Antworten zu „WordPress Performance: Was Websites wirklich schnell macht“
— was ist Deine Meinung?

  1. Susanne sagt:
    22. Juni 2022 um 8:45 Uhr

    Vielen Dank für den Artikel!

    Leider hat P3 (Plugin Performance Profiler) dann meine Website gecrasht (Löschen des Plugins per FTP hats aber wieder gerettet). Das Plugin wird seit zwei Jahren nicht mehr gewartet, hatte aber ein bisschen auf den Beitrag vertraut, dass es schon gutgehen würde 😉
    Mir war gar nicht bewusste, wie viele Provider immer noch HTTP/1 einsetzen, vielen Dank für den Tipp und die anderen hilfreichen Infos!

    Ich habe jetzt erstmal was zu optimeren an meinen Sites 😉

    Antworten
    1. Markus Seyfferth sagt:
      22. Juni 2022 um 13:55 Uhr

      Danke für den Hinweis, bei mir hatte das P3-Plugin bisher keine Probleme verursacht! Werde es aber noch im Artikel aktualisieren.

      Antworten
  2. Andreas sagt:
    21. Juni 2022 um 15:53 Uhr

    Boah …. leck mich am Ar…….

    Ich würde sagen: ich bin mal ein paar Tage im stillen Kämmerlein.

    Herzlichen Dank für viele Ansätze.

    Antworten
  3. Enrico von Klickfieber sagt:
    7. Juni 2022 um 13:19 Uhr

    Ich wusste gar nicht, dass die Skripte für die Emoji’s auch geladen werden, obwohl diese gar nicht verwendet werden. Das sind ja völlig unnötige HTTP-Requests und einige Millisekunden Ladezeit die man sich sparen kann. Da werde ich heute Abend doch gleich mal was gutes für die Performance meiner Website tun und den Codeschnipsel einbauen.

    Vielen Dank für den Tipp!

    Viele Grüße
    Enrico

    Antworten
    1. Markus Seyfferth sagt:
      9. Juni 2022 um 14:59 Uhr

      Sehr gern!

      Antworten
  4. Manfred sagt:
    7. Mai 2020 um 17:30 Uhr

    Sehr umfangreicher und Guter Beitrag. Da habe ich ne Menge arbeit vor mir.

    Antworten
  5. Stefan Weimar sagt:
    24. März 2020 um 17:09 Uhr

    Der Artikel ist zwar schon etwas älter aber trotzdem immer noch aktuell. Ein Tipp zum Hosting: wir verwenden Cloudflare und sind damit weltweit schnell erreichbar.

    Antworten
  6. Annabell Müller sagt:
    20. Oktober 2018 um 13:50 Uhr

    das Divi-Theme gehört ja auch zu den beliebtesten Themes, insbesondere mit dem divi – Builder. Es soll ja auch SEO freundlich sein. Habt ihr damit Erfahrungen gesammelt? Sollte man es Deiner Meinung nach nicht für SEO-Projekte einsetzen

    Antworten
  7. Louis Fre sagt:
    11. September 2018 um 8:21 Uhr

    Guten Morgen!
    Hast du eine aktuelle Empfehlung für ein schnelles und leicht zu bedienendes WordPress Theme? Ich möchte möglichst wenig Anpassungen vornehmen, daher wäre ein Theme was von Haus aus sehr flott ist genau das Richtige.
    Schöne Grüße
    Louis

    Antworten
  8. Alfred sagt:
    4. Mai 2016 um 14:43 Uhr

    Hallo Andreas,
    macht Deiner Meinung nach ein SEO Tool überhaupt Sinn? Die sprechenden URL’s sind ja schon weggefallen. Und Geschwindigkeit kosten sie auch.
    VG
    Alfred

    Antworten
    1. Andreas Hecht sagt:
      4. Mai 2016 um 15:05 Uhr

      Ein SEO-Tool macht immer Sinn. Damit optimierst Du zum Beispiel ja auch Deine Texte und die Google-Vorschau. Zudem setzt es die richtigen Titel und sorgt dafür, dass keine Duplikate entstehen.

      Antworten
  9. Michael sagt:
    23. April 2016 um 16:50 Uhr

    Auf alle Fälle ein sehr interessanter Artikel. Genau daran muss ich arbeiten…

    Antworten
  10. Jan Wiedemann sagt:
    31. März 2016 um 16:05 Uhr

    Hallo Andreas,
    echte Performance-Fresser sind ja die von vielen eingesetzten Slider und Gallery-Plugins. Manche dieser Tools kommen gleich mit meheren .js- und .css-Dateien daher. Kannst du all denen unter uns, die hierauf nicht verzichten wollen, einen Tipp geben?
    LG

    Antworten
    1. Andreas Hecht sagt:
      31. März 2016 um 16:08 Uhr

      Klar. Kaufe Dir das Gonzales-Plugin und sorge damit dafür, dass alle betreffenden Dateien nur noch auf den einzelnen Beiträgen oder der betreffenden Galerie-Seite eingebunden werden. Das macht dann zumindest Deine Startseite schneller.

      Antworten
      1. Jan Wiedemann sagt:
        31. März 2016 um 16:26 Uhr

        Hallo Andreas, deine Antwort bezieht sich ja eher auf meinen Post weiter oben. Die meisten werden einen Slider ja auf der Startseite einsetzten und da hilft dann auch das besagte Tool nichts. Gibt es denn überhaupt einen „schlanken Slider“?

        Antworten
        1. Andreas Hecht sagt:
          31. März 2016 um 16:30 Uhr

          Mag sein. Danach müsste man im Plugin-Verzeichnis suchen. Allerdings kann man sich die Optimierung dann fast sparen. Spielkram kostet immer heftig Geschwindigkeit. Zudem nerven Slider die meisten Besucher ganz kräftig an, das gebe ich mal zu bedenken. Ich klicke solche Seiten immer gleich wieder weg.

          Antworten
  11. hofpils sagt:
    27. März 2016 um 17:38 Uhr

    Bei welchem Hoster befindet sich eigentlich democraticpost? Hostnet?

    Antworten
    1. Andreas Hecht sagt:
      27. März 2016 um 19:09 Uhr

      Ja, hostNet. Der im Artikel angesprochene Server.

      Antworten
  12. Achim Schmidt sagt:
    26. März 2016 um 19:00 Uhr

    Sorry, ich bin voelleicht ein bißchen blöd, aber ich verstehe es nicht. Ich habe hier einen ersten Test (Chrome) und einen zweiten, kurz danach (Firefox). Jetzt gehe ich mal dsvon aus, dass der Browser, in dem der Test gestartet wird, nixhts zu sagen har. Dann habe ich im ersten Test eine Ladezeit von 3,99 Sec. und bin damit schneller als 42% aller getesteten Website. 5 Minuten später hat die selbe Site 5,72 Sekunden Ladezeit und ist trotzdem besser als 72% aller Site. Irgendwie verstehe ich den Zusammenhang nicht: Wie kann eine Site, die eund 2 Sekunfden langsamer ist, besser ranken? Die gemessene Zeit ist verhältnismäßig willkürlich, denn bei einer Optimierung im zehntel-Sekunden-Bereich erschienen mir fast 2 Sekunden Differenz zu ein und derselben Site extrem viel. Weilche Zahl ist für dich die ausschlaggebende? Nur die GEschwindigkeit oder stellst du sie in Zusammenhang mit einer anderen?
    Zum schluss noch eine andere Frage: Gibt es ein Tool, mit dem ich mehrere Seiten parallel testen kann. Also so 10, 20 oder mehr. Die Anzeige muß anschließend nicht so detailliert sein.

    Antworten
    1. Andreas Hecht sagt:
      26. März 2016 um 19:24 Uhr

      Hallo Achim,
      hast Du bei den Pingdom Tools den Test über »Amsterdam, Netherlands« eingestellt? Dann sollte der zweite Test schneller sein, wenn Deine Website bereits ein Caching verwendet. Es kann jedoch durchaus auch vorkommen, dass der zweite Test langsamer ist als der erste. Das hängt dann von Dateien ab, die über andere Server ausgeliefert werden. Das Wichtige ist immer die Ladegeschwindigkeit für Google. Du hast auf jeden Fall recht viel Potenzial für eine Optimierung. Mir ist übrigens kein Tool bekannt, mit dem sich viele Websites im Bulk testen lassen.

      Antworten
      1. Achim Schmidt sagt:
        26. März 2016 um 22:26 Uhr

        Danke für die schnelle Antwort. Beide Tests gingen über Dallas USA, wobei der zweite langsamer als der erste war. Die Frage ist aj auch, was wird gezählt. Die Startseite oder Unterseiten. Gib mal diese URL ein. So ein Ergebnis habe ich noch nie gesehen: http://tools.pingdom.com/fpt/#!/bHcVNr/http://www.foto-gregor-gruppe.de/koeln/shop/specials.asp
        Allerdings ist die Startseite diese: http://www.foto-gregor-gruppe.de/ Und die hat eine optimale Geschwindigkeit. Ist ja auch wenig drauf.
        Wenn ich bei google die Suche „foto köln“ eingebe erscheint Foto Gregor ganz oben. Allerding weiß ich nicht, ob die oben angezeigten Ergebniss organisch sind oder bezahlt.

        Antworten
        1. Andreas Hecht sagt:
          27. März 2016 um 19:07 Uhr

          Google zählt natürlich auch den Speed der Unterseiten, klar. Doch um korrekte Ergebnisse zu erzielen, sollte der Test immer über Amsterdam laufen. Die korrekte Ladezeit Deiner Unterseite sind demzufolge 5,61 Sekunden. Das liegt an den wesentlich zu großen Grafiken.

          Antworten
  13. Konrad Bauckmeier sagt:
    17. März 2016 um 17:45 Uhr

    Hallo Andreas,
    danke für deine Artikelserie. Ich beziehe mich auf deinen Satz „Später zeige ich dir, wie die Dateien nur dort geladen werden, wo es wirklich sein muss.“ Dazu habe ich weder hier noch im zweiten Teil etwas gefunden. In meinem Fall habe ich ein Kartenplugin und ein Kontakt-Form-Plugin installiert (wp-geo und contact form 7) und festgestellt, dass die scripte auch geladen werden, wenn sie nicht gebraucht werden (z.b. auf der Startseite gibt es weder ein Kontakt-formular noch eine Karte)
    Kann ich da was machen? Könnte der Plugin-author dagegen etwas tun?
    Gruß Konrad

    Antworten
    1. Andreas Hecht sagt:
      17. März 2016 um 17:49 Uhr

      Hi Konrad,
      habe etwas Geduld, das kommt noch. Die Serie wird noch circa drei weitere Teile haben. Da zeige ich dann, wie ich mit solchen Dingen umgehe. Und liefere dann auch eine Lösung für Nicht-Profis mit.

      Antworten
      1. Konrad Bauckmeier sagt:
        17. März 2016 um 17:51 Uhr

        Oh cool, da warte ich gern. Danke für die Information!

        Antworten
    2. Jan Wiedemann sagt:
      31. März 2016 um 15:56 Uhr

      Hallo Konrad,
      ohne Andreas jetzt vorgreifen zu wollen habe ich erste Erfahrungen mit dem WP-Plugin „GONZALES“ gemacht. Das Tool koststet nicht die Welt und funtioniert gut. LG

      Antworten
  14. Achim Schmidt sagt:
    16. März 2016 um 22:42 Uhr

    Also irgenwie paßt das nicht so recht. Ich habe, um es mal auszuprobieren, mir einen Account bei hostnet geholt und eine Site installiert. Vollkommen nackt, ohne Content und Plugins lag die Site bei72/100 und war damit schneller als 83 % aller getesteten Seiten. Dann habe ich mal das Theme gewechselt (DIVI – elegantThemes) und 80 Plugins eingespielt und aktiviert. Der Unterschied war nicht so bedeuten. Im schlechtesten Fall war die Site immer noch besser als 40 & der getesteten Seiten und kurz daruuf (ein/wei Klicks später, nichts an der Site geändert) besser als 73 und 75 % aller getesteten Seiten. Sicher, ein Unterschied. Aber gemessen an den aktivierten Plugins vertretbar, denke ich.
    Das zeigt für mich auch: Was scheinbar wirklich stört, ist der Content. Läßt man ihn weg, performt die Seite auch richtig gut. (fotonews.tv)

    Antworten
    1. Andreas Hecht sagt:
      17. März 2016 um 13:12 Uhr

      Hier geht es nicht um die Optimierung nach Punkten. Die Punkte sind mir völlig egal, selbst wenn ich nur 2/100 hätte. Mir ging es ausschliesslich darum, mit meiner Startseite in den unteren Millisekundenbereich der Ladezeit zu kommen. Also unter 500 Millisekunden Ladezeit zu haben. Und dazu muss man an vielen Ecken abspecken.

      Antworten
      1. Achim Schmidt sagt:
        17. März 2016 um 14:08 Uhr

        Ah, verstehe, dann ist ausschließlich die Load Time das, worauf du achtest.

        Antworten
  15. Andreas Hecht sagt:
    9. März 2016 um 15:01 Uhr

    Hallo Achim,
    versuche mal das »P3 (Plugin Performance Profiler)« Plugin (https://de.wordpress.org/plugins/p3-profiler/).

    Antworten
    1. Achim Schmidt sagt:
      9. März 2016 um 15:12 Uhr

      Danke

      Antworten
  16. Achim Schmidt sagt:
    9. März 2016 um 14:43 Uhr

    Hallo,
    gibt es eigenlich ein Tool, mit dem ich sehen kann, welchen Speicherbedarf ein Plugin hat oder eine andere Methode, die zu erfahren?
    Schöner Artikel, freue mich auf die nächste Folge.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.