Mengapa dan apa?
Anda mungkin pernah mendengar tentang semua hal baik yang dapat dilakukan teknik Progressive Web App untuk situs Anda. Anda mungkin ingin langsung mencoba dan menambahkan fitur PWA. Hal itu mungkin, tetapi Anda akan jauh lebih baik jika 'siap untuk PWA' dilakukan terlebih dahulu.
Keajaiban PWA tidak akan memperbaiki masalah seperti memblokir JavaScript atau gambar yang membengkak. PWA membutuhkan fondasi yang kuat.
Jadi, bagaimana cara memeriksa kualitas situs Anda? Langkah pertama adalah melakukan audit situs: peninjauan objektif tentang apa yang berhasil dengan baik dan di mana (dan bagaimana) bisa ada peningkatan.
Mengaudit situs atau aplikasi akan membantu Anda membangun pengalaman yang tangguh dan berperforma tinggi — dan menyoroti keuntungan cepat yang dapat diimplementasikan dengan persetujuan minimal. Audit juga memberi Anda dasar untuk pengembangan berbasis data. Apakah perubahan membuat segalanya lebih baik? Bagaimana situs Anda dibandingkan dengan para kompetitor? Anda mendapatkan metrik untuk memprioritaskan upaya, dan bukti konkret untuk dibanggakan setelah Anda melakukan peningkatan.
Jika Anda hanya memiliki waktu 5 menit...
Jalankan Lighthouse di halaman beranda dan simpan data laporan. Anda akan mendapatkan dasar pengukuran terukur dan daftar tugas untuk meningkatkan performa, aksesibilitas, keamanan, dan SEO.
Jika Anda hanya memiliki waktu 30 menit...
Lighthouse mungkin masih menjadi tempat terbaik untuk memulai, tetapi dengan lebih banyak waktu, Anda juga dapat merekam hasil dari alat lain:
- Panel Keamanan Chrome DevTools: Penggunaan HTTPS.
- Panel Jaringan Chrome DevTools: waktu pemuatan; ukuran resource dan jumlah permintaan untuk HTML, CSS, JavaScript, gambar, font, dan file lainnya.
- Pengelola Tugas Chrome: jika situs Anda terus-menerus menggunakan CPU atau memori yang lebih banyak daripada aplikasi lain, Anda mungkin perlu memperbaiki kebocoran memori, masalah yang berjalan, atau pemuatan resource. Pastikan untuk menguji situs Anda di perangkat yang mewakili pengguna.
- WebPagetest: performa untuk berbagai lokasi dan jenis koneksi, penyimpanan cache, waktu ke byte pertama, penggunaan CDN.
- PageSpeed Insights: performa pemuatan, biaya data, dan penggunaan resource, termasuk data laporan Pengalaman Pengguna Chrome yang menyoroti statistik performa dunia nyata.
- Kartu Skor Kecepatan dan Pengukur Dampak: bandingkan kecepatan situs dengan pembanding dan perkirakan peluang pendapatan potensial untuk meningkatkan kecepatan situs.
Pastikan untuk menguji {i>website<i} Anda saat pengguna pertama kali melihatnya. Buka situs di Jendela Samaran (Pribadi), atau gunakan alat browser untuk menonaktifkan penyimpanan cache dan penghapusan penyimpanan. Hal ini memastikan bahwa setiap aset diambil dari jaringan, bukan dari cache lokal, sehingga Anda mendapatkan gambaran yang akurat tentang performa pemuatan pertama.
Tidak ada yang mengalahkan pengujian di dunia nyata. Cobalah situs Anda dengan perangkat dan konektivitas yang sama dengan pengguna Anda dan catat pengalaman subjektif Anda.
Jika Anda menemukan berbagai alat yang membingungkan...
Baca panduan kami: Cara Memikirkan Alat Kecepatan.
Jika tidak ada yang lain, cukup gunakan Lighthouse untuk memeriksa:
- HTTPS: setiap situs harus mengirimkan semua aset melalui HTTPS.
- Setelan server: server web atau CDN harus menggunakan kompresi dengan benar, menggunakan HTTP/2, dan menyertakan header yang sesuai agar browser dapat menyimpan resource ke dalam cache.
- Elemen skrip yang dapat dipindahkan ke bagian bawah halaman dan/atau diberi atribut asinkron atau tunda.
- JavaScript dan library yang dapat dihapus.
- CSS yang tidak digunakan dan JavaScript yang tidak digunakan.
- Gambar yang dapat disimpan dengan kompresi lebih tinggi atau dimensi piksel yang lebih kecil.
- File gambar yang akan lebih kecil disimpan menggunakan format yang berbeda, misalnya foto yang disimpan sebagai PNG.
Audiens, pemangku kepentingan, konteks
Prioritas untuk pemfaktoran ulang bergantung pada audiens, konten, dan fungsi Anda. Siapa yang mengunjungi situs Anda? Mengapa dan bagaimana mereka menggunakannya? Berapa anggaran performa Anda? Jika Anda tidak yakin dengan jawaban pertanyaan ini, coba persyaratan yang mengumpulkan latihan dari referensi pelatihan PWA kami: Audiens Anda, konten Anda, dan Desain untuk semua pengguna Anda.
Siapa pemangku kepentingan Anda, dan apa prioritas mereka? Ini akan mempengaruhi cara Anda menyusun, mempresentasikan, dan membagikan data audit Anda.
Jika Anda tidak dapat mengaudit seluruh situs, periksa analisis halaman untuk mengetahui bagian mana yang harus difokuskan. Rasio pantulan yang tinggi, waktu di halaman yang rendah, dan halaman keluar yang tidak terduga dapat menjadi indikator yang baik untuk memulai. Demikian juga metrik bisnis seperti biaya hosting, klik iklan, dan konversi. Dapatkan gambaran umum dari para pemangku kepentingan tentang data apa yang penting bagi mereka.
Menguji, merekam, memperbaiki, mengulangi
Catat status situs Anda sebelum melakukan perubahan apa pun, untuk mengungkap masalah dan menetapkan titik awal untuk peningkatan atau regresi. Hal ini memberi Anda data untuk menjustifikasi dan menghargai upaya pengembangan.
Pastikan untuk menguji beberapa jenis halaman di situs Anda — bukan hanya halaman beranda. Untuk aplikasi web satu halaman, uji berbagai komponen, rute, dan alur UX, bukan hanya pengalaman pemuatan pertama.