Seitenübergänge haben nicht das Gefühl, dass sie das Netzwerk blockieren.

Schnelle Seitenübergänge sind entscheidend dafür, wie Nutzer die Leistung Ihrer Progressive Web App (PWA) wahrnehmen. Übergänge sollten sich auch bei langsamen Verbindungen schnell anfühlen.

Empfehlungen

Um langsame Seitenübergänge zu finden, navigieren Sie mit einem simulierten langsamen Netzwerk in Ihrer Webanwendung. Gehen Sie dazu in Chrome wie folgt vor:

[comment]: <> (Die ersten beiden Listeneinträge sind eine Kurzcode von web.dev, aber sie wurde nicht aus dem Englischen in eine andere Sprache übersetzt.) 1. Drücke Control+Shift+J (oder Command+Option+J auf einem Mac), um die Entwicklertools zu öffnen. 2. Klicken Sie auf den Tab Netzwerk. 3. Wählen Sie in der Drop-down-Liste Drosselung die Option Langsames 3G aus.

Jedes Mal, wenn du in der App auf einen Link oder eine Schaltfläche tippst, kannst du auf zwei Arten prüfen, ob die Seite sofort reagiert:

  • Die Seite wechselt sofort zum nächsten Bildschirm und zeigt einen Ladebildschirm an, während auf Inhalte aus dem Netzwerk gewartet wird.
  • Während die App auf eine Antwort vom Netzwerk wartet, wird auf der Seite eine Ladeanzeige angezeigt.

Wenn Sie an einer clientseitig gerenderten Single-Page-Anwendung arbeiten, wechseln Sie sofort zur nächsten Seite und zeigen Sie einen Skeleton-Bildschirm an. Alle bereits verfügbaren Inhalte wie Seitentitel oder Thumbnail sollten sofort eingeblendet werden, während der Rest des Contents geladen wird.

Ressourcen