Deine Website ist langsam? Dann tu das!

Wir kennen das doch alle. Diese Frustration, wenn eine Website einfach nicht lädt! Das ist echt nervig. Das größte Problem dabei? Man verschenkt potentielle Kunden? Wenn potentielle Kunden deine Website besuchen und sie wieder verlassen, weil sie nicht lädt, dann musst du etwas ändern! Aber … wie?!

Kein Problem. Erstmal ganz ruhig bleiben und durchatmen. Gönn dir erstmal ein bisschen Spaß und miss deine Website Performance mit diesem Tool: PageSpeed Insights.

Wenn deine Ergebnisse ungefähr so aussehen wie unten im Bild, dann kannst du diesen Beitrag getrost wieder verlassen.

Wenn du aber rote oder orangene Ergebnisse hast, dann bleib unbedingt dran. Die Ergebnisse oben im Bild stammen von meiner Website. Du kannst dir den ganzen Bericht gern anschauen.

Warum Performance wichtig für die Benutzererfahrung ist

Wenn deine Website schnell und modern ist, dann verknüpfen Nutzer diese Erfahrung direkt mit deinem Unternehmen und deiner Marke. Wenn man Buttons nicht funktionieren, die Seite benutzerunfreundlich ist und langsam lädt, dann schädigt das ebenfalls dem Image deines Unternehmens. Ich denke, das ist verständlich und ich glaube ich brauche hier keine großen Fallstudien, die genau untermaueren, dass Performance die Benutzererfahrung negativ beeinflussen kann – wie oben beschrieben: Wir kennen es doch alle.

Core Web Vitals und ihre Rolle in der SEO

Auch eine wichtige Information, bevor die Action richtig losgeht: Core Web Vitals (dazu später mehr), also die Performance deiner Website, hat einen direkten Einfluss auf dein SEO-Ranking. Das ist ganz einfach. Zum einen wird Google auch sauer, wenn das Crawling deine Website Ewigkeiten dauert, zum anderen möchte Google diese Nutzererfahrung nicht an potentielle Kunden (also “Suchende”) weiterleiten. Das Resultat? Deine Website wird nicht weit oben in den Suchergebnissen angezeigt. Außerdem fällt Google auf, wenn Leute deine Website schnell wieder nach dem Besuch verlassen – und das mag Google gar nicht.

Das ist doch ganz simpel! Wenn Google die Wahl zwischen zwei fast identischen Websites hat (gleicher Inhalt, gleiche Funktionen etc.), dann ist es doch logisch, dass die schnellere Website mit besserer Performance weiter oben angezeigt wird!

---

Was sind Core Web Vitals?

Ich habe die Core Web Vitals gerade schon erwähnt. Es gibt 3 zentrale Core Web Vitals, die dir helfen, die Performance deiner Website zu messen. Du findest ein paar diese Messpunkte auch auf deinem Bericht von PageSpeed Insights

Largest Contentful Paint (LCP)

Der Largest Contentful Paint (LCP) gibt die Zeit an, die benötigt wurde, bis der größte Text oder das größte Bild auf deiner Seite angezeigt wurde. Google (web.dev) gibt den Ergebnissen (in Sekunden) folgende Bedeutung:

LCP (in Sekunden)	Farbe/Ergebnis
0-2,5	Grün (gut)
2,5-4	Orange (mäßig)
Über 4	Rot (schlecht)

Du solltest unbedingt bei “Grün”, also “gut”, sein. Wie du deinen LCP optimierst erkläre ich dir noch.

First Input Delay (FID)

Der First Input Delay (FID) misst die Zeit zwischen der ersten Nutzerinteraktion (bspw. ein Klick auf einen Button) und dem Zeitpunkt, wenn der Browser auf dieses Ereignis reagieren kann. Der FID wird in Millisekunden gemessen. Google (web.dev) gibt den Ergebnissen folgende Bedeutung:

FID (in Millisekunden)	Farbe/Ergebnis
0-100	Grün (gut)
100-300	Orange (mäßig)
Über 300	Rot (schlecht)

Auch hier ist “gut” anzustreben. Wie du den FID verbesserst erfährst du später.

Cumulative Layout Shift (CLS)

Der Cumulative Layout Shift (CLS) misst die Bewegung von Elementen auf der Seite. Unerwartet Bewegungen von Elementen können schnell nutzerunfreundlich werden. Ich werde nicht ins Detail gehen, wie genau der CLS gemessen wird – das passt nicht in diesen Beitrag. Google (web.dev) gibt uns wieder folgende Zuordnungen zum CLS Score:

CLS Score	Farbe/Ergebnis
0-0,1	Grün (gut)
0,1-0,25	Orange (mäßig)
Über 0,25	Rot (schlecht)

Richtig gedacht! Wir streben natürlich “gut” an. Wie genau du das erreichst, wirst du noch jetzt gleich lernen.

---

Verbessern der Core Web Vitals

Du hast jetzt gelernt, warum Performance so wichtig ist und wie man die Performance misst. Aber: Wie verbessert man die Core Web Vitals denn jetzt?

Largest Contentful Paint (LCP) verbessern

Der einfachste Schritt den du machen kannst, um den LCP zu verbessern, ist “abspecken”. Das heißt: Weniger oder kleiner Dateien, weniger Datenbankabfragen, weniger CSS, weniger JavaScript, kleinere und weniger Bilder, weniger Third-Party-Tools…weniger ist mehr! Diese ganzen Dinge können die Ladezeiten deiner Seite enorm verschlechtern. Deshalb: Abspecken! Je nach dem, welche Tools du verwendest, gibt es einige einfache Schritte, die du gehen kannst. Bei WordPress hilft es beispielsweise oft, ungenutzte Plugins zu aktivieren. Achte außerdem bestenfalls darauf, Caching und ein CDN (Content Delivery Network) für Medien-Dateien zu verwenden.

First Input Delay (FID) verbessern

Du willst den FID verbessern? Abspecken! Du hast es vielleicht schon vermutet. Abspecken hilft hier wirklich. “Minimalismus”! Bei dem FID ist eine Kernmetrik die sogenannte “Total Blocking Time” (TBT). Eine hohe TBT führt zu einem hohen FID und vice versa. Die Total Blocking Time ist oft hoch, wenn viel JavaScript ausgeführt wird. Die Lösung: Menge des Codes verringern und verbliebenen Code optimieren. Viele moderne Seiten sind voll mit Third-Party-Trackern und Tools. Google Analytics, Facebook Pixel, Hotjar … die Liste ist endlos. Das ist nicht nur im Hinblick auf die Privatsphäre deiner Nutzer fragwürdig, sondern auch echt schlecht für die Ladezeiten. Erinnerst du dich noch an das bombastische Ergebnis meiner Website, das ich ganz oben genannt habe? Ja? Ich benutze exakt ein Analyse-Tool (Plausible). Und auch sonst braucht meine Website wenig bis kein JavaScript.

Cumulative Layout Shift (CLS) verbessern

Der “Layout Shift” findet oft aufgrund von Bildern statt, die keine zugewiesene Höhe oder Breite haben. Wenn du beispielsweise einen Fließtext auf deiner Website hast, in dem ein Bild ist, kann es passieren, dass dein Bild erst geladen wird, wenn der Nutzer bis dort hin gescrollt hat. Wenn du keine Größe für das Bild definiert hast, dann ist kein “Platz” für das Bild reserviert. Wenn es letztendlich geladen hat, rutscht dein Text also nach unten. Das ist nicht ziemlich nutzerfreundlich, stört den Lesefluss und stört Google. Gib deinen Bildern feste Größen! Das sollte deinen CLS Score schon erheblich verbessern.

---

Allgemeine Verbesserung der Performance

Neben den konkreten Verbesserungen der Core Web Vitals gibt es noch ein paar weitere wichtige Säulen, die die Performance deiner Website verbessern können. Ich möchte in diesem Artikel vier davon vorstellen.

Caching

Du kannst Browser-Caching und serverseitiges Caching implementieren, um die Performance deiner Website zu verbessern. Caching ist sozusagen das “Zwischenspeichern” von Abfragen und Kalkulationen, was die Ladezeiten enorm verbessern kann. Je nach System gibt es unterschiedliche Tools, die dir beim Caching helfen können. Recherchier einfach mal! Tipp: Für WordPress Websites gibt es zahlreiche Caching-Plugins.

JS und CSS

JavaScript und CSS sind essentiell für Websites, aber sie können deine Performance auch zerstören. Komprimiere diese Dateien und achte darauf, dass nur die Dateien laden, die auch wirklich auf der Seite benötigt werden!

Medien-Dateien

Es gibt ungefähr 3 Gamechanger für Medien-Dateien (primär Bilder) auf deiner Website.

1. WebP-Format: Konvertiere deine Dateien (meistens JPG oder PNG) in das Web-P Format. Dafür gibt es Online-Tools. Das WebP-Format verbessert die Performance erheblich.
2. Kleinere Bilder: Das kleine Profilbild oben rechts in der Ecke oder ein kleines Logo im Footer brauchen keine 537K Auflösung! Mach deine Bilder “kleiner”. Denk doch mal drüber nach: Wenn dein Bild 50 KB statt 3 MB einnimmt, dann ist das ein Hammer-Unterschied. Auch dafür gibt es Online-Tools.
3. Lazy Loading: Lazy Loading sorgt dafür, dass Inhalte erst geladen werden, wenn der Nutzer zu ihnen gescrollt hat. Das ist super sinnvoll! So werden am Anfang nur die Bilder geladen, die beim ersten Besuch der Seite sichtbar sind – der Rest gesellt sich dann hinzu, während der Nutzer scrollt. Recherchier einfach, das ist gar nicht so schwer!

CDN

Content Delivery Networks (CDNs) verteilen deine Website-Inhalte (Bilder, Dateien etc.) auf Servern weltweit. Das verringert die Ladezeiten enorm für Besucher aus verschiedenen Regionen.

---

Case Studies

Du bist immer noch nicht überzeugt davon, dass die Performance wichtig für eine erfolgreiche Website ist? Dann tu mir mal einen Gefallen. Lies dir diesen Artikel von Google durch: The business impact of Core Web Vitals. Wenn du ihn dir gerade nicht durchlesen willst, hier ein kurzes Fazit, was die Verbesserung der Web Core Vitals bringen kann:

• Massiv erhöhte Sitzungsdauer
• Mehr Verkäufe
• Mehr Werbeeinnahmen
• Höheres Domain Ranking
• Höhere Mobile Conversion Rate

Also, worauf wartest du noch?

---

Tools und Ressourcen

Die zentralen Tools, die du brauchst, um deine Website-Performance auf das nächste Level zu bringen, sind die folgenden.

1. PageSpeed Insights: Zum Messen deiner Performance
2. Analyse-Tool wie Plausible: Zum Feststellen der Auswirkung deiner Performance-Verbesserungen

Mehr brauchst du nicht!

---

Fazit

Du hast in diesem Blog-Artikel gelernt, wie wichtig die Website Performance ist. Eine gute Performance führt zu mehr Verkäufen, besserem SEO-Ranking, höherer Nutzerzufriedenheit etc. Vielen Dank, dass du diesen Artikel bis zum Ende gelesen hast! Wenn du Fragen oder Feedback hast, schreib mir doch gern eine Nachricht!

Also: Worauf wartest du noch? Überprüfe deine Website-Performance und verbessere sie noch heute!