Wissen über Webgeschwindigkeit: praktische Lösungen
Die Webgeschwindigkeit hat sich in den letzten Jahren von einer technischen Kuriosität zu einem vollwertigen Fachgebiet entwickelt. Sie beeinflusst Konversionen, SEO und Werbekosten und verfügt über eigene Metriken (Core Web Vitals), Werkzeuge und Konferenzen. Aber wie behält man in all dem den Überblick?
Bei PageSpeed.ONE haben wir im Laufe der Jahre Beratungsverfahren entwickelt, die sich immer wieder bewährt haben. Wir stellen sie hier in Form von Artikeln, Fallstudien und Checklisten zur Verfügung. Ohne theoretische Abhandlungen, mit konkreten Zahlen und Vorgehensweisen.
Wählen Sie ein Thema aus, das Sie praktisch angehen möchten:
Warum Seitengeschwindigkeit?
Psychologie, Konversionen und Google. Warum auch Sie eine schnelle Website haben sollten.
Warum Überwachung?
Gelegentliche Geschwindigkeitsmessungen reichen nicht aus. Ohne kontinuierliche Überwachung der Webgeschwindigkeit bleiben versteckte Probleme unentdeckt, es fehlt eine Datenhistorie zur Analyse, und Trends, die Ihrer Website Besucher und Conversions kosten können, werden leicht übersehen.
LCP-Element
Für die Optimierung von LCP ist es entscheidend, das „LCP-Element“ zu identifizieren, welches das größte Element im sichtbaren Bereich des Browsers darstellt.
CLS-Optimierung
Lassen Sie uns gemeinsam erkunden, wie Sie CLS-Problemen vorbeugen können und wie Sie diese beheben, wenn sie auftreten.
LCP-Optimierung
Lassen Sie uns gemeinsam die Herausforderungen der Largest Contentful Paint (LCP)-Metrik erkunden und lernen, wie man diese am effektivsten optimiert.
INP-Optimierung
INP ist nicht gerade die einfachste Metrik zur Optimierung. Daher haben wir aus unserer Praxis die häufigsten Probleme und Lösungsansätze ausgewählt.
BFcache
Der Back/Forward-Cache (oder BFcache) ist eine Browseroptimierung, die eine sofortige Vor- und Zurück-Navigation ermöglicht. Sie verbessert das Surferlebnis erheblich, insbesondere für Benutzer mit langsameren Netzwerken oder Geräten.
Gzip und Brotli Kompression
Bei PageSpeed.ONE widmen wir uns oft sehr spezifischen Problemen. Dennoch bin ich immer wieder erstaunt, in welche Details wir eintauchen. So auch bei der Datenkompression, die wir in diesem Artikel beleuchten.
Navigationsarten
Die verschiedenen Navigationsarten zu kennen ist entscheidend, da einige deutlich schneller sind als andere. Ziel der Webgeschwindigkeitsoptimierung ist es, so viele Nutzer wie möglich auf schnelle Navigationsarten zu lenken.
Speculation Rules
Das Speculation Rules API bietet uns die Möglichkeit, eine andere Seite vorzuladen oder sogar vorab zu rendern. Auf diese Weise können wir ein nahezu sofortiges Laden der Seite, zu der der Benutzer wechselt, erreichen und so das Gesamterlebnis auf der Website verbessern.
Cloudflare
Cloudflare fungiert als Vermittler zwischen Ihrer Website und deren Besuchern. Im Gegensatz zu einem üblichen CDN (Content Delivery Network) ist es nicht nur ein System zur Verteilung von Bildern und Dateien.
Optimierung von Webfonts
Die Welt der Webfonts gleicht einem Schönheitssalon – jeder möchte das Beste erleben, doch kaum jemand ist bereit, auf das Werk des Friseurs zu warten. Und Ihre Besucher? Die sind besonders ungeduldig.
Optimierung des DOM
Eine große und ineffiziente Seitenstruktur (Document Object Model, also DOM) kann Ihre Website erheblich verlangsamen und die Core Web Vitals negativ beeinflussen. Ihre Struktur auf eine vernünftige Größe zu reduzieren und sie maximal effizient zu gestalten, ist absolut entscheidend für die gesamte technische Leistung Ihres Projekts und wird sich auf die Reaktionsgeschwindigkeit von Interaktionen (INP-Metrik) auswirken.
Lazy Loading von Bildern
Das verzögerte Laden von Bildern und anderen Elementen empfehlen wir als eine der grundlegenden und gleichzeitig sehr effektiven Methoden zur Optimierung der Seitenladegeschwindigkeit. Wir empfehlen Ihnen, das Laden aller Bilder außerhalb des ersten Viewports konservativ zu verzögern. Achten Sie darauf, das verzögerte Laden nicht auf Bilder anzuwenden, die das LCP-Element sind, da dies die Geschwindigkeit verschlechtern kann.
CLS: Wie Höhe beibehalten?
In diesem Text erfahren Sie, warum und wie Sie auf HTML- oder CSS-Ebene die Abmessungen von Elementen sicherstellen müssen, die asynchron in die Seite eingefügt werden, wie z.B. <img>, <iframe> oder JavaScript-Komponenten.
Web Vitals im Browser
Core Web Vitals sind Metriken, die wir zur Bewertung der Leistung von Websites in Bereichen wie Ladegeschwindigkeit, Interaktivität und Layout-Stabilität verwenden. Diese Metriken werden immer wichtiger, um eine gute Benutzererfahrung sicherzustellen, und Google nutzt sie als einen der Faktoren für die Platzierung in den Suchergebnissen.
INP und setTimeout()
Die Verwendung der Funktion setTimeout() dient der Optimierung langer Aufgaben in JavaScript, die Benutzerinteraktionen blockieren und dadurch Metriken wie Total Blocking Time (TBT) oder Interaction to Next Paint (INP) verschlechtern, welche ein wesentlicher Bestandteil der Core Web Vitals sind.
Bildoptimierung
Auch Sie, einfache Sterbliche, können Ihre Bilder zähmen und sie dazu bringen, für Sie zu arbeiten, nicht gegen Sie. Verwenden Sie einfach WebP oder AVIF, komprimieren Sie gut und vergessen Sie nicht das Lazy Loading.
Reakt-Optimierung
React ist ein beliebtes Werkzeug für die Entwicklung moderner Websites, aber Geschwindigkeit und Interaktivität sind nicht immer selbstverständlich. In diesem Artikel stellen wir zentrale Techniken zur Optimierung der Core Web Vitals vor – von Hydration über <Suspense> bis hin zur Arbeit mit dem DOM – und zeigen Ihnen, wie Sie diese nutzen können, um Ihre React-Projekte zu beschleunigen.
Optimierung Vue.js/Nuxt.js
Verbessern Sie die Geschwindigkeit Ihrer Vue.js-Website mit SSR, Lazy Loading und weiteren Tipps. Höhere Leistung bedeutet zufriedenere Nutzer und bessere Konversionen.
Backend-Optimierung
Das Backend spielt eine entscheidende Rolle bei der Optimierung der Webgeschwindigkeit, da eine korrekte Optimierung von Code und Server Verzögerungen eliminieren kann, die häufig bei der Verarbeitung von Anfragen und der Bereitstellung von Inhalten auftreten.
Optimierung der WordPress-Geschwindigkeit
Die Geschwindigkeit einer Website ist nicht nur ein kosmetisches Detail – sie ist ein entscheidender Faktor, der den Erfolg Ihres Online-Geschäfts beeinflusst. Eine langsame WordPress-Website ist oft das Ergebnis einer schlechten Plugin-Auswahl, aufgeblähter Themes oder mangelnder Kenntnisse zur Webgeschwindigkeitsoptimierung.
Shoptet-Optimierung
Shoptet ist schnell, sofern man es nicht ausbremst. Wir zeigen, wie man die Geschwindigkeit optimiert: was schadet, was hilft und wie man seinen Shop im Blick behält.
Cookie-Leisten und Geschwindigkeit
Haben Sie die Geschwindigkeit Ihrer Website optimiert? Hervorragend, aber vielleicht haben Sie die Cookie-Leiste noch nicht implementiert.
„HTML <head> und Geschwindigkeit“
„WebExpo und Performance sind Ihre Leidenschaft. Und wir schätzen Harry Roberts, denn seine Vorträge und Artikel sind immer tiefgründig.“
WebP-Bilder
Die Ladegeschwindigkeit einer Website ist oft eine Frage von Sekunden. Das Bildformat WebP könnte Ihre geheime Waffe sein, um Kilobyte zu sparen und sich der perfekten Performance anzunähern.
AVIF-Bilder
Das AVIF-Format bietet noch bessere Kompression als WebP. Schauen wir uns an, wann es sinnvoll ist, es zu verwenden und wie man einen Fallback für ältere Browser implementiert.
Studie: Chats und Geschwindigkeit
Live-Chat wird von zwanzig Prozent der Betreiber tschechischer E-Shops genutzt. Aber wie beeinflussen diese Komponenten die Geschwindigkeit der Website?
Studie: CSS – eine oder mehrere?
Im Team von PageSpeed.ONE gibt es einige „evergreen“ Diskussionen, bei denen sich das gesamte Team nicht einig ist. Eine der ewigen Fragen lautet: Ist es schneller, viele kleine CSS-Dateien, aufgeteilt nach Komponenten, zu haben, oder eine große?
Synth vs. CrUX vs. RUM
Lassen Sie uns die Unterschiede zwischen den verschiedenen Arten der Messung der Webgeschwindigkeit klären. Wir sprechen über Synthetik („synth“), Daten von Google-Nutzern („CrUX“) und Daten von allen Nutzern („RUM“).
Chrome UX Report (CrUX)
Der Chrome UX Report (CrUX) ist ein öffentliches Datenset von Google, das Daten zur realen Nutzererfahrung beim Surfen mit dem Chrome-Browser sammelt und anonym analysiert.
Google Search Console
Wie man in der Google Search Console die Daten zur Webseiten-Geschwindigkeit und Core Web Vitals liest. Ein praktischer Leitfaden für Entwickler, Marketer und Webseitenbetreiber: wo man Berichte findet, wie man sie richtig interpretiert und was GSC nicht kann.
Performance-Budgets
Performance-Budgets sind eine Methode, um die Geschwindigkeit von Webseiten auf einem festgelegten Niveau zu halten. Stellen Sie sich ein „Budget“ als Grenzwert für verschiedene Metriken vor.
Lighthouse Diff
Lighthouse Diff ist ein Tool zum visuellen Vergleich zweier Lighthouse-Berichte. Es hilft, genau zu erkennen, was sich auf der Website geändert hat – vom Gesamtscore über die Metriken bis hin zu den einzelnen Empfehlungen.