Warum und was?
Du hast bestimmt schon von den Vorteilen von progressiven Web-Apps gehört. Vielleicht fühlen Sie sich versucht, direkt einzusteigen und PWA-Funktionen hinzuzufügen. Das ist möglich, aber für die Zukunft geht es viel besser, wenn Sie die Voraussetzungen für eine PWA erfüllen.
Probleme wie das Blockieren von JavaScript oder aufgeblähten Bildern lassen sich nicht mit PWA-Magie beheben. PWAs brauchen eine solide Grundlage.
Wie können Sie nun die Integrität Ihrer Website überprüfen? Der erste Schritt besteht darin, eine Website-Prüfung durchzuführen: eine objektive Überprüfung, was gut funktioniert und wo (und wie) Verbesserungspotenzial besteht.
Wenn Sie Ihre Website oder App prüfen, können Sie dafür sorgen, dass Ihre Website oder App stabil und leistungsstark ist. Außerdem können Sie schnell Erfolge aufzeigen, die mit minimaler Genehmigung umgesetzt werden können. Ein Audit liefert Ihnen auch eine Grundlage für die datengestützte Entwicklung. Hat eine Änderung die Situation verbessert? Wie schneidet Ihre Website im Vergleich mit der Konkurrenz ab? Sie erhalten Metriken, um den Aufwand zu priorisieren, und konkrete Nachweise, mit denen Sie angeben können, nachdem Sie Verbesserungen vorgenommen haben.
Wenn du nur 5 Minuten hast...
Führen Sie auf Ihrer Startseite Lighthouse aus und speichern Sie die Berichtsdaten. Sie erhalten eine quantifizierte Referenz und eine To-do-Liste für Verbesserungen in den Bereichen Leistung, Barrierefreiheit, Sicherheit und SEO.
Wenn du nur 30 Minuten Zeit hast...
Lighthouse ist wahrscheinlich immer noch der beste Ausgangspunkt, aber mit etwas mehr Zeit können Sie auch Ergebnisse aus anderen Tools aufzeichnen:
- Sicherheitsbereich der Chrome-Entwicklertools: HTTPS-Nutzung.
- Netzwerkbereich der Chrome-Entwicklertools: 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-Leistung oder mehr Arbeitsspeicher als andere Apps nutzt, müssen Sie möglicherweise Speicherlecks, die Ausführung von Aufgaben oder Probleme beim Laden von Ressourcen beheben. Testen Sie Ihre Website unbedingt auf Geräten, die für Ihre Nutzer repräsentativ sind.
- WebPagetest: Leistung für verschiedene Standorte und Verbindungstypen, 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 tatsächliche Leistungsstatistiken enthalten.
- Speed Scorecard und Wirkungsprognose: Du kannst die Websitegeschwindigkeit mit denen ähnlicher Apps vergleichen und das potenzielle Umsatzpotenzial abschätzen, das durch eine Verbesserung der Websitegeschwindigkeit erzielt werden kann.
Testen Sie Ihre Website erst, wenn sie zum ersten Mal angezeigt wird. Öffnen Sie die Website in einem Inkognitofenster (privates Fenster) oder verwenden Sie Browsertools, um Caching zu deaktivieren und Speicher freizugeben. Dadurch wird sichergestellt, dass jedes Asset aus dem Netzwerk und nicht aus einem lokalen Cache abgerufen wird, sodass Sie ein genaues Bild der Leistung beim ersten Laden erhalten.
Nichts ist besser als reale Tests. Testen Sie Ihre Website mit den gleichen Geräten und Konnektivität wie Ihre Nutzer und zeichnen Sie Ihre subjektiven Erfahrungen auf.
Wenn die Auswahl an Tools verwirrend ist...
Sehen Sie sich dazu unseren Leitfaden How to Think about Speed Tools (Informationen zu Geschwindigkeitstools) an.
Verwenden Sie Lighthouse, um zu prüfen, ob Folgendes zutrifft:
- HTTPS: Alle Assets sollten von jeder Website über HTTPS bereitgestellt werden.
- Servereinstellungen: Ihr Webserver oder CDN sollte die Komprimierung korrekt anwenden, HTTP/2 verwenden und entsprechende Header einfügen, damit im Browser Ressourcen im Cache gespeichert werden können.
- Script-Elemente, die an das Ende der Seite verschoben und/oder ein async oder defer-Attribut erhalten können
- JavaScript und Bibliotheken, die entfernt werden können.
- Nicht verwendeter CSS-Code und nicht verwendetes JavaScript
- Bilder, die mit höherer Komprimierung oder mit kleineren Pixelabmessungen gespeichert werden können.
- Bilddateien, die in einem anderen Format kleiner wären, z. B. Fotos als PNGs.
Zielgruppe, Stakeholder, Kontext
Die Prioritäten für die Refaktorierung hängen von Ihrer Zielgruppe, Ihrem Inhalt und Ihrer Funktionalität ab. Wer besucht Ihre Website? Warum und wie wird es verwendet? Wie hoch ist Ihr Leistungsbudget? Wenn du dir die Antworten auf diese Fragen nicht sicher bist, sieh dir die Übungen aus unseren PWA-Schulungsressourcen an: Deine Zielgruppe, deine Inhalte und Design für alle deine Nutzer.
Wer sind Ihre Stakeholder und was sind ihre Prioritäten? Dies wirkt sich auf die Strukturierung, Präsentation und Freigabe Ihrer Audit-Daten aus.
Wenn Sie nicht die gesamte Website überprüfen können, sehen Sie sich die Seitenanalysen an, um eine Vorstellung davon zu bekommen, worauf Sie sich konzentrieren sollten. Hohe Absprungraten, kurze Zeit auf der Seite und unerwartete Ausstiegsseiten können ein guter Anhaltspunkt dafür sein, wo Sie anfangen sollten. Gleichermaßen geschäftliche Messwerte wie Hostingkosten, Anzeigenklicks und Conversions. Verschaffen Sie sich von den Stakeholdern einen Überblick darüber, welche Daten für sie wichtig sind.
Testen, aufzeichnen, korrigieren, wiederholen
Zeichne den Status deiner Website auf, bevor du Änderungen vornimmst, um Probleme zu erkennen und einen Ausgangspunkt für Verbesserungen oder Regressionen festzulegen. So erhalten Sie Daten, mit denen sich der Entwicklungsaufwand rechtfertigen und belohnen lässt.
Testen Sie auf Ihrer Website mehrere Seitentypen – nicht nur die Startseite. Testen Sie bei einseitigen Anwendungen verschiedene Komponenten, Routen und UX-Abläufe und nicht nur den ersten Ladevorgang.