Pramuat aset penting untuk meningkatkan kecepatan pemuatan

Houssein Djirdeh
Jeremy Wagner
Milica Mihajlija

Saat Anda membuka halaman web, browser akan meminta dokumen HTML dari server, mengurai kontennya, dan mengirimkan permintaan terpisah untuk setiap resource yang dirujuk. Sebagai developer, Anda sudah mengetahui semua resource yang diperlukan halaman dan resource mana yang paling penting. Anda dapat menggunakan pengetahuan tersebut untuk meminta resource penting terlebih dahulu dan mempercepat proses pemuatan. Postingan ini menjelaskan cara melakukannya dengan <link rel="preload">.

Cara kerja pramuat

Pramuat paling cocok untuk resource yang biasanya ditemukan terlambat oleh browser.

Screenshot panel Jaringan Chrome DevTools.
Dalam contoh ini, font Pacifico ditentukan dalam stylesheet dengan aturan @font-face. Browser memuat file font hanya setelah selesai mendownload dan mengurai stylesheet.

Dengan melakukan pramuat resource tertentu, Anda memberi tahu browser bahwa Anda ingin mengambilnya lebih cepat daripada yang akan ditemukan browser karena Anda yakin bahwa resource tersebut penting untuk halaman saat ini.

Screenshot panel Jaringan Chrome DevTools setelah menerapkan pramuat.
Dalam contoh ini, font Pacifico dimuat sebelumnya, sehingga download terjadi secara paralel dengan stylesheet.

Rantai permintaan penting mewakili urutan resource yang diprioritaskan dan diambil oleh browser. Lighthouse mengidentifikasi aset yang berada di tingkat ketiga rantai ini sebagai aset yang baru ditemukan. Anda dapat menggunakan audit Preload key requests untuk mengidentifikasi resource yang akan dipramuat.

Audit permintaan kunci pramuat Lighthouse.

Anda dapat memuat ulang resource dengan menambahkan tag <link> dengan rel="preload" ke head dokumen HTML:

<link rel="preload" as="script" href="critical.js">

Browser meng-cache resource yang dimuat sebelumnya sehingga langsung tersedia saat diperlukan. (Tindakan ini tidak mengeksekusi skrip atau menerapkan stylesheet.)

Petunjuk resource, misalnya, preconnectdan prefetch, dijalankan sesuai keinginan browser. Di sisi lain, preload bersifat wajib untuk browser. Browser modern sudah cukup baik dalam memprioritaskan resource, itulah sebabnya penting untuk menggunakan preload seperlunya dan hanya memuat ulang resource yang paling penting.

Pramuat yang tidak digunakan akan memicu peringatan Konsol di Chrome, sekitar 3 detik setelah peristiwa load.

Peringatan Konsol Chrome DevTools tentang resource yang dimuat sebelumnya dan tidak digunakan.

Kasus penggunaan

Memuat ulang resource yang ditentukan di CSS

Font yang ditentukan dengan aturan @font-face atau gambar latar belakang yang ditentukan dalam file CSS tidak akan ditemukan hingga browser mendownload dan mengurai file CSS tersebut. Memuat ulang resource ini memastikan resource diambil sebelum file CSS didownload.

Memuat file CSS secara otomatis

Jika menggunakan pendekatan CSS penting, Anda akan membagi CSS menjadi dua bagian. CSS penting yang diperlukan untuk merender konten paruh atas disejajarkan di <head> dokumen dan CSS non-penting biasanya dimuat lambat dengan JavaScript. Menunggu JavaScript dieksekusi sebelum memuat CSS non-penting dapat menyebabkan penundaan rendering saat pengguna men-scroll, jadi sebaiknya gunakan <link rel="preload"> untuk memulai download lebih cepat.

Memuat file JavaScript secara otomatis

Karena browser tidak mengeksekusi file yang dimuat sebelumnya, pramuat berguna untuk memisahkan pengambilan dari eksekusi yang dapat meningkatkan metrik seperti Waktu hingga Interaktif. Pemuatan awal akan berfungsi optimal jika Anda membagi paket JavaScript dan hanya memuat awal bagian penting.

Cara menerapkan rel=preload

Cara termudah untuk menerapkan preload adalah dengan menambahkan tag <link> ke <head> dokumen:

<head>
  <link rel="preload" as="script" href="critical.js">
</head>

Menyediakan atribut as membantu browser menetapkan prioritas resource yang diambil sebelumnya sesuai dengan jenisnya, menetapkan header yang tepat, dan menentukan apakah resource sudah ada di cache. Nilai yang diterima untuk atribut ini mencakup: script, style, font, image, dan others.

Beberapa jenis resource, seperti font, dimuat dalam mode anonim. Untuk atribut 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 tertaut. Browser menggunakan nilai atribut type untuk memastikan bahwa resource dimuat sebelumnya hanya jika jenis filenya didukung. Jika 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 browser tidak perlu mengurai dokumen untuk menemukannya, yang dapat menawarkan peningkatan kecil dalam beberapa kasus.

Memuat modul JavaScript secara otomatis dengan webpack

Jika menggunakan bundler modul yang membuat file build aplikasi, Anda perlu memeriksa apakah bundler 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 pada Core Web Vitals

Pramuat adalah pengoptimalan performa yang efektif dan memengaruhi kecepatan pemuatan. Pengoptimalan tersebut dapat menyebabkan perubahan pada Core Web Vitals situs Anda, dan Anda harus mengetahuinya.

Largest Contentful Paint (LCP)

Pramuat memiliki efek yang kuat pada Largest Contentful Paint (LCP) jika menyangkut font dan gambar, karena node gambar dan teks dapat menjadi kandidat LCP. Gambar hero dan teks panjang yang dirender menggunakan font web dapat memperoleh manfaat yang signifikan dari petunjuk pramuat yang ditempatkan dengan baik, dan harus digunakan jika ada peluang untuk mengirimkan potongan konten penting ini kepada pengguna dengan lebih cepat.

Namun, Anda harus berhati-hati dalam hal pramuat—dan pengoptimalan lainnya. Secara khusus, hindari memuat ulang terlalu banyak resource. Jika terlalu banyak resource yang diprioritaskan, tidak ada resource yang diprioritaskan. Efek petunjuk pramuat yang berlebihan akan sangat merugikan pengguna di jaringan yang lebih lambat, tempat pertentangan bandwidth akan lebih terlihat.

Sebagai gantinya, fokuslah pada beberapa resource bernilai tinggi yang Anda tahu akan mendapatkan manfaat dari pramuat yang ditempatkan dengan baik. Saat memuat font secara otomatis, pastikan Anda menayangkan font dalam format WOFF 2.0 untuk mengurangi waktu pemuatan resource sebanyak mungkin. Karena WOFF 2.0 memiliki dukungan browser yang sangat baik, menggunakan format lama seperti WOFF 1.0 atau TrueType (TTF) akan menunda LCP jika kandidat LCP adalah node teks.

Untuk LCP dan JavaScript, Anda harus memastikan bahwa Anda mengirim markup lengkap dari server agar pemindai pramuat browser berfungsi dengan baik. Jika Anda menayangkan pengalaman yang sepenuhnya mengandalkan JavaScript untuk merender markup dan tidak dapat mengirim HTML yang dirender server, akan lebih baik jika Anda melakukan tindakan yang tidak dapat dilakukan oleh pemindai pramuat browser dan memuat ulang resource yang hanya dapat ditemukan saat JavaScript selesai dimuat dan dieksekusi.

Pergeseran Tata Letak Kumulatif (CLS)

Cumulative Layout Shift (CLS) adalah metrik yang sangat penting terkait font web, dan CLS memiliki interaksi yang 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:

  1. Mempramuat font saat menggunakan nilai block default untuk font-display. Ini adalah keseimbangan yang sulit. Memblokir tampilan font tanpa penggantian dapat dianggap sebagai masalah pengalaman pengguna. Di satu sisi, memuat font dengan font-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 penting bagi pengalaman pengguna. Menggabungkan pramuat dengan font-display: block; mungkin merupakan kompromi yang dapat diterima.
  2. Pramuat font saat menggunakan nilai fallback untuk font-display. fallback adalah kompromi antara swap dan block, karena memiliki periode pemblokiran yang sangat singkat.
  3. Gunakan nilai optional untuk font-display tanpa pramuat. Jika font web tidak penting untuk pengalaman pengguna, tetapi masih digunakan untuk merender teks halaman dalam jumlah yang signifikan, pertimbangkan untuk menggunakan nilai optional. Dalam kondisi yang tidak menguntungkan, optional akan menampilkan teks halaman dalam font pengganti saat memuat font 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 untuk font web. Seperti biasa, lakukan eksperimen di lab, tetapi percayalah pada data lapangan untuk menentukan apakah strategi pemuatan font Anda meningkatkan CLS atau memperburuknya.

Interaction to Next Paint (INP)

Interaction to Next Paint adalah metrik yang mengukur responsivitas terhadap input pengguna. Karena sebagian besar interaktivitas di web didorong oleh JavaScript, memuat JavaScript yang mendukung interaksi penting secara otomatis dapat membantu menjaga INP halaman tetap lebih rendah. Namun, perhatikan bahwa memuat JavaScript terlalu banyak selama startup dapat menimbulkan konsekuensi negatif yang tidak diinginkan jika terlalu banyak resource yang bersaing untuk mendapatkan bandwidth.

Anda juga harus 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 mengandalkan JavaScript yang dimuat tepat di awal interaksi. Untuk mengimbangi hal ini, Anda harus memeriksa intent pengguna, dan memasukkan pramuat untuk bagian JavaScript yang diperlukan sebelum interaksi terjadi. Salah satu contohnya adalah memuat JavaScript yang diperlukan untuk memvalidasi konten formulir saat salah satu kolom dalam formulir difokuskan.

Kesimpulan

Untuk meningkatkan kecepatan halaman, pramuat resource penting yang terlambat ditemukan oleh browser. Memuat semua hal secara otomatis akan kontraproduktif, jadi gunakan preload seperlunya dan ukur dampaknya di dunia nyata.