Saat Anda membuka laman web, browser meminta dokumen HTML dari server, mengurai isinya, dan mengirimkan permintaan terpisah untuk sumber daya yang direferensikan. Sebagai developer, Anda sudah mengetahui semua resource yang dibutuhkan halaman Anda dan mana yang paling penting. Anda dapat menggunakan pengetahuan tersebut untuk meminta resource penting sebelumnya dan mempercepat proses pemuatan. Postingan ini menjelaskan cara mencapainya dengan <link rel="preload">.
Cara kerja pramuat
Pramuat paling cocok untuk sumber daya yang biasanya ditemukan terlambat oleh browser.
@font-face. Browser memuat file font hanya setelah selesai mendownload dan mengurai stylesheet.Dengan melakukan pramuat aset tertentu, Anda memberi tahu browser bahwa Anda ingin mengambilnya lebih cepat daripada browser yang akan menemukannya karena Anda yakin hal ini penting untuk halaman saat ini.
Rantai permintaan penting mewakili urutan resource yang diprioritaskan dan diambil oleh browser. Lighthouse mengidentifikasi aset yang berada di tingkat ketiga dalam rantai ini sebagai aset yang baru ditemukan. Anda dapat menggunakan audit Pramuat permintaan kunci untuk mengidentifikasi resource mana yang akan dipramuat.
Anda dapat melakukan pramuat resource dengan menambahkan tag <link> dengan rel="preload" di bagian head dokumen HTML Anda:
<link rel="preload" as="script" href="critical.js">
Browser men-cache resource yang dimuat sebelumnya sehingga resource tersebut segera tersedia saat diperlukan. (Tidak menjalankan skrip atau menerapkan stylesheet.)
Petunjuk resource, misalnya, preconnect dan prefetch, dijalankan sesuai keinginan browser. Di sisi lain, preload bersifat wajib untuk browser. Browser modern sudah cukup baik dalam memprioritaskan resource. Oleh karena itu, penting untuk menggunakan preload seperlunya dan hanya melakukan pramuat resource yang paling penting.
Pramuat yang tidak digunakan memicu peringatan Konsol di Chrome, sekitar 3 detik setelah peristiwa load.
Kasus penggunaan
Melakukan pramuat resource yang ditentukan dalam CSS
Font yang ditentukan dengan aturan @font-face atau gambar latar yang ditentukan dalam file CSS tidak akan ditemukan hingga browser mendownload dan mengurai file CSS tersebut. Pramuat resource ini memastikan resource tersebut diambil sebelum file CSS didownload.
Melakukan pramuat file CSS
Jika menggunakan pendekatan CSS kritis, Anda bagi CSS menjadi dua bagian. CSS penting yang diperlukan untuk merender konten paruh atas disisipkan dalam <head> dokumen dan CSS yang tidak penting biasanya dimuat dengan lambat dengan JavaScript. Menunggu JavaScript dieksekusi sebelum memuat CSS yang tidak penting dapat menyebabkan penundaan rendering saat pengguna men-scroll, jadi sebaiknya gunakan <link rel="preload"> untuk memulai download lebih cepat.
Melakukan pramuat file JavaScript
Karena browser tidak mengeksekusi file yang dipramuat, pramuat berguna untuk memisahkan pengambilan dari eksekusi yang dapat meningkatkan metrik seperti Waktu hingga Interaktif. Pramuat berfungsi optimal jika Anda memisahkan paket JavaScript dan hanya melakukan pramuat bagian-bagian penting.
Cara menerapkan rel=pramuat
Cara paling sederhana untuk menerapkan preload adalah dengan menambahkan tag <link> ke <head> dokumen:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
Menyediakan atribut as akan membantu browser menyetel prioritas resource yang telah diambil sebelumnya sesuai dengan jenisnya, menyetel header yang tepat, dan menentukan apakah resource sudah ada dalam cache atau belum. Nilai yang diterima untuk atribut ini mencakup: script, style, font, image, dan lainnya.
Beberapa jenis resource, seperti font, dimuat dalam mode anonim. Untuk bisnis tersebut, Anda harus menetapkan atribut crossorigin dengan preload:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
Elemen <link> juga menerima atribut type, yang berisi jenis MIME dari resource yang ditautkan. Browser menggunakan nilai atribut type untuk memastikan bahwa resource dipramuat hanya jika jenis filenya didukung. Jika browser tidak mendukung jenis resource yang ditentukan, browser akan mengabaikan <link rel="preload">.
Anda juga dapat melakukan pramuat jenis resource apa pun melalui header HTTP Link:
Link: </css/style.css>; rel="preload"; as="style"
Manfaat menentukan preload di Header HTTP adalah bahwa browser tidak perlu mengurai dokumen untuk menemukannya, yang dapat memberikan peningkatan kecil dalam beberapa kasus.
Melakukan pramuat modul JavaScript dengan webpack
Jika menggunakan pemaket modul yang membuat file build aplikasi, Anda harus memeriksa apakah pemaket tersebut mendukung injeksi tag pramuat. Dengan webpack versi 4.6.0 atau yang lebih baru, pramuat didukung melalui penggunaan komentar ajaib di dalam import():
import(_/* webpackPreload: true */_ "CriticalChunk")
Jika Anda menggunakan webpack versi lama, gunakan plugin pihak ketiga seperti preload-webpack-plugin.
Efek pramuat di Core Web Vitals
Pramuat adalah pengoptimalan performa yang andal dan berpengaruh pada kecepatan pemuatan. Pengoptimalan tersebut dapat menyebabkan perubahan pada Core Web Vitals situs Anda, dan penting untuk mengetahuinya.
Largest Contentful Paint (LCP)
Pramuat memiliki efek kuat pada Largest Contentful Paint (LCP) dalam hal font dan gambar, karena gambar dan node teks dapat menjadi kandidat LCP. Banner besar dan serangkaian teks besar yang dirender menggunakan font web dapat secara signifikan memanfaatkan petunjuk pramuat yang ditempatkan dengan baik, dan harus digunakan ketika ada peluang untuk menyampaikan potongan konten penting ini kepada pengguna dengan lebih cepat.
Namun, Anda perlu berhati-hati dalam hal pramuat—dan pengoptimalan lainnya. Secara khusus, hindari pramuat terlalu banyak resource. Jika terlalu banyak sumber daya yang diprioritaskan, sebenarnya tidak ada satu pun yang diprioritaskan. Efek dari petunjuk pramuat yang berlebihan akan sangat merugikan bagi pengguna di jaringan yang lebih lambat yang akan lebih jelas mengalami pertentangan bandwidth.
Sebagai gantinya, fokuslah pada beberapa referensi bernilai tinggi yang Anda tahu akan mendapatkan manfaat dari pramuat yang ditempatkan dengan baik. Saat melakukan pramuat font, pastikan Anda menayangkan font dalam format WOFF 2.0 untuk mengurangi waktu muat resource sebanyak mungkin. Karena WOFF 2.0 memiliki dukungan browser yang sangat baik, penggunaan format lama seperti WOFF 1.0 atau TrueType (TTF) akan menunda LCP jika kandidat LCP adalah node teks.
Terkait LCP dan JavaScript, Anda harus memastikan bahwa Anda mengirimkan markup lengkap dari server agar pemindai pramuat browser dapat berfungsi dengan baik. Jika Anda menyajikan pengalaman yang sepenuhnya mengandalkan JavaScript untuk merender markup dan tidak dapat mengirim HTML yang dirender server, akan menguntungkan untuk masuk ke tempat yang tidak dapat dilakukan pemindai pramuat browser dan melakukan pramuat resource yang hanya akan dapat ditemukan saat JavaScript selesai memuat dan mengeksekusi.
Pergeseran Tata Letak Kumulatif (CLS)
Pergeseran Tata Letak Kumulatif (CLS) adalah metrik yang sangat penting untuk font web, dan CLS memiliki interaksi signifikan dengan font web yang menggunakan properti CSS font-display untuk mengelola cara font dimuat. Untuk meminimalkan pergeseran tata letak terkait font web, pertimbangkan strategi berikut:
- Pramuat font saat menggunakan nilai
blockdefault untukfont-display. Ini adalah keseimbangan yang indah. Memblokir tampilan font tanpa penggantian dapat dianggap sebagai masalah pengalaman pengguna. Di satu sisi, memuat font denganfont-display: block;akan menghilangkan pergeseran tata letak terkait font web. Di sisi lain, Anda tetap ingin font web tersebut dimuat sesegera mungkin jika font tersebut sangat penting bagi pengalaman pengguna. Menggabungkan pramuat denganfont-display: block;mungkin merupakan kompromi yang dapat diterima. - Pramuat font saat menggunakan nilai
fallbackuntukfont-display.fallbackadalah kompromi antaraswapdanblock, karena memiliki periode pemblokiran yang sangat singkat. - Gunakan nilai
optionaluntukfont-displaytanpa pramuat. Jika font web tidak penting bagi pengalaman pengguna, tetapi masih digunakan untuk merender sejumlah besar teks halaman, sebaiknya gunakan nilaioptional. Dalam kondisi yang merugikan,optionalakan menampilkan teks halaman dalam font pengganti saat font tersebut dimuat di latar belakang untuk navigasi berikutnya. Hasil bersih dalam kondisi ini adalah peningkatan CLS, karena font sistem akan langsung dirender, sementara pemuatan halaman berikutnya akan langsung memuat font tanpa pergeseran tata letak.
CLS adalah metrik yang sulit dioptimalkan jika menyangkut font web. Seperti biasa, lakukan eksperimen di lab, tetapi percayalah pada data kolom Anda untuk menentukan apakah strategi pemuatan font Anda meningkatkan CLS atau memperburuk.
Interaksi dengan Next Paint (INP)
Interaction to Next Paint adalah metrik yang mengukur responsivitas terhadap input pengguna. Karena sebagian besar interaktivitas di web didorong oleh JavaScript, pramuat JavaScript yang mendukung interaksi penting dapat membantu menjaga INP halaman tetap rendah. Namun, perhatikan bahwa melakukan pramuat terlalu banyak JavaScript selama startup dapat menimbulkan konsekuensi negatif yang tidak diinginkan jika terlalu banyak resource yang bersaing untuk bandwidth.
Anda juga perlu berhati-hati dalam melakukan pemisahan kode. Pemisahan kode adalah pengoptimalan yang sangat baik untuk mengurangi jumlah JavaScript yang dimuat selama startup, tetapi interaksi dapat tertunda jika interaksi tersebut bergantung pada JavaScript yang dimuat tepat di awal interaksi. Sebagai kompensasi ini, Anda harus memeriksa intent pengguna, dan menginjeksikan pramuat untuk potongan JavaScript yang diperlukan sebelum interaksi terjadi. Salah satu contohnya adalah melakukan pramuat JavaScript yang diperlukan untuk memvalidasi konten formulir saat salah satu kolom dalam formulir difokuskan.
Kesimpulan
Untuk meningkatkan kecepatan halaman, lakukan pramuat resource penting yang ditemukan terlambat oleh browser. Melakukan pramuat semuanya akan menjadi kontraproduktif, jadi gunakan preload secukupnya dan ukur dampaknya di dunia nyata.