Leistung prüfen

Sam Dutton

Warum und was?

Sie haben wahrscheinlich schon von den vielen Vorteilen gehört, die progressive Web-App-Techniken für Ihre Website bieten. Es ist verlockend, direkt loszulegen und PWA-Funktionen hinzuzufügen. Das ist möglich, aber es ist besser, wenn Sie Ihre Website zuerst PWA-kompatibel machen.

Probleme wie blockiertes JavaScript oder überdimensionierte Bilder lassen sich nicht durch PWA-Magie beheben. PWAs benötigen eine solide Grundlage.

Wie können Sie den Zustand Ihrer Website prüfen? Der erste Schritt ist eine Website-Analyse. Dabei wird objektiv geprüft, was gut funktioniert und wo und wie Verbesserungen möglich sind.

Wenn Sie Ihre Website oder App prüfen, können Sie eine robuste, leistungsstarke Lösung entwickeln und schnell umsetzbare Verbesserungen identifizieren, für die nur eine minimale Genehmigung erforderlich ist. Außerdem erhalten Sie eine Baseline 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 angeben können, sobald Sie Verbesserungen erzielt 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 Vorschlägen zur Verbesserung von Leistung, Barrierefreiheit, Sicherheit und SEO.

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 aufzeichnen:

  • Bereich „Sicherheit“ in den Chrome-Entwicklertools: HTTPS-Nutzung.
  • Chrome DevTools Network Panel: Ladezeiten, Ressourcengrößen und Anzahl der Anfragen für HTML-, CSS-, JavaScript-, Bild-, Schriftart- 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 bei der Ausführung von Aufgaben oder Probleme beim Laden von Ressourcen beheben. Testen Sie Ihre Website auf Geräten, die für Ihre Nutzer repräsentativ sind.
  • WebPagetest: Leistung für verschiedene Standorte und 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 Statistiken zur Leistung in der Praxis enthalten.
  • Übersicht zur Geschwindigkeit und ROI-Rechner: Vergleichen Sie die Websitegeschwindigkeit mit der von Mitbewerbern und schätzen Sie das potenzielle Umsatzwachstum durch eine höhere Websitegeschwindigkeit.

Testen Sie Ihre Website so, wie sie einem neuen Nutzer angezeigt wird. Öffnen Sie die Website in einem Inkognitofenster (privates Surfen) 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. Sie erhalten also ein genaues Bild der Leistung beim ersten Laden.

Nichts geht über Tests unter realen Bedingungen. Testen Sie Ihre Website mit denselben Geräten und derselben Konnektivität wie Ihre Nutzer und dokumentieren Sie Ihre subjektiven Erfahrungen.

Wenn Sie die große Auswahl an Tools verwirrend finden…

Leitfaden zu Tools zur Messung der Geschwindigkeit

Verwenden Sie Lighthouse, um Folgendes zu prüfen:

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 werden sie verwendet? Wie hoch ist Ihr Leistungsbudget? Wenn Sie sich bei der Antwort auf diese Fragen nicht sicher sind, können Sie die Übungen zur Anforderungserfassung aus unseren PWA-Schulungsressourcen ausprobieren: Zielgruppe und Inhalte und Design für alle Nutzer.

Wer sind Ihre Stakeholder und was sind ihre Prioritäten? Dies wirkt sich darauf aus, wie Sie Ihre Prüfungsdaten strukturieren, präsentieren und weitergeben.

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 kurze Verweildauer auf der Seite und unerwartete Ausstiegsseiten können ein guter Hinweis darauf sein, wo Sie ansetzen sollten. Das gilt auch für geschäftsbezogene Messwerte 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, nicht nur die Startseite. Testen Sie bei Single-Page-Apps verschiedene Komponenten, Routen und UX-Abläufe und nicht nur den ersten Ladevorgang.

Feedback