Kapitel 1: Website-Geschwindigkeitsdiagnose
Die Ursache des Problems finden: Website-Geschwindigkeitsdiagnose
Den wahren Grund für die langsamen Ladezeiten Ihrer Website herauszufinden, kann echte Kopfschmerzen bereiten. Sind es deine Bilder? Deine Videos? Müssen Sie Ihr Hosting aktualisieren?
In diesem Kapitel erfahren Sie, wie Sie die genauen Ursachen für Ihre Ladeprobleme ermitteln. Wie diese Probleme gelöst werden können, wird in den folgenden Kapiteln behandelt. Im Moment konzentrieren wir uns nur auf die Diagnose des Problems.
Leuchtturm: Ein leistungsstarkes Diagnosetool
Lighthouse ist eines der wenigen Tools, die Sie benötigen, um Ladezeitprobleme Ihrer Website zu diagnostizieren. Es erstellt detaillierte Berichte zu Leistung, Barrierefreiheit, Best Practices und SEO. In dieser Anleitung konzentrieren wir uns auf den Leistungsbericht. Lighthouse wird mit Chrome verwendet. Falls Sie Chrome nicht installiert haben, können Sie Ihre Website-Geschwindigkeit auch mit GTmetrix testen . Die Ergebnisse sind ähnlich, Lighthouse ist jedoch genauer.
Schritt 1:
Besuchen Sie die Website, die Sie testen möchten. Stellen Sie sicher, dass Sie ein Inkognito-Fenster verwenden. Wenn Sie Chrome verwenden und über Browser-Plugins verfügen, kann dies Auswirkungen auf Ihren Test haben und ihn ungenauer machen.
Schritt 2:
Klicken Sie mit der rechten Maustaste irgendwo auf die Websites. Eine Liste mit Optionen wird angezeigt. Klicken Sie auf „Inspizieren“, was unten in den Optionen aufgeführt sein sollte.
Schritt 3:
Es öffnet sich wahrscheinlich auf der rechten Seite der Website ein neuer Abschnitt, der den gesamten HTML- und CSS-Code Ihrer Website anzeigt.
Oben in diesem Abschnitt sehen Sie eine Liste mit Optionen wie „Elemente, Konsole, Quellen“ und mehr.
Suchen Sie am Ende der Liste die Option „>>“ und klicken Sie darauf. Weitere Optionen werden angezeigt. Suchen Sie nach „Leuchtturm“ und klicken Sie darauf.
Schritt 4:
Der Lighthouse-Berichtsbildschirm wird angezeigt. Sie sehen einige verschiedene Optionen, aus denen Sie auswählen können, um Ihren Bericht zu erstellen.
- Modus: Normalerweise wähle ich „Navigation (Standard)“.
- Kategorien: Für dieses Handbuch ist nur „Leistung“ relevant, die anderen können Sie deaktiviert lassen.
- Plugins: Lassen Sie alles deaktiviert.
- Device: Sie möchten zwei Berichte ausführen, einen für „Mobil“ und einen für „Desktop“. Auf jedem Gerät können unterschiedliche Probleme auftreten. Sie sollten sich mehr auf „Mobil“ konzentrieren, da dieser normalerweise langsamer ist.
Schritt 5:
Analysieren Sie den Bericht. Ihr Ziel ist es, bei allem im grünen Bereich zu sein. In den folgenden Abschnitten gehen wir noch ausführlicher auf alles ein.
Leuchtturm-Metriken
Leistung
Dies ist die gewichtete Punktzahl aller Ihrer Messwerte zusammen.
Erster zufriedener Anstrich
Die Zeit vom Beginn des Ladens der Seite bis zu dem Zeitpunkt, an dem ein Teil der Website auf dem Bildschirm sichtbar ist.
Geschwindigkeitsindex
Wie schnell der Inhalt der Seite sichtbar geladen wird.
Größte inhaltliche Farbe
Wie lange dauert es, bis der größte Bild- oder Textblock im Ansichtsfenster geladen ist? Wenn es sich um eine Website handelt, ist dies die Zeit, die zum Laden Ihres Heldenbereichs benötigt wird.
Gesamtsperrzeit
Die Zeit, die Benutzer benötigen, um mit Ihrer Website zu interagieren. Wenn sie beispielsweise auf eine Schaltfläche klicken und nichts passiert, wird diese blockiert.
Kumulative Layoutverschiebung
Wie viele Elemente werden beim Laden Ihrer Website an eine andere Position auf der Seite verschoben?
Leuchtturm-Chancen
Leuchtturm-Gelegenheiten werden unterhalb Ihrer Kennzahlen aufgeführt. Dies sind Hinweise darauf, was Sie tun können, um die Ladezeit Ihrer Seite zu verlängern. Es ist möglicherweise nicht immer 100 % genau.
Bildmöglichkeiten
Bilder richtig dimensionieren
Ihre Bilder sind deutlich größer als nötig. Sie müssen die Größe ändern und sie richtig komprimieren. Wie Sie dieses Problem beheben, erfahren Sie in Kapitel 2.
Offscreen-Bilder aufschieben
Erwägen Sie das verzögerte Laden Ihrer Bilder, um die Zeit bis zur interaktiven Metrik zu verkürzen. Auch die richtige Optimierung Ihrer Bilder kann dabei helfen.
Stellen Sie Bilder in Formaten der nächsten Generation bereit
Konvertieren Sie Ihre Bilder in JPG. Verwenden Sie PNG für Symbole. Lighthouse empfiehlt die Verwendung von WebP oder AVIF, diese Formate werden jedoch von älteren Browsern nicht unterstützt.
Bilder effizient kodieren
Komprimieren Sie Ihre Bilder oder verwenden Sie ein CDN.
Videomöglichkeiten
Verwenden Sie Videoformate für animierte Inhalte
Verwenden Sie MPEG4/WebM-Videos für Animationen anstelle von GIF. GIFs sind für die Bereitstellung animierter Inhalte ineffizient.
JavaScript-Möglichkeiten
Reduzieren Sie ungenutztes JavaScript
Auf Ihrer Seite wird JavaScript geladen, das eigentlich nicht verwendet wird.
Eliminieren Sie Render-blockierende Ressourcen
Renderblockierende Ressourcen verhindern, dass der Browser Ihre Website lädt. Dabei handelt es sich in der Regel um JavaScript oder Ressourcen von Drittanbietern (z. B. eine Art Einbettung).
Minifizieren JavaScript
Durch die Minimierung Ihres JavaScript wird die Dateigröße reduziert, ohne dass dabei irgendetwas auf Ihrer Website beschädigt wird. Wie Sie diese Chance nutzen können, erfahren Sie in Kapitel 5.
CSS-Möglichkeiten
Reduzieren Sie nicht verwendetes CSS
CSS sorgt dafür, dass Ihre Website schön aussieht, aber nicht alle Themes und Plugins programmieren ihre CSS-Dateien effizient. Dateien, die geladen werden, aber keinen Einfluss auf das Erscheinungsbild Ihrer Website haben, werden als „Nicht verwendetes CSS“ gekennzeichnet. Wie Sie dieses Problem beheben, erfahren Sie in Kapitel 5.
Eliminieren Sie Render-blockierende Ressourcen
Dies kann CSS oder JavaScript sein, aber es ist ein Skript, das verhindert, dass Ihre Website geladen wird. Wie Sie diese Chance nutzen können, erfahren Sie in Kapitel 5.
Hosting-Möglichkeiten
Reduzieren Sie die anfängliche Serverantwortzeit
Dies bezieht sich auf Ihr Hosting. Wenn Sie das günstigste verfügbare Hosting nutzen, können Sie davon ausgehen, dass sich diese Gelegenheit bietet. Manchmal lässt sich dieses Problem beheben, indem Sie Ihre Bilder, JavaScript und CSS reparieren, da Ihr Server nicht so viel zu laden hat. Wie Sie dieses Problem beheben können, erfahren Sie in Kapitel 6 dieses Leitfadens.