Transisi halaman tidak terasa seperti diblokir di jaringan

Transisi halaman cepat adalah kunci persepsi pengguna terhadap performa Progressive Web App (PWA) Anda. Transisi harus terasa cepat, bahkan saat berada di jaringan yang lambat.

Rekomendasi

Untuk menemukan transisi halaman yang lambat, navigasi aplikasi web Anda menggunakan jaringan lambat yang disimulasikan. Untuk melakukannya di Chrome:

[komentar]: <> (Dua item daftar pertama berasal dari kode pendek dari web.dev, tetapi belum diterjemahkan dari bahasa Inggris ke bahasa apa pun.) 1. Tekan Control+Shift+J (atau Command+Option+J di Mac) untuk membuka DevTools. 2. Klik tab Jaringan. 3. Di menu drop-down Throttling, pilih 3G lambat.

Setiap kali Anda mengetuk link atau tombol di aplikasi, pastikan halaman langsung merespons dengan salah satu dari dua cara berikut:

  • Halaman segera bertransisi ke layar berikutnya dan menampilkan layar pemuatan saat menunggu konten dari jaringan.
  • Halaman menampilkan indikator pemuatan saat aplikasi menunggu respons dari jaringan.

Jika Anda mengerjakan aplikasi satu halaman yang dirender klien, segera pindahkan pengguna ke halaman berikutnya dan tampilkan layar kerangka. Pastikan untuk segera menampilkan konten apa pun yang sudah tersedia, seperti judul halaman atau thumbnail, sedangkan konten lainnya dimuat.

Referensi