Menerapkan pemuatan instan dengan pola PRPL

PRPL adalah akronim yang menjelaskan pola yang digunakan untuk membuat halaman web dimuat dan menjadi interaktif dengan lebih cepat:

  • Pramuat resource yang terakhir 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 setiap teknik ini saling melengkapi, tetapi masih dapat digunakan secara terpisah untuk mencapai hasil performa.

Audit halaman Anda dengan Lighthouse

Jalankan Lighthouse untuk mengidentifikasi peluang peningkatan yang selaras dengan teknik PRPL:

  1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  2. Klik tab Lighthouse.
  3. Centang kotak Performance dan Progressive Web App.
  4. Klik Jalankan Audit untuk membuat laporan.

Untuk informasi selengkapnya, lihat Menemukan peluang performa dengan Lighthouse.

Pramuat resource penting

Lighthouse akan menampilkan audit yang gagal berikut jika resource tertentu diuraikan dan diambil terlambat:

Lighthouse: Pramuat audit permintaan kunci

Pramuat adalah permintaan pengambilan deklaratif yang memberi tahu browser untuk meminta resource yang tidak dapat ditemukan oleh pemindai pramuat browser, seperti gambar yang dirujuk oleh properti background-image. Pramuat resource yang baru ditemukan dengan menambahkan tag <link> bersama 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. Browser kemudian dapat mengambilnya saat diperlukan.

Untuk mengetahui 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:

Lighthouse: Menghilangkan audit resource yang memblokir rendering

Untuk meningkatkan First Paint, Lighthouse merekomendasikan penyisipan JavaScript penting dan menunda sisanya menggunakan async, serta menyisipkan CSS penting yang digunakan di paruh atas. Hal ini akan meningkatkan performa dengan menghilangkan perjalanan bolak-balik ke server untuk mengambil aset yang memblokir perenderan. Namun, kode inline lebih sulit dikelola dari perspektif pengembangan dan tidak dapat di-cache secara terpisah oleh browser.

Pendekatan lain untuk meningkatkan First Paint adalah merender sisi server HTML awal halaman Anda. Tindakan ini akan langsung menampilkan konten kepada pengguna saat skrip masih diambil, diuraikan, dan dieksekusi. Namun, hal ini dapat meningkatkan payload file HTML secara signifikan, yang dapat membahayakan Waktu untuk Interaktif, atau waktu yang diperlukan aplikasi untuk menjadi interaktif dan dapat merespons input pengguna.

Tidak ada solusi yang tepat untuk mengurangi First Paint di aplikasi Anda, dan Anda sebaiknya hanya mempertimbangkan gaya dan rendering sisi server jika manfaatnya lebih besar daripada kerugian untuk aplikasi Anda. Anda dapat mempelajari kedua konsep ini lebih lanjut dengan referensi berikut.

Permintaan/respons dengan pekerja layanan

Membuat pra-cache aset

Dengan bertindak sebagai proxy, pekerja layanan dapat mengambil aset langsung dari cache, bukan server pada kunjungan berulang. Hal ini tidak hanya memungkinkan pengguna menggunakan aplikasi Anda saat offline, tetapi juga menghasilkan waktu pemuatan halaman yang lebih cepat pada kunjungan berulang.

Gunakan library pihak ketiga untuk menyederhanakan proses pembuatan pekerja layanan, kecuali jika Anda memiliki persyaratan caching yang lebih kompleks daripada yang dapat disediakan oleh library. Misalnya, Workbox menyediakan sekumpulan alat yang memungkinkan Anda membuat dan mengelola pekerja layanan untuk menyimpan aset dalam cache. Untuk mengetahui informasi selengkapnya tentang pekerja layanan dan keandalan offline, lihat panduan pekerja layanan di jalur pembelajaran keandalan.

Pemuatan lambat

Lighthouse akan menampilkan audit yang gagal jika Anda mengirim terlalu banyak data melalui jaringan.

Lighthouse: Memiliki audit payload jaringan yang sangat besar

Ini mencakup semua jenis aset, tetapi payload JavaScript yang besar memerlukan biaya yang sangat mahal karena waktu yang diperlukan browser untuk mengurai dan mengompilasinya. Lighthouse juga memberikan peringatan untuk hal ini jika sesuai.

Lighthouse: Audit waktu booting JavaScript

Untuk mengirim payload JavaScript yang lebih kecil yang hanya berisi kode yang diperlukan saat pengguna pertama kali memuat aplikasi Anda, bagi seluruh paket dan potongan pemuatan lambat sesuai permintaan.

Setelah Anda berhasil membagi paket, lakukan pramuat potongan yang lebih penting (lihat panduan Pramuat aset penting). Pramuat memastikan lebih banyak resource penting diambil dan didownload lebih cepat oleh browser.

Selain memisahkan dan memuat berbagai potongan JavaScript sesuai permintaan, Lighthouse juga menyediakan audit untuk pemuatan lambat gambar non-kritis.

Lighthouse: Menunda audit gambar di balik layar

Jika Anda memuat banyak gambar di halaman web, tunda semua gambar yang berada di paruh bawah, atau di luar area pandang perangkat, saat halaman dimuat (lihat Menggunakan lazysizes untuk menjalankan lazyload gambar).

Langkah Berikutnya

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 performa 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 informasi selengkapnya tentang pola PRPL.