Warum und was?
Sie haben wahrscheinlich schon von den vielen Vorteilen gehört, die progressive Web-App-Technologien für Ihre Website haben können. Sie könnten versucht sein, direkt loszulegen und PWA-Funktionen hinzuzufügen. Das ist möglich, aber es ist viel besser, wenn Sie zuerst „PWA-fähig“ werden.
Keine PWA-Zauberei kann Probleme wie das Blockieren von JavaScript oder zu große Bilder beheben. PWAs benötigen eine solide Grundlage.
Wie können Sie also den Zustand Ihrer Website prüfen? Der erste Schritt besteht in einer Websiteanalyse: einer objektiven Überprüfung, was gut funktioniert und wo (und wie) sich Verbesserungen erzielen lassen.
Wenn Sie Ihre Website oder App analysieren, können Sie eine robuste, leistungsstarke Anwendung entwickeln und schnell umsetzbare Verbesserungen erkennen. Außerdem erhalten Sie eine Baseline für die datengetriebene Entwicklung. Hat sich etwas verbessert? Wie schneidet Ihre Website im Vergleich zu Mitbewerbern ab? Sie erhalten Messwerte, mit denen Sie Ihre Bemühungen priorisieren können, und konkrete Nachweise, mit denen Sie prahlen können, sobald Sie Verbesserungen vorgenommen haben.
Wenn Sie nur 5 Minuten Zeit haben…
Führen Sie Lighthouse auf Ihrer Startseite aus und speichern Sie die Berichtsdaten. Sie erhalten eine quantifizierte Baseline und eine To-do-Liste mit Verbesserungsvorschlägen für Leistung, Barrierefreiheit, Sicherheit und Suchmaschinenoptimierung.
Wenn Sie nur 30 Minuten Zeit haben…
Lighthouse ist wahrscheinlich immer noch der beste Ausgangspunkt. Wenn Sie etwas mehr Zeit haben, können Sie auch Ergebnisse aus anderen Tools erfassen:
- Sicherheitsbereich in den Chrome-Entwicklertools: HTTPS-Nutzung.
- Netzwerkbereich in den Chrome DevTools: Ladezeiten, Ressourcengrößen und Anzahl der Anfragen für HTML, CSS, JavaScript, Bilder, Schriftarten und andere Dateien.
- Chrome-Task-Manager: Wenn Ihre Website ständig viel CPU oder mehr Arbeitsspeicher als andere Apps verwendet, müssen Sie möglicherweise Speicherlecks, Probleme beim Ausführen von Aufgaben oder beim Laden von Ressourcen beheben. Testen Sie Ihre Website auf Geräten, die für Ihre Nutzer repräsentativ sind.
- WebPagetest: Leistung an verschiedenen Standorten und für verschiedene Verbindungstypen, Caching, Time to First Byte, CDN-Nutzung.
- PageSpeed Insights: Ladeleistung, Datenkosten und Ressourcennutzung, einschließlich Daten aus dem Bericht zur Nutzererfahrung in Chrome, die Leistungsstatistiken aus der Praxis hervorheben.
- Geschwindigkeitsübersicht und ROI-Rechner: Sie können die Geschwindigkeit Ihrer Website mit der von Mitbewerbern vergleichen und die potenziellen Umsatzsteigerungsmöglichkeiten durch eine Verbesserung der Websitegeschwindigkeit abschätzen.
Testen Sie Ihre Website so, wie sie ein Erstnutzer sieht. Öffnen Sie die Website in einem Inkognitofenster oder verwenden Sie Browsertools, 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. So erhalten Sie ein genaues Bild der Leistung beim ersten Laden.
Nichts ist besser als Tests unter realen Bedingungen. Testen Sie Ihre Website mit denselben Geräten und derselben Internetverbindung wie Ihre Nutzer und notieren Sie sich Ihre subjektiven Eindrücke.
Wenn Sie die Vielfalt der Tools überwältigend finden…
Weitere Informationen finden Sie in unserem Leitfaden Tools zur Messung der Geschwindigkeit.
Verwenden Sie einfach Lighthouse, um Folgendes zu prüfen:
- HTTPS: Alle Assets einer Website müssen über HTTPS bereitgestellt werden.
- Servereinstellungen: Ihr Webserver oder CDN sollte die Komprimierung richtig verwenden, HTTP/2 verwenden und entsprechende Header enthalten, damit Ihr Browser Ressourcen im Cache speichern kann.
- Scriptelemente, die ans Ende der Seite verschoben und/oder mit dem Attribut async oder defer versehen werden können.
- JavaScript und Bibliotheken, die entfernt werden können.
- Nicht verwendetes CSS und nicht verwendetes JavaScript.
- Bilder, die mit höherer Komprimierung oder kleineren Pixelabmessungen gespeichert werden können.
- Bilddateien, die in einem anderen Format kleiner wären, z. B. Fotos, die als PNGs gespeichert sind.
Zielgruppe, Stakeholder, Kontext
Die Prioritäten für das Refactoring hängen von Ihrer Zielgruppe, den Inhalten und der Funktionalität ab. Wer besucht Ihre Website? Warum und wie werden sie verwendet? Wie hoch ist Ihr Leistungsbudget? Wenn Sie sich nicht sicher sind, wie Sie diese Fragen beantworten sollen, versuchen Sie es mit den Übungen zur Anforderungsermittlung aus unseren PWA-Schulungsressourcen: Ihre Zielgruppe, Ihre Inhalte und Design für alle Nutzer.
Wer sind Ihre Stakeholder und was sind ihre Prioritäten? Das wirkt sich darauf aus, wie Sie Ihre Analysedaten strukturieren, präsentieren und freigeben.
Wenn Sie nicht Ihre gesamte Website prüfen können, sehen Sie sich die Seitenanalysen an, um zu erfahren, wo Sie sich konzentrieren sollten. Hohe Absprungraten, eine geringe Verweildauer auf der Seite und unerwartete Ausstiegsseiten können ein guter Indikator dafür sein, wo Sie anfangen sollten. Das gilt auch für Geschäftsmesswerte wie Hostingkosten, Anzeigenklicks und Conversions. Erkundigen Sie sich bei den Stakeholdern, welche Daten für sie 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 Rückschritte zu schaffen. So erhalten Sie Daten, mit denen Sie die Entwicklungsarbeit rechtfertigen und belohnen können.
Testen Sie nicht nur die Startseite, sondern mehrere Seitentypen auf Ihrer Website. Testen Sie bei Single-Page-Apps nicht nur die erste Ladezeit, sondern auch verschiedene Komponenten, Routen und UX-Abläufe.