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.
37 Antworten
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.
Hallo Achim,
versuche mal das »P3 (Plugin Performance Profiler)« Plugin (https://de.wordpress.org/plugins/p3-profiler/).
Danke
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)
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.
Ah, verstehe, dann ist ausschließlich die Load Time das, worauf du achtest.
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
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.
Oh cool, da warte ich gern. Danke für die Information!
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
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.
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.
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.
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.
Bei welchem Hoster befindet sich eigentlich democraticpost? Hostnet?
Ja, hostNet. Der im Artikel angesprochene Server.
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
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.
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”?
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.
Auf alle Fälle ein sehr interessanter Artikel. Genau daran muss ich arbeiten…
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
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.
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
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
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.
Sehr umfangreicher und Guter Beitrag. Da habe ich ne Menge arbeit vor mir.
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
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.
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 😉
Mit eines der wichtigsten Dinge ist gar nicht genannt: die Wahl des richtigen Themes.
Das legt den Grundstein für die Performance.
Mit einem schwerfälligen Multi-Purpose-Theme (wie im Artikel erwähnt 😉 bist du natürlich von Beginn an benachteiligt, was die Ladezeiten betrifft. Allerdings sind selbst erstellte Themes nicht automatisch besser, meiner Erfahrung nach. Auch die können langsam sein und sind zum Teil sogar schwieriger zu optimieren als ein normales Standard-Theme. Immer ja nachdem, wie gut und systematisch die Entwickler bei der Theme-Entwicklung vorgegangen sind.
Glaube, Tim meint nicht “selbst erstellte Themes”, sondern professionell hergestellte, schlanke, schnelle Themes ohne Ballast. Das hilft schon viel.
Leider geht das nicht immer, ich betreue zB. Medienportale, die selbst mit den vielen Funktionen und umfangreichen Darstellungsformen von großen Magazin-Themes nicht auskommen. Denen kann man leider kein GeneratePress oder wie das heißt geben …
Genau wie Rainer Zufall 😉 sagt,
viele suchen sich schöne, flippige und vor allem überladene Themes aus. Kommt dann mit dem Ballast eines Schweizertaschenmessers und brauchen aber nur ein Messer.
Es gibt einige sehr gute Themes, die schlank und leicht sind, womit man aber Design und Funktionell alles hinbekommt.
Danke für die hilfreichen Tipps. Das meiste war mir bekannt aber eben nicht alles. Wieder was gelernt!
Die WordPress Performance wird wohl noch lange ein Thema bleiben. Eigentlich nervig…
In der kommenden Version 6.3 soll es ja wieder einige Verbesserungen geben.
Vielleicht bringt ja WP mal einen Cache im Core mit. Oder gleicht mit Static Site Generator.