Ladezeiten optimieren, wie geht das?

So optimierst Du Deine Website für bessere Core Web Vital Signale!

Die Geschwindigkeit ist für die meisten Internetnutzer ein sehr wichtiges Qualitätskriterium, wenn es um die Beurteilung eines Onlineshop geht. Wenn der Inhalt einer Webseite nicht schnell lädt, findet sich garantiert ein schnellerer Anbieter nur einen Klick entfernt. Dabei kann man mit nur ein paar kleinen Kniffen, der eigenen Webseite Beine machen. Ich zeige hier, wie es funktioniert.

Warum sollte eine Website schnell laden?

Lange Ladezeiten sind nicht gut für das Geschäft. Eine Studie von Google fand heraus, dass die Ladezeiten einer Website massiv das Kaufverhalten beeinflussen. Eine Optimierung der Ladezeit von 7 Sekunden runter auf nur 1 Sekunde halbiert die Absprungrate![1]

Eine geringe Absprungrate führt zwar automatisch nicht zu mehr Verkäufen, aber sie ist eine Grundvorraussetzung dafür. Denn nur wer mein Angebot sieht kann es auch kaufen.

Neben diesen offensichtlichen Grund, warum die Ladezeit wichtig ist, gibt es noch einen weiteren. Google erhebt den “Pagespeed” zu einem offiziellen Rankingfaktor, und das schon seit 2010![2] Aber erst im Januar 2018 haben sie diesen Fakt nochmal betont und uns daran erinnert, dass die Ladezeiten speziell für den Mobilen Index an Gewichtung zunimmt.[3] Wenn Du also ein besseres Ranking haben möchtest, solltest Du Deine Hausaufgaben machen und auch Deine Ladezeiten optimieren.

Core Web Vitals was ist das?

Seit mitte Juni 2021 sind die Core Web Vitals  (CWV) ein Rankingfaktor.[4] Seiten mit gute Core Web Vital Signalen sollten dann also auch mit einem besseren Ranking belohnt werden. Im Prinzip ist es eine Erweiterung des Thema Ladezeiten, den neben der Geschwindigkeit liegt hier der Fokus auf Nutzerfreundlichkeit. Google hat hier zur Messbarkeit drei Kernwerte definiert, die man als Webmaster in der Google Search Console einsehen kann und mi dem Googe Pageseepd Tool testen kann.

Largest Contentful Paint (LCP): Dies LCP misst die Dauer des Ladevorgangs, bis die Hauptinhalte der Webseite geladen sind.  2,5 Sekunden oder schneller vor sind hier der Idealwert.

First Input Delay (FID):  Dieser Wert beschreibt die Zeitspanne von der ersten Interaktion eines Users mit einer Seite (z.B. der Klick auf einen Link) bis zu dem Zeitpunkt, an dem der Browser eine Reaktion auf diese Interaktion zeigt.

Cumulative Layout Shift (CLS): Die CLS misst, wie stabil das Layout einer Webseite ist und ob sich einzelne Layout-Elemente während der Nutzung verschieben. Ein Wert von 0,1  gilt hier als ideal.

Checkliste für die Ladezeitoptimierung

Genug der Argumentation! Du bist hier, und das ist gut so! Es ist Dein erster Schritt zu einer besseren Website. Die Chechkliste erläutert Dir meine Vorgehensweise bei der Ladezeitoptimierung und kann als Hilfe zur Selbsthilfe dienen. Wenn Du jedoch keine Zeit dafür oder keine internen Ressourcen dafür übrig hast, kannst Du mich auch gerne engagieren. ;-)

1. Flaschenhals identifizieren

Dein Bauchgefühl hat Dich auf meine Website gebracht. Irgendetwas stimmt nicht mit Deiner Webseite oder Onlineshop. Alles funktioniert, die Seite sieht toll aus und auch das bisherige Kundenfeedback war positiv, aber trotzdem will Dein Shop nicht so richtig konvertieren? Ein erster Blick auf Dein Webanalyse-Tool zeigt Dir, dass Du eine hohe Absprungrate hast. Aber warum die Besucher Deine Seite verlassen, geht zunächst einmal nicht daraus hervor. Wie uns die Grafik oben zeigt, gibt es einen Zusammenhang zwischen Ladezeiten und Absprungrate. Meistens gibt es auf den Weg zu Deinem Besucher einen “Flaschenhals” oder gleich mehrere. Das ist einmal die  Internetgeschwindigkeit des Nutzers und es können diverse “Flaschenhälse” auf der eigenen Serverseite liegen, oder wenn Deinen Webseite Ressourcen von Drittanbietern nutzt, kann dort eine Ladezeitenbreme versteckt sein.

Nutze hierfür Tools um die aktuelle Ladezeit Deiner Website zu messen. Ich kann dir diese Online-Tools wärmstens empfehlen:

1. https://tools.pingdom.com/fpt/
2. https://www.webpagetest.org/
3. https://gtmetrix.com/
4. https://developers.google.com/speed/pagespeed/insights/

Neben diesen Online-Tools für die Ladezeitenmessung könnt ihr auch euren eigenen Browser nutzen. In diesem Video zeige ich euch schnell, wie es geht.

2. Web-Ressourcen optimieren

Unter Web-Ressourcen verstehe ich alle Dateien, die auf Eurer Website eingebunden sind. Das können Bilder sein, Videos, aber auch Javascript-Dateien und CSS-Dateien, die für Euer Webdesign wichtig sind.  Ein Klassiker für lange Ladezeiten sind, zu große Bilder. Häufig bekomme ich dann die Frage, welches Bilderformat denn richtig sei?  Die Antwort auf diese berechtigte Frage ist gar nicht mal so einfach. Denn die Größenformate sollten mehrfach vorhanden sein, um eine optimale Darstellung auf allen Geräten zu gewährleisten.  Das hängt einmal ganz stark von Eurem Theme ab, dass Ihr einsetzt und von Eurem CMS. WordPress generiert automatisch verschiedene Größenformate von Euren Bildern.

Standardbildergrößen in WordPress einstellen

In diesem Video zeige ich Dir schnell, wie Du die Standardbildergrößen von WordPress verändern kannst.

Welche Größenformate nutzt mein Theme?

Ja, eine andere Reihenfolge wäre vielleicht sinnvoller. :-)

In diesem Video zeige ich kurz, wie Ihr die Bilderformate Eures Themes herausfindet.

Anmerkung

Testet die Größenformate auch mit unterschiedlichen Auflösungen und verkleinert auf mal das Browserfenster auf Smartphone-Größe. Die drei Standardgrößen können manchmal auch nicht ausreichen und Ihr braucht mehr Größenformate.

Tipp: Bilder vor den Upload komrpimieren!

Bevor ich meine Bilder hochlade, schaue ich neben den passenden Größenformaten immer auch, dass die Dateigröße komprimiert ist. Dafür kann ich Euch den Dienst https://tinypng.com/ empfehlen. Sicherlich gibt es auch Plugins, für WordPress, die Euch diese Arbeit automatisieren können. Aber bedenkt, dass es wieder ein Plugin mehr ist, und dieses damit auch, auf die Ladezeit gehen kann.  Je weniger Plugins, desto weniger Möglichkeiten für Flaschenhälse und weniger Sicherheitsrisiken. Außerdem, ein Plugin was nicht eingesetzt wird, muss auch nicht upgedated werden.

Ab der WordPress version 5.8 wird auch das moderne Bildformat Webp unterstützt. Für WordPress gibt es mittlerweile viele Plugins mi tdnene man ältere Bildformate in das neue Bildformat webp konvertieren kann. Wer also das moderen Webp-Format nutzt solte bei den Core Web Vital Test vonGoogl ezumindest keien Probleme bekommen.  Auf https://convertio.co/de/webp-jpg/ kann man auch ohne Plugin einzelen Bilder konvertieren.

Warum also die passende Größe zum Theme ausliefern?

Du fragst ich bestimmt, warum Du diesen Aufwand machen solltest? Nun es ist ja so, wir wollen ja unseren Nutzern die bestmögliche Nutzererfahrung liefern und die Ladezeiten verkürzen. Wenn Ein Bild jetzt aber größer ist als es Dein Theme erfordert, verschenkst Du Einsparpotenzial bei der gesamten Websitegröße. Zudem muss der Browser das Bild runterskalieren, so dass die Anzeige passt, was auch wieder in paar Millisekunden mehr kostet.

Video-Vorschaubilder anstatt Videos direkt einbinden!

Häufig sehe ich, dass zum Beispiel eingebettete Videos, zum Beispiel von Youtube, einen Flaschenhals darstellen. Ganz einfach weil im Hintergrund, und  für den Nutzer nicht sichtbar, noch eine Menge andere Ressourcen extern geladen werden. Das können zum Beispiel Tracking-Codes, Cookies und weiterer Ballast sein, den wir eigentlich nicht haben wollen.  Die Lösung kann hier sein, dass Ihr das Video selber hostet ohne diesen verstecken Ballast. Oder Ihr bindet anstatt des Videos, ein Vorschaubild ein, das auf Knopfdruck, das Video in einem Neuen Fenster lädt.

3. Externe Ressourcen vermeiden

Richtig ärgerlich ist es, wenn Ihr selber alles richtig auf Eure Webseite macht, sie sehr schnell laden könnte, Ihr aber auf externe Ressourcen angewiesen seid. Zum Beispiel wollt Ihr Eure Website mit Werbung finanzieren und bindet dafür  einen Werbe-Code ein, der die Werbebanner von einem Ad-Server lädt.  Wenn dieser Server Euch keinen asynchronen Javascript-Code liefert, seid ihr geliefert. Nichts bremst eine Webseite mehr aus als langsamer Code, der von Außen geladen werden muss. Häufig empfiehlt es sich diesen Javascript-Code am Ende der Seite zu laden, damit sich wenigstens der Content der Webseite für den Nutzer schnell aufbaut. Aber auch das funktioniert nicht immer. Bestimmter Javascript Code muss zwingend immer im “Head” einer Webseite hinterlegt sein.  Sogar die Google Services, wie z. B. Google Adsense, Doublecklick  und Google Analytics, bremsen den Seitenaufbau.

4. Ressourcen bündeln und minimieren

Wenn Ihr bestimmte Ressourcen nicht vermeiden könnt, versucht diese dann zu minimieren und zu bündeln. Viele WordPress Plugins bedeuten meist auch viele CSS-Dateien und viele Javascript-Dateien. Die besseren Plugins erlauben das Einbinden von einer “Custom-CSS-Datei” (Angepasste CSS-Datei). Ihr könntet also hingehen, und die Standard-CSS-Dateien Eurer Plugins in nur einer großen CSS-Datei bündeln. Das Gleiche könntet Ihr auch für die Javascript-Dateien machen. Allerdings solltet Ihr hier vorsichtig sein. Denn eine Bündelung kann das Verhalten Eurer Website unter Umständen maßgeblich beeinflussen. Es kann sein, das zum Beispiel bestimmte Buttons oder Naviationselemente nicht mehr so funktionieren, wie sie es eigentlich sollten.

Deswegen solltet Ihr immer die Funktionalität Eurer Webseite nach so einer Maßnahme, immer ausführlich testen. Manche Scripte oder CSS Anweisungen stören sich eben, wenn sie in nur einer Datei aufgeführt werden. Das ist auch ein Grund, warum nicht jedes “Speed-Plugin”, ein Laie mal eben installieren und nutzen sollte. Man muss hier mit Augenmerk bestimmte CSS und Javascripte-Dateien auswählen. Das Ganze gleicht einem Drahtseilakt, wenn man hier ein vernünftiges Ergebnis erzielen möchte.

Deswegen lautet hier immer meine erste Empfehlung in sich inne zu gehen, um sich wirklich zu fragen, ob man nicht das eine oder andere Plugin braucht?  Wer von euch versierter ist, könnte auch bestimmte Plugin-Funktionalitäten direkt in die Theme-Funktionalität unterbringen.

5. Erstelle eine statische HTML Seite

Wenn Deine WordPress Website eher statisch ist und nur unregelmäßig erneuert werden muss, kannst Du Deine Ladezeiten extrem beschleunigen, indem Du eine statische HTML Seite von Deiner Website erstellst. Ich möchte behaupten, in 80 % aller Fälle ist da seine sehr gute Lösung! Ich habe weiter unten ein passendes Plugin verlinkt, dass aus Deiner dynamischen Website dir eine statische HTML Website erstellt. Das Plugin erstellt echte Ordner auf dem Webserver und speichert darin die HTML Seite ab. Wenn Du also auf dynamischen Inhalt, wie zum Beispiel Benutzerkommentare verzichten kannst, ist das eine sehr gute Lösung für Dich.

Weiterer Vorteil einer statischen Website ist, dass diese auch sicherer gegenüber Script-Attacken ist, da ja nur eine statische HTML-Seite abgerufen wird.

Nachteil ist, wenn Du Deinen Inhalte regelmäßig überarbeitest, oder neue Inhalte hinzufügst, musst Du das Plugin eine neue statische Version erstellen lassen. Du kannst aber auch nur bestimmte Inhalte in statische HTML Seiten umwandeln. So habe ich das für meine Seite gemacht. Ich habe mir bestimmte Inhalte ausgesucht, wo ich mir relativ sicher bin, dass ich diese Inhalte nicht verändern werde und davon eine statische HTML Version erstellt.

Ladezeiten optimieren mit  WordPress Plugins

Auch wenn ich allgemein zur Plugin-Sparsamkeit rate, gibt es durchaus Plugins, deren Einsatz ich befürworte. Im Folgenden führe ich euch ein paar nützlich WordPress Plugins auf, mit den ich gute Erfahrungen bei der Ladezeitoptimierung gemacht habe.

 Caching-Plugins als Allround-Waffe im Kampf um schnelle Ladezeiten

Diese Cache-Plugins bieten Allround-Lösungen rundum die Ladezeitoptimierung.

1. WP-Super Cache
2. WP-Rocket (kostenpflichtig)
3. W3 Total Cache

Plugins zur CSS- & Javascript Datei Komprimierung

Diese Plugins habe ich selber im Einsatz auf mehreren Webseiten. Wer gute Alternativen kennt, kann sie gerne ein den Kommentare posten.

1. WP Minify
2. WP Super Minify

Weitere Plugins zur Ladezeitoptimierung

1. WP Optimize – Optimiert die Datenbank und befreit diese von Ballast
2. Remove Query Strings From Resources – Entfernt Versionsbezeichungen von Plugin URLs
3. WP-Webp Plugin  – Unterstützt das datensparsame Bildformat Webp
4. AMP for WP – Accelerated Mobile Pages – Bietet für den Mobile Index eine AMP Seite an.
5. WP Static HTML Output – Erstellt eine statische HTML Seite von deiner dynamische generierten Seite.
6. Autoptimize
7. Async JavaScript

Fazit

Weniger technisch versierte Nutzer sollten sich zu erst die eigenen Bilder genau anschauen, ob diese auch im richtigen Format genutzt werden und ob diese auch richtig komprimiert sind. Wenn man gleich ach schon dabei ist, kann man sie auch gleich für die Google Bildersuche optimieren, falls dies noch nicht geschehen ist. Wer sich ein wenig mehr zutraut sollte einen Blick auf die genutzten Plugins werfen und gegebenenfalls deaktivieren oder gegen eine ladezeitenfreundlichere Variante austauschen. Auch die Nutzung eines Caching-Plugins trägt zu Verbesserung der Ladezeiten bei. Diese sollten aber auch eher Nutzer einrichten, die genau wissen, was sie da machen, ansonsten könnte der versuch nach hinten losgehen.

Quellenangaben:

• https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/[1]
• https://webmasters.googleblog.com/2010/04/using-site-speed-web-search-ranking.html[2]
• https://webmasters.googleblog.com/2018/01/using-page-speed-mobile-search.html[3]
• https://developers.google.com/search/blog/2020/11/timing-for-page-experience?hl=de