10 Top-Tipps zur Verbesserung der Geschwindigkeit Ihrer Website
Dieser Beitrag wurde von DebugBear gesponsert. Die in diesem Artikel geäußerten Meinungen sind die eigenen des Sponsors.
Möchten Sie eine Website, die bei Google einen hohen Rang einnimmt und gute Conversions erzielt?
Für eine gute Benutzererfahrung ist es wichtig, dass Ihre Seiten schnell geladen werden.
Und die drei von Google eingeführten Core Web Vitals-Metriken sind seit einigen Jahren ein Ranking-Signal.
Sie sind sich nicht sicher, wie Sie die Optimierung Ihrer Core Web Vitals angehen sollen? Dieser Artikel bietet 10 Tipps zum Vorgehen bei der Optimierung der Seitengeschwindigkeit und was Sie tun können, um einige der häufigsten Probleme zu beheben.
1. Verwenden Sie die Google Search Console, um zu prüfen, ob die Seitengeschwindigkeit Auswirkungen auf Ihre SEO hat
Die Google Search Console enthält einen High-Level-Core-Web-Vitals-Bericht, der Ihnen sagt, ob es Seiten auf Ihrer Website gibt, die hinsichtlich der Geschwindigkeit optimiert werden müssen. Google sammelt diese Seitengeschwindigkeitsdaten von echten Chrome-Nutzern.
Sie können im Abschnitt „Warum URLs nicht als gut angesehen werden“ auf die einzelnen Probleme klicken und herausfinden, welche Seiten von dem Problem betroffen sind.
Beachten Sie, dass die Search Console ähnliche Seiten gruppiert, sodass beispielsweise der Largest Contentful Paint (LCP)-Wert für die „Beispiel-URL“ nicht unbedingt mit dem Gesamtwert „Group LCP“ übereinstimmt.
2. Führen Sie einen kostenlosen Seitengeschwindigkeitstest durch
Durch die Durchführung eines Online-Website-Geschwindigkeitstests erfahren Sie, wie schnell Ihre Website lädt, können die Seitengeschwindigkeit besser verstehen und geben Empfehlungen zur Verbesserung. Geben Sie einfach die URL Ihrer Website ein, um einen Bericht zu erstellen.
Sie können auf jede Metrik klicken, um mehr darüber zu erfahren, welche Faktoren den Metrikwert beeinflussen. Beispielsweise können viele Meilensteine beim Laden von Seiten erklärt werden, indem man sich eine Anforderungswasserfall-Visualisierung ansieht, die zeigt, wann der Ladevorgang verschiedener Seitenressourcen beginnt und endet.
Mit der Filmstreifenansicht oben im Wasserfall können Sie die Ereignisse im Netzwerk mit dem in Beziehung setzen, was Ihre Besucher sehen können.
Sie können die Leistung Ihrer Website auch anhand der CrUX-Daten (Chrome User Experience Report) realer Benutzer sehen. Dies sind die Daten, die Google als Ranking-Signal verwendet.
Schließlich finden Sie unten auf der Registerkarte „Übersicht“ Empfehlungen zur Seitengeschwindigkeit, die speziell auf Ihre Website zugeschnitten sind.
3. Beobachten Sie, wie Ihre Website Bild für Bild gerendert wird
Wenn Sie Ihre Website über eine schnelle Netzwerkverbindung laden, dauert der Ladevorgang wahrscheinlich ein oder zwei Sekunden. Zu schnell, um wirklich zu sehen, was Schritt für Schritt vor sich geht.
Mithilfe der Netzwerkdrosselung in Chrome DevTools können Sie sehen, wie Ihre Website bei einer langsameren Verbindung geladen wird. Sie können beobachten, wie Inhalte nach und nach angezeigt werden, und dieses Verständnis des Ladevorgangs bei Ihren Optimierungsbemühungen nutzen.
Befolgen Sie diese Schritte, um Ihre Website über eine langsamere Verbindung zu laden:
- Klicken Sie mit der rechten Maustaste auf die Seite und klicken Sie auf „Inspizieren“.
- Öffnen Sie die Registerkarte „Netzwerk“.
- Öffnen Sie das Dropdown-Menü „Keine Drosselung“ und wählen Sie „Schnelles 3G“.
- Die Seite erneut laden.
Im folgenden Beispiel können Sie Folgendes sehen:
- Die Seite wird mit einem statischen Hintergrund gerendert, bevor das Hintergrundbild erscheint.
- Zunächst wird eine Fallback-Schriftart verwendet, bis die Web-Schriftart geladen ist.
- Das Bild in der Mitte erscheint zuletzt.
Videoaufzeichnung des Rendervorgangs einer Website in DebugBear, Oktober 2023
Sie können auch den kostenlosen DebugBear-Test verwenden, um den Rendervorgang Bild für Bild zu durchlaufen. Oder laden Sie die Aufzeichnung als MP4 mit einem kostenpflichtigen DebugBear-Abonnement herunter.
Videoaufzeichnung des Rendervorgangs einer Website in DebugBear, Oktober 2023
4. Konzentrieren Sie sich auf die wichtigsten Web-Vitalwerte statt auf Ihren Lighthouse-Score
Das Lighthouse-Tool von Google wird häufig zum Testen der Website-Leistung verwendet. Es ist einfach zu bedienen und liefert eine Reihe umsetzbarer Empfehlungen zur Verbesserung Ihrer Website.
Der Lighthouse Performance Score ist jedoch kein SEO-Ranking-Signal. Viele Websites haben einen schlechten oder durchschnittlichen Lighthouse-Score, schneiden aber bei allen drei Core Web Vitals-Metriken in den echten Benutzerdaten, die sich auf das Ranking auswirken, gut ab.
Lighthouse eignet sich gut zum Testen Ihrer Website in einer festen Umgebung und ermöglicht es Ihnen, Vorher- und Nachher-Tests auf Ihrer Website durchzuführen, bevor aktualisierte echte Benutzerdaten verfügbar sind. Aber was letztendlich zählt, ist, wie Ihre tatsächlichen Besucher Ihre Website erleben.
5. Optimieren Sie Render-Blocking-Ressourcen
Renderblockierende Ressourcen sind Dateien, die auf Ihre Website geladen werden müssen, bevor Browser dem Benutzer Inhalte anzeigen können. CSS- und JavaScript-Dateien auf der Seite
blockiert häufig das Rendern.
Hier ist ein Beispiel für einen Anforderungswasserfall, der zeigt, wie sich Rendering-blockierende Dateien auf den Rendering-Prozess Ihrer Website auswirken.
- Der Browser startet mit einer leeren Seite.
- Das HTML-Dokument wird geladen.
- Es werden mehrere Render-blockierende Ressourcen geladen (wir konzentrieren uns auf app.css als größte und langsamste Datei).
- Sobald app.css geladen ist, wird die Seite gerendert (wie durch die orangefarbene CPU-Aufgabe im Wasserfall angezeigt).
- Schließlich wird der Seiteninhalt in der Filmstreifenansicht sichtbar.
Das Laden vieler Ressourcen, die das Rendern blockieren, führt dazu, dass der Seiteninhalt langsamer angezeigt wird, und beeinträchtigt Ihren Wert für „Größter Contentful Paint“.
Verbessern Sie die Antwortzeit des Servers
Das Laden des ursprünglichen HTML-Dokuments ist der erste Schritt zum Laden einer Website. Die TTFB-Metrik (Time to First Byte) misst, wie schnell Ihr Webserver auf eine Anfrage für diese Ressource reagiert.
Reduzieren Sie die Anzahl der Rendering-blockierenden Anforderungen
Der beste Weg, das Laden Ihrer Website zu beschleunigen, besteht darin, die Anzahl der Ressourcen zu reduzieren, die das Rendern blockieren. Wenn eine Datei zum Starten des Renderns von Inhalten nicht erforderlich ist, sollte sie das Rendern nicht blockieren.
Beispielsweise teilen die Schlüsselwörter „defer“ und „async“ im Skript-Tag dem Browser mit, dass eine JavaScript-Datei geladen werden soll, die Seite jedoch vorher mit dem Rendern beginnen kann.
Laden Sie Render-blockierende Ressourcen schneller
Um die Zeitspanne, in der das Rendern blockiert wird, so kurz wie möglich zu halten, können Sie die Größe der das Rendern blockierenden Dateien reduzieren, um den Download zu beschleunigen.
Das Laden dieser Ressourcen von derselben Website-Domäne wie das HTML-Dokument beschleunigt auch diese Anfragen, da keine zusätzlichen Webserververbindungen erforderlich sind.
6. Laden Sie Bilder mit der richtigen Priorität
Einige Seitenressourcen sind für das Laden der Seite unerlässlich, andere können später im Lebenszyklus der Seite geladen werden. Da für eine Netzwerkverbindung nur eine begrenzte Bandbreite verfügbar ist, möchten Sie Browsern entsprechende Hinweise geben, ob eine Ressource wichtig ist oder auf einen späteren Zeitpunkt warten kann.
Dies gilt insbesondere für Bilder auf Ihrer Website. Wenn man sich nur die HTML-Browser ansieht, kann man nicht erkennen, ob ein Bild als Heldenbild oder als kleines Symbol in der Fußzeile der Website erscheint. Erst wenn der Browser beginnt, Inhalte anzuzeigen, erkennt er, welche Bilder wichtig sind.
Bei wichtigen Bildern können Sie das fetchpriority-Attribut verwenden, um den Browser anzuweisen, früher mit dem Laden eines Bildes zu beginnen:
Umgekehrt kann die Priorität von Bildern weiter unten auf der Seite herabgestuft werden, indem der Browser angewiesen wird, sie erst dann zu laden, wenn sie kurz davor stehen, im Ansichtsfenster zu erscheinen. Das img-Loading-Attribut erleichtert die Implementierung:
7. Seitengewicht minimieren
Die Seitengewichtung misst, wie viele Datenbytes heruntergeladen werden müssen, um eine Webseite zu laden. Je mehr Daten übertragen werden müssen, desto länger dauert der Download. Der beste Weg, die Seitengröße zu reduzieren, hängt von der Art der Ressourcen ab, die am meisten zur Gesamtmetrik beitragen.
Um die Größe von Bildern zu reduzieren, können Sie moderne Bildformate wie WebP oder Avif verwenden. Diese Formate benötigen weniger Speicherplatz zum Speichern desselben Inhalts als PNG- oder JPEG-Dateien.
Wenn Textdateien wie HTML-Dokumente, CSS-Stylesheets oder JavaScript-Code zur Seitenstärke beitragen, prüfen Sie, ob Sie HTTP-Komprimierungsalgorithmen wie Brotli verwenden.
8. Netzwerkanforderungsketten verstehen
Um wichtige Ressourcen schnell zu laden, sollten Sie so früh wie möglich mit dem Laden beginnen. Der Browser muss die Ressource schnell und frühzeitig erkennen, was bedeutet, dass sie im HTML-Dokument referenziert werden sollte.
Beim Laden einer Website entstehen jedoch manchmal längere sequentielle Anforderungsketten. Im folgenden Beispiel wird auf das Hintergrundbild nur innerhalb eines CSS-Stylesheets verwiesen. Dementsprechend beginnt die Netzwerkanforderung für das Bild erst, nachdem der Download des Stylesheets abgeschlossen ist.
In diesen Fällen können Preload-Hinweise im HTML-Dokument den Browser anweisen, Ressourcen zu laden, bevor sie andernfalls entdeckt würden. Zum Beispiel:
9. Verwenden Sie serverseitiges Rendering für Single-Page-Apps
Single-Page-Apps sind Websites, bei denen der Seiteninhalt durch JavaScript-Code im Browser generiert wird. Sie werden häufig mit Codierungsframeworks wie React, Vue oder Angular erstellt.
Der Vorteil von Single-Page-Anwendungen besteht darin, dass Seitenübergänge erfolgen, ohne dass der gesamte Seiteninhalt vollständig neu geladen werden muss. Sobald eine Seite geladen ist, erfolgt die Navigation zu einer anderen URL auf der Website oft schnell.
Allerdings ist das anfängliche Laden der Seite bei Single-Page-Apps oft langsamer, da Anwendungscode geladen und ausgeführt werden muss, um den Seiteninhalt anzuzeigen. Besucher sehen zunächst möglicherweise nur einen Spinner oder Inhaltsplatzhalter, während sie darauf warten, dass die Seite vollständig geladen wird.
Um dieses Problem zu beheben, sollte der ursprüngliche Seiteninhalt mithilfe serverseitiger Darstellung auf dem Server gerendert werden. Auf diese Weise wird der Seiteninhalt zunächst wie ein herkömmliches HTML-Dokument geladen und dann in eine clientseitige Anwendung überführt.
10. Überwachen Sie kontinuierlich Ihre Seitengeschwindigkeit
Wenn Sie einen Geschwindigkeitstest für Ihre Website durchführen, erfahren Sie, wie schnell Ihre Website heute ist und was Sie tun können, um sie zu verbessern.
Die kontinuierliche Überwachung Ihrer Website mit DebugBear hilft Ihrem Team jedoch, den Überblick über Probleme mit der Website-Leistung zu behalten und stellt sicher, dass Sie benachrichtigt werden, wenn ein Problem auftritt. Die über einen längeren Zeitraum verfügbare Historie erleichtert Ihnen die Kommunikation mit dem Management und erleichtert die Untersuchung neu aufgetretener Probleme.
Die Daten von Google Core Web Vitals werden über einen Zeitraum von 28 Tagen aggregiert. Wenn also eine Regression auftritt, dauert es eine Weile, bis sie in den Google-Daten angezeigt werden. Durch die Planung täglicher Tests wird sichergestellt, dass Sie über neue Probleme informiert werden, bevor diese sich auf Ihr Ranking auswirken.
Dieser Screenshot zeigt ein Beispiel einer Largest Contentful Paint-Regression taucht in den Labordaten auf und beginnt dann nach und nach, die Google-Daten zu erhöhen.
DebugBear bietet außerdem eine Experimentierfunktion, mit der Sie Verbesserungen der Website-Geschwindigkeit ausprobieren können, ohne Code bereitstellen zu müssen. Auf diese Weise können Sie Ihre Entwicklung mit konkreten Ideen und einer Einschätzung der Auswirkungen auf die Leistung angehen.
Sie können aus über 20 Teststandorten auswählen, Seiten analysieren, die eine Anmeldung erfordern oder auf einem Staging-Server gehostet werden, und Ihre Lighthouse-Leistung, Zugänglichkeit und SEO-Ergebnisse im Auge behalten.
Neben der Durchführung geplanter Labortests bietet DebugBear auch die Überwachung der Seitengeschwindigkeit unter realen Benutzern an. Durch die Installation eines Analyse-Snippets können Sie sehen, wo auf Ihrer Website Ihre Besucher ein gutes Erlebnis haben und an welchen Seiten Sie arbeiten müssen.
Während sich Labordaten auf eine einzelne konsistente Art von Erlebnis konzentrieren, erfassen reale Benutzerdaten die gesamte Vielfalt der Besuchererlebnisse besser. Einige Besucher verfügen über langsame mobile Verbindungen, verwenden einen älteren Browser oder besuchen Ihre Website von einem Standort aus, der weit von Ihrem Website-Server entfernt ist.
Durch die echte Benutzerüberwachung können Sie auch die neue INP-Metrik (Interaction to Next Paint) debuggen, die im März 2024 zu einem der Core Web Vitals von Google wird.
Wie reaktionsschnell Ihre Website für einen Benutzer ist, hängt stark davon ab, worauf Ihre Website reagiert: Mit welchem Seitenelement versucht der Benutzer zu interagieren? DebugBear RUM verfolgt, mit welchen UI-Elementen Benutzer am häufigsten interagieren und wie schnell diese Elemente auf Benutzereingaben reagieren.
Mit diesen Daten wissen Sie, auf welche Interaktionen Sie sich konzentrieren müssen, wenn Sie sich für die Optimierung von INP entscheiden.
DebugBear bietet eine umfassende Suite von Funktionen zur Überwachung der Seitengeschwindigkeit, die es Ihrem Team ermöglichen, großartige Erlebnisse zu liefern. Melden Sie sich noch heute für eine kostenlose Testversion an!
Sind Sie bereit, mit der Optimierung Ihrer Website zu beginnen? Melden Sie sich bei DebugBear an und erhalten Sie die Daten, die Sie für die Bereitstellung großartiger Benutzererlebnisse benötigen.
Bildnachweise
Ausgewähltes Bild: Bild von DebugBear. Mit Genehmigung verwendet.
