Mengapa dan apa?
Anda mungkin telah mendengar tentang semua hal baik yang dapat dilakukan teknik Progressive Web App untuk situs Anda. Anda mungkin tergoda untuk langsung menambahkan fitur PWA. Hal itu mungkin saja, tetapi Anda akan jauh lebih baik jika terlebih dahulu membuat aplikasi 'siap PWA'.
Tidak ada keajaiban PWA yang akan memperbaiki masalah seperti memblokir JavaScript atau gambar yang membengkak. PWA memerlukan fondasi yang solid.
Jadi, bagaimana cara memeriksa kondisi situs Anda? Langkah pertama adalah melakukan audit situs: peninjauan objektif tentang hal yang berfungsi dengan baik dan tempat (dan cara) peningkatan dapat dilakukan.
Mengaudit situs atau aplikasi akan membantu Anda membangun pengalaman yang tangguh dan berperforma tinggi — serta menyoroti solusi cepat yang dapat diterapkan dengan persetujuan minimal. Audit juga memberi Anda dasar pengukuran untuk pengembangan berbasis data. Apakah perubahan tersebut membuat semuanya menjadi lebih baik? Bagaimana perbandingan situs Anda dengan 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 yang terukur dan daftar tugas untuk peningkatan performa, aksesibilitas, keamanan, dan SEO.
Jika Anda hanya memiliki waktu 30 menit…
Lighthouse mungkin masih merupakan tempat terbaik untuk memulai, tetapi dengan sedikit lebih banyak waktu, Anda juga dapat mencatat 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 yang signifikan atau lebih banyak memori daripada aplikasi lain, Anda mungkin perlu memperbaiki kebocoran memori, masalah pemuatan tugas, atau pemuatan resource. Pastikan untuk menguji situs Anda di perangkat yang mewakili pengguna Anda.
- WebPagetest: performa untuk berbagai lokasi dan jenis koneksi, penyimpanan dalam cache, waktu hingga byte pertama, penggunaan CDN.
- Pagespeed Insights: performa pemuatan, biaya data, dan penggunaan resource, termasuk data laporan Pengalaman Pengguna Chrome yang menyoroti statistik performa di dunia nyata.
- Kartu Skor Kecepatan dan Kalkulator Dampak: bandingkan kecepatan situs dengan situs sejenis dan estimasi potensi peluang pendapatan dari peningkatan kecepatan situs.
Pastikan untuk menguji situs Anda seperti yang dilihat pengguna pertama kali. Buka situs dengan Jendela Samaran (Pribadi), atau gunakan alat browser untuk menonaktifkan penyimpanan dalam cache dan menghapus 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 — coba situs Anda dengan perangkat dan konektivitas yang sama dengan pengguna Anda dan catat pengalaman subjektif Anda.
Jika Anda merasa bingung dengan berbagai alat yang tersedia…
Lihat panduan kami: Cara Memahami 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 Anda harus menggunakan kompresi dengan benar, menggunakan HTTP/2, dan menyertakan header yang sesuai agar browser Anda dapat meng-cache resource.
- Elemen skrip yang dapat dipindahkan ke bagian bawah halaman dan/atau diberi atribut asinkron atau menunda.
- JavaScript dan library yang dapat dihapus.
- CSS yang tidak digunakan dan JavaScript yang tidak digunakan.
- Gambar yang dapat disimpan dengan kompresi yang 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 atas pertanyaan ini, coba latihan pengumpulan persyaratan dari resource pelatihan PWA kami: Audiens, konten Anda dan Desain untuk semua pengguna.
Siapa saja pemangku kepentingan Anda, dan apa prioritas mereka? Hal ini akan memengaruhi cara Anda menyusun, mempresentasikan, dan membagikan data audit.
Jika Anda tidak dapat mengaudit seluruh situs, periksa analisis halaman untuk mendapatkan gambaran tentang tempat 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 pula metrik bisnis seperti biaya hosting, klik iklan, dan konversi. Dapatkan ringkasan dari pemangku kepentingan tentang data yang penting bagi mereka.
Uji, catat, perbaiki, ulangi
Catat status situs Anda sebelum melakukan perubahan apa pun, untuk menemukan masalah dan menetapkan titik awal untuk peningkatan atau regresi. Hal ini memberi Anda data untuk membenarkan dan menghargai upaya pengembangan.
Pastikan untuk menguji beberapa jenis halaman dalam situs Anda — bukan hanya halaman beranda. Untuk aplikasi satu halaman, uji berbagai komponen, rute, dan alur UX, bukan hanya pengalaman pemuatan pertama.