Pramuat aset penting untuk meningkatkan kecepatan pemuatan

Houssein Djirdeh
Jeremy Wagner
Milica Mihajlija

Saat Anda membuka sebuah laman web, browser akan 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 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 aset yang biasanya ditemukan terlambat oleh browser.

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

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

Screenshot panel Jaringan Chrome DevTools setelah menerapkan pramuat.
Dalam contoh ini, font Pacifico dipramuat, 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 level ketiga dalam rantai ini sebagai aset yang terlambat ditemukan. Anda dapat menggunakan audit Pramuat permintaan kunci untuk mengidentifikasi resource mana yang akan di-pramuat.

Audit permintaan kunci pramuat Lighthouse.

Anda dapat melakukan pramuat resource dengan menambahkan tag <link> dengan rel="preload" ke bagian head dokumen HTML Anda:

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

Browser meng-cache resource yang dimuat sebelumnya sehingga segera tersedia saat diperlukan. (Tindakan ini tidak akan mengeksekusi 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 bagus dalam memprioritaskan resource. Itulah sebabnya Anda harus menggunakan preload seperlunya dan hanya melakukan pramuat 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 bawaan yang tidak digunakan.

Kasus penggunaan

Memuat resource yang ditentukan di CSS terlebih dahulu

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. Melakukan pramuat resource ini akan memastikan resource diambil sebelum file CSS didownload.

Melakukan pramuat file CSS

Jika menggunakan pendekatan CSS penting, Anda membagi CSS menjadi dua bagian. CSS penting yang diperlukan untuk merender konten paruh atas dijadikan inline dalam <head> dokumen dan CSS yang tidak penting biasanya dimuat secara lambat dengan JavaScript. Menunggu JavaScript dijalankan 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 untuk Interaktif. Pramuat berfungsi optimal jika Anda memisahkan paket JavaScript dan hanya melakukan pramuat potongan penting.

Cara mengimplementasikan 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 menetapkan prioritas resource yang diambil terlebih dahulu sesuai dengan jenisnya, menyetel header yang tepat, dan menentukan apakah resource sudah ada di cache. Nilai yang diterima untuk atribut ini meliputi: script, style, font, image, dan lainnya.

Beberapa jenis resource, seperti font, dimuat dalam mode anonim. Untuk keduanya, 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 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 semua jenis resource melalui header HTTP Link:

Link: </css/style.css>; rel="preload"; as="style"

Manfaat menetapkan preload di Header HTTP adalah browser tidak perlu mengurai dokumen untuk menemukannya, yang dapat menawarkan sedikit peningkatan dalam beberapa kasus.

Melakukan pramuat modul JavaScript dengan webpack

Jika menggunakan pemaket modul yang membuat file build aplikasi, Anda harus memeriksa apakah pemaket modul 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 canggih yang berpengaruh pada kecepatan pemuatan. Pengoptimalan tersebut dapat menyebabkan perubahan pada Data Web Inti situs Anda, dan penting untuk memahaminya.

Largest Contentful Paint (LCP)

Pramuat memiliki efek yang kuat terhadap Largest Contentful Paint (LCP) dalam hal font dan gambar, karena gambar dan node teks dapat menjadi kandidat LCP. Banner besar dan teks berukuran besar yang dirender menggunakan font web bisa sangat diuntungkan oleh petunjuk pramuat yang ditempatkan dengan baik, dan harus digunakan saat ada peluang untuk menyampaikan bit konten penting ini kepada pengguna dengan lebih cepat.

Namun, Anda harus berhati-hati saat melakukan pramuat—dan pengoptimalan lainnya. Khususnya, hindari pramuat terlalu banyak resource. Jika terlalu banyak sumber daya yang diprioritaskan, tidak ada satu pun sumber daya yang diprioritaskan. Efek dari petunjuk pramuat yang berlebihan akan sangat merugikan bagi jaringan yang lebih lambat sehingga pertentangan bandwidth akan terlihat lebih jelas.

Sebaliknya, fokuslah pada beberapa resource bernilai tinggi yang Anda tahu akan mendapatkan manfaat dari pramuat yang ditempatkan dengan baik. Ketika melakukan pramuat font, pastikan Anda menyajikan 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 Anda jika kandidat LCP adalah node teks.

Jika menyangkut LCP dan JavaScript, pastikan Anda mengirim markup lengkap dari server agar pemindai pramuat browser berfungsi dengan baik. Jika Anda menyajikan pengalaman yang sepenuhnya bergantung pada JavaScript untuk merender markup dan tidak dapat mengirim HTML yang di-render server, akan menguntungkan untuk melangkah ke langkah yang tidak dapat dilakukan pemindai pramuat browser dan melakukan pramuat sumber daya yang hanya dapat ditemukan saat JavaScript selesai memuat dan mengeksekusi.

Pergeseran Tata Letak Kumulatif (CLS)

Pergeseran Tata Letak Kumulatif (CLS) adalah metrik yang sangat penting yang berkaitan dengan 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. Pramuat font saat menggunakan nilai block default untuk font-display. Ini adalah keseimbangan yang halus. Memblokir tampilan font tanpa penggantian dapat dianggap sebagai masalah pengalaman pengguna. Di satu sisi, memuat font dengan font-display: block; menghilangkan pergeseran tata letak terkait font web. Di sisi lain, Anda perlu memuat font web tersebut sesegera mungkin jika sangat 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 bagi pengalaman pengguna, tetapi masih digunakan untuk merender teks halaman dalam jumlah besar, pertimbangkan untuk menggunakan nilai optional. Dalam kondisi buruk, optional akan menampilkan teks halaman dalam font pengganti saat memuat font di latar belakang untuk navigasi berikutnya. Hasil bersih dalam kondisi ini adalah CLS yang ditingkatkan, karena font sistem akan segera dirender, sementara pemuatan halaman berikutnya akan memuat font segera tanpa pergeseran tata letak.

CLS adalah metrik yang sulit dioptimalkan terkait font web. Seperti biasa, bereksperimenlah di lab, tetapi percayalah data kolom Anda untuk menentukan apakah strategi pemuatan font Anda meningkatkan CLS atau membuatnya lebih buruk.

Interaksi dengan Next Paint (INP)

Interaction to Next Paint adalah metrik yang mengukur responsivitas terhadap input pengguna. Karena pangsa interaktivitas terbesar di web didorong oleh JavaScript, melakukan pramuat JavaScript yang mendukung interaksi penting dapat membantu menjaga INP halaman tetap lebih rendah. Namun, perlu diketahui bahwa melakukan pramuat terlalu banyak JavaScript selama startup dapat menimbulkan konsekuensi negatif yang tidak diinginkan jika terlalu banyak resource yang bersaing untuk bandwidth.

Sebaiknya Anda juga berhati-hati saat 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 potongan JavaScript yang diperlukan sebelum interaksi terjadi. Salah satu contohnya adalah melakukan pramuat JavaScript yang diperlukan untuk memvalidasi konten formulir jika 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 seperlunya dan ukur dampaknya di dunia nyata.