PRPL adalah akronim yang menggambarkan pola yang digunakan untuk membuat laman web menjadi interaktif, lebih cepat:
- Pramuat resource yang baru ditemukan.
- Render rute awal sesegera mungkin.
- Lakukan pra-cache aset yang tersisa.
- Pemuatan lambat rute lainnya dan aset yang tidak penting.
Dalam panduan ini, pelajari bagaimana masing-masing teknik tersebut bisa bekerja sama tetapi tetap bisa digunakan secara terpisah untuk mencapai hasil performa.
Audit halaman Anda dengan Lighthouse
Jalankan Lighthouse untuk mengidentifikasi peluang perbaikan yang selaras dengan PRPL teknik:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Centang kotak Performance dan Progressive Web App.
- Klik Run Audits untuk membuat laporan.
Untuk mengetahui informasi selengkapnya, lihat Menemukan peluang performa dengan Lighthouse.
Pramuat resource penting
Lighthouse akan menampilkan audit yang gagal berikut ini jika sumber daya tertentu diuraikan dan terlambat diambil:
Pramuat
merupakan permintaan pengambilan deklaratif yang memberi tahu browser untuk meminta resource yang tidak dapat ditemukan oleh pemindai pramuat browser, seperti gambar yang direferensikan oleh properti background-image. Pramuat resource yang ditemukan terakhir dengan menambahkan tag <link> dengan rel="preload" ke bagian head dokumen HTML Anda:
<link rel="preload" as="image" href="hero-image.jpg">
Menambahkan perintah <link rel="preload"> akan memulai permintaan untuk resource tersebut dan menyimpannya dalam cache. Kemudian, browser dapat mengambilnya saat diperlukan.
Untuk informasi selengkapnya tentang melakukan pramuat resource penting, lihat Panduan Pramuat aset penting.
Merender rute awal sesegera mungkin
Lighthouse memberikan peringatan jika ada resource yang menunda First Paint, saat situs Anda merender piksel ke layar:
Untuk meningkatkan Gambar Pertama, Lighthouse merekomendasikan {i>inline<i} JavaScript penting dan
menunda sisanya menggunakan
async,
serta menyisipkan CSS penting yang digunakan di paruh atas. Hal ini meningkatkan performa
dengan menghilangkan perjalanan bolak-balik ke server untuk mengambil aset yang memblokir render.
Namun, dari segi pengembangan, kode {i>inline<i} lebih sulit dikelola dan
tidak dapat di-cache secara terpisah oleh browser.
Pendekatan lain untuk meningkatkan First Paint adalah render sisi server HTML halaman Anda. Ini akan langsung menampilkan konten kepada pengguna saat skrip masih sedang diambil, diuraikan, dan dieksekusi. Namun, hal ini dapat meningkatkan payload file HTML secara signifikan, yang dapat mengganggu Time to Interactive, atau waktu yang dibutuhkan aplikasi Anda untuk menjadi interaktif dan dapat merespons terhadap input pengguna.
Tidak ada satu solusi yang benar untuk mengurangi Gambar Pertama dalam aplikasi, dan Anda sebaiknya hanya mempertimbangkan penyisipan gaya dan sisi server rendering jika manfaatnya lebih besar daripada kompromi untuk aplikasi Anda. Anda dapat pelajari kedua konsep ini lebih lanjut dengan referensi berikut.
Melakukan pra-cache aset
Dengan bertindak sebagai proxy, pekerja layanan dapat mengambil aset langsung dari cache daripada server pada kunjungan berulang. Hal ini tidak hanya memungkinkan pengguna menggunakan saat sedang offline, tetapi juga menghasilkan waktu muat halaman yang lebih cepat kunjungan berulang.
Menggunakan library pihak ketiga untuk menyederhanakan proses pembuatan pekerja layanan kecuali Anda memiliki persyaratan {i>caching<i} yang lebih kompleks daripada yang dapat dilakukan oleh {i>library<i} sediakan. Misalnya, Workbox menyediakan kumpulan alat yang memungkinkan Anda untuk membuat dan memelihara pekerja layanan untuk menyimpan aset dalam cache. Untuk informasi lebih lanjut tentang pekerja layanan dan keandalan {i>offline<i}, lihat panduan pekerja layanan di jalur pembelajaran keandalan.
Pemuatan lambat
Lighthouse akan menampilkan audit yang gagal jika Anda mengirim terlalu banyak data melalui jaringan.
Ini mencakup semua jenis aset, tetapi payload JavaScript yang besar biaya yang mahal karena waktu yang dibutuhkan browser untuk mengurai dan mengompilasinya. Lighthouse juga memberikan peringatan untuk hal ini jika perlu.
Untuk mengirim payload JavaScript yang lebih kecil yang hanya berisi kode yang diperlukan saat pengguna pertama kali memuat aplikasi Anda, bagi keseluruhan paket dan bagian pemuatan lambat sesuai permintaan.
Setelah Anda berhasil membagi paket, pramuat bagian yang lebih penting (lihat panduan Pramuat aset penting). Pramuat memastikan resource yang lebih penting diambil dan didownload lebih cepat oleh browser.
Selain memisahkan dan memuat potongan JavaScript yang berbeda sesuai permintaan, Lighthouse juga menyediakan audit untuk pemuatan lambat gambar non-kritis.
Jika Anda memuat banyak gambar di halaman web, tunda semua gambar yang ada di paruh bawah, atau di luar area pandang perangkat, saat halaman dimuat (lihat Menggunakan lazysizes untuk memuat gambar secara lambat).
Langkah Berikutnya
Sekarang setelah Anda memahami beberapa konsep dasar di balik pola PRPL, lanjutkan ke panduan berikutnya di bagian ini untuk mempelajari lebih lanjut. Penting untuk diingat bahwa tidak semua teknik perlu diterapkan bersama. Setiap upaya yang dilakukan dengan salah satu hal berikut akan memberikan peningkatan kinerja yang signifikan.
- Pramuat resource penting.
- Render rute awal sesegera mungkin.
- Lakukan pra-cache aset yang tersisa.
- Pemuatan lambat rute lainnya dan aset yang tidak penting.
Anda dapat membaca selengkapnya tentang pola PRPL.