Sie haben vielleicht schon von den Vorteilen gehört, die Progressive Web App (PWA)-Techniken für Ihre Website bieten. Es kann verlockend sein, PWA-Funktionen hinzuzufügen, ohne die Grundlage der Leistung Ihrer Website zu verbessern. Aber auch die besten PWA-Funktionen können Probleme mit blockierendem JavaScript und überdimensionierten Bildern nicht beheben.
Stattdessen sollten Sie zuerst eine Website-Analyse durchführen, um objektiv zu prüfen, was gut funktioniert und wo es Verbesserungspotenzial gibt.
Wenn Sie Ihre Website oder App prüfen, können Sie eine robuste, leistungsstarke Lösung entwickeln. Außerdem sollten Sie Quick Wins hervorheben, die mit minimaler Genehmigung umgesetzt werden können. Ein Audit schafft eine Grundlage für die datengestützte Entwicklung. Hat eine Änderung die Situation verbessert? Wie schneidet Ihre Website im Vergleich zu Mitbewerbern ab? Sie erhalten Messwerte, um Ihre Bemühungen zu priorisieren, und konkrete Beweise, mit denen Sie nach erfolgten Verbesserungen angeben können.
Mit nur 5 Minuten
Führen Sie Lighthouse auf Ihrer Startseite aus und speichern Sie die Berichtsdaten. Sie erhalten eine quantifizierte Baseline und eine To-do-Liste mit Vorschlägen zur Verbesserung von Leistung, Barrierefreiheit, Sicherheit und SEO.
Mit nur 30 Minuten
Lighthouse ist wahrscheinlich immer noch der beste Ausgangspunkt. Wenn Sie mehr Zeit haben, können Sie auch Ergebnisse aus anderen Tools aufzeichnen:
- Bereich „Sicherheit“ in den Chrome-Entwicklertools: HTTPS-Nutzung
- Bereich „Netzwerkanfragen“ in den Chrome-Entwicklertools: Ladezeiten, Ressourcengrößen und Anzahl der Anfragen für HTML-, CSS-, JavaScript-, Bild-, Schriftart- und andere Dateien.
- Chrome-Task-Manager: Wenn Ihre Website regelmäßig viel CPU oder mehr Arbeitsspeicher als andere Apps verwendet, müssen Sie möglicherweise Probleme mit Speicherlecks, der Ausführung von Aufgaben oder dem Laden von Ressourcen beheben.
- WebPagetest: Caching, Zeit bis zum ersten Byte, CDN-Nutzung.
- PageSpeed Insights: Ladeleistung, Datenkosten und Ressourcennutzung, einschließlich Daten aus dem Bericht zur Nutzererfahrung in Chrome, die Leistungsstatistiken aus der Praxis enthalten.
Testen Sie Ihre Website so, wie sie einem Nutzer angezeigt wird, der sie zum ersten Mal besucht. Öffnen Sie die Website in einem Inkognitofenster (privat) oder verwenden Sie Browser-Tools, um das Caching zu deaktivieren und den Speicher zu leeren. So wird sichergestellt, dass jedes Asset aus dem Netzwerk und nicht aus einem lokalen Cache abgerufen wird. Sie erhalten also ein genaues Bild der Leistung beim ersten Laden.
Nichts geht über Tests unter realen Bedingungen. Testen Sie Ihre Website auf Geräten und mit Verbindungen, die für Ihre Nutzer repräsentativ sind, und dokumentieren Sie Ihre subjektiven Erfahrungen.
Wenn Sie sich mit Tools nicht auskennen
Leitfaden zu Tools zur Messung der Geschwindigkeit
Verwenden Sie Lighthouse, um Folgendes zu prüfen:
- HTTPS: Alle Assets jeder Website sollten über HTTPS bereitgestellt werden.
- Servereinstellungen: Ihr Webserver oder CDN sollte die Komprimierung richtig verwenden, HTTP/2 verwenden und geeignete Header enthalten, damit Ihr Browser Ressourcen im Cache speichern kann.
- Skriptelemente, die an das Ende der Seite verschoben oder mit dem Attribut async oder defer versehen werden können.
- JavaScript und Bibliotheken, die entfernt werden können.
- Nicht verwendeter Code, z. B. CSS- und JavaScript-Bibliotheken.
- Möglichkeiten zur Verringerung der Pixelgröße von Bildern:
- Änderungen des Dateiformats, die die Größe eines Bilds verbessern, z. B. die Umwandlung eines PNG in ein JPG.
Zielgruppe, Stakeholder, Kontext
Die Prioritäten für das Refactoring hängen von Ihrer Zielgruppe, Ihren Inhalten und Ihrer Funktionalität ab. Wer besucht Ihre Website? Warum und wie wird es verwendet? Wie hoch ist Ihr Leistungsbudget?
Wer sind Ihre Stakeholder und was sind ihre Prioritäten? Das wirkt sich darauf aus, wie Sie Ihre Prüfungsdaten strukturieren, präsentieren und freigeben.
Wenn Sie nicht Ihre gesamte Website prüfen können, sollten Sie sich die Seitenanalysen ansehen, um herauszufinden, worauf Sie sich konzentrieren sollten. Hohe Absprungraten, eine geringe Zeit auf der Seite und unerwartete Ausstiegsseiten können ein guter Hinweis darauf sein, wo Sie ansetzen sollten. Das gilt auch für Unternehmensmesswerte wie Hostingkosten, Anzeigenklicks und Conversions. Verschaffen Sie sich einen Überblick darüber, welche Daten für die Stakeholder wichtig sind.
Testen, aufzeichnen, beheben, wiederholen
Erfassen Sie den Zustand Ihrer Website, bevor Sie Änderungen vornehmen, um Probleme zu erkennen und einen Ausgangspunkt für Verbesserungen oder Regressionen festzulegen. So erhalten Sie Daten, mit denen Sie den Entwicklungsaufwand rechtfertigen und belohnen können.
Testen Sie mehrere Seitentypen auf Ihrer Website. Bei Single-Page-Apps sollten Sie die Komponenten, Routen und UX-Abläufe testen und nicht nur die erste Ladung.