Bersiaplah menghadapi akhir cookie pihak ketiga di Chrome. Uji situs Anda sekarang untuk menemukan kerusakan apa pun.

Halaman ini diterjemahkan oleh Cloud Translation API.

Membantu browser dengan petunjuk resource

Pada modul terakhir tentang mengoptimalkan pemuatan resource, Anda telah mempelajari pengaruh berbagai resource halaman seperti CSS dan JavaScript terhadap kecepatan pemuatan halaman, serta cara mengoptimalkannya dan penayangannya untuk mempercepat rendering halaman. Inilah waktu yang tepat untuk beralih ke aspek lanjutan pemuatan resource, yaitu dengan membantu browser memuatnya lebih cepat menggunakan petunjuk resource.

Petunjuk resource dapat membantu developer lebih mengoptimalkan waktu muat halaman dengan memberi tahu browser cara memuat dan memprioritaskan resource. Kumpulan awal petunjuk resource seperti preconnect dan dns-prefetch adalah yang pertama diperkenalkan. Namun, seiring waktu, preload dan Fetch Priority API telah mengikuti untuk memberikan kemampuan tambahan.

Petunjuk resource menginstruksikan browser untuk melakukan tindakan tertentu sebelumnya yang dapat meningkatkan performa pemuatan. Petunjuk resource dapat melakukan tindakan seperti melakukan pencarian DNS awal, menghubungkan ke server terlebih dahulu, dan bahkan mengambil resource sebelum browser biasanya menemukannya.

Petunjuk resource dapat ditentukan dalam HTML—paling sering di awal dalam elemen <head>—atau ditetapkan sebagai header HTTP. Untuk cakupan modul ini, preconnect, dns-prefetch, dan preload dibahas, serta perilaku pengambilan spekulatif yang disediakan prefetch.

`preconnect`

Petunjuk preconnect digunakan untuk membuat koneksi ke origin lain dari tempat Anda mengambil resource penting. Misalnya, Anda mungkin menghosting gambar atau aset di CDN atau lintas origin lainnya:

<link rel="preconnect" href="https://example.com">

Dengan menggunakan preconnect, Anda mengantisipasi bahwa browser berencana untuk terhubung ke server lintas origin tertentu dalam waktu dekat, dan browser harus membuka koneksi tersebut sesegera mungkin, idealnya sebelum menunggu Parser HTML atau pemindai pramuat melakukannya.

Jika Anda memiliki resource lintas origin dalam jumlah besar di suatu halaman, gunakan preconnect untuk resource yang paling penting untuk halaman saat ini.

Screenshot waktu koneksi untuk resource di panel jaringan Chrome DevTools. Penyiapan koneksi mencakup waktu tunggu, negosiasi proxy, pencarian DNS, penyiapan koneksi, dan negosiasi TLS. — Visualisasi waktu koneksi seperti yang terlihat di panel jaringan Chrome DevTools. Pengaturan waktu dalam kotak merah adalah waktu yang terlibat dalam penyiapan koneksi dengan server lintas origin, yang dapat dikurangi `preconnect` dengan membuat koneksi lebih cepat, bukan pada saat penemuan resource lintas origin.

Kasus penggunaan yang umum untuk preconnect adalah Google Fonts. Google Fonts merekomendasikan agar Anda melakukan preconnect ke domain https://fonts.googleapis.com yang menayangkan deklarasi @font-face dan ke domain https://fonts.gstatic.com yang menyalurkan file font.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Atribut crossorigin digunakan untuk menunjukkan apakah resource harus diambil menggunakan Cross-Origin Resource Sharing (CORS). Saat menggunakan petunjuk preconnect, jika resource yang didownload dari asal menggunakan CORS—seperti file font—Anda perlu menambahkan atribut crossorigin ke petunjuk preconnect.

`dns-prefetch`

Meskipun membuka koneksi ke server lintas origin lebih awal dapat mempercepat waktu pemuatan halaman awal secara signifikan, mungkin tidak wajar atau tidak mungkin menghubungkan ke banyak server lintas origin sekaligus. Jika Anda khawatir Anda mungkin menggunakan preconnect secara berlebihan, petunjuk resource yang jauh lebih murah adalah petunjuk dns-prefetch.

Sesuai namanya, dns-prefetch tidak membuat koneksi ke server lintas origin, tetapi hanya melakukan pencarian DNS terlebih dahulu. Pencarian DNS terjadi saat nama domain di-resolve ke alamat IP yang mendasarinya. Meskipun lapisan cache DNS di tingkat perangkat dan jaringan membantu proses ini menjadi proses yang umumnya cepat, proses ini masih memerlukan waktu.

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

Pencarian DNS cukup murah, dan karena biayanya yang relatif kecil, pencarian DNS mungkin lebih tepat dalam beberapa kasus daripada preconnect. Secara khusus, ini mungkin merupakan petunjuk resource yang diinginkan untuk digunakan dalam kasus link yang membuka situs lain yang menurut Anda akan diikuti oleh pengguna. dnstradamus adalah salah satu alat yang melakukan hal ini secara otomatis menggunakan JavaScript, dan menggunakan Intersection Observer API untuk memasukkan petunjuk dns-prefetch ke dalam HTML halaman saat ini ketika link ke situs lain di-scroll ke area area pengguna.

`preload`

Perintah preload digunakan untuk memulai permintaan awal bagi resource yang diperlukan untuk merender halaman:

<link rel="preload" href="/lcp-image.jpg" as="image">

Perintah preload harus dibatasi untuk resource penting yang terakhir ditemukan. Kasus penggunaan yang paling umum adalah file font, file CSS yang diambil melalui deklarasi @import, atau resource background-image CSS yang kemungkinan merupakan kandidat Largest Contentful Paint (LCP). Dalam kasus seperti itu, file ini tidak akan ditemukan oleh pemindai pramuat karena resource-nya direferensikan dalam resource eksternal.

Perhatian: Jika Anda menggunakan preload untuk mendownload gambar yang ditentukan oleh elemen <img> yang bervariasi berdasarkan area pandang pengguna, pastikan untuk menambahkan atribut imagesrcset ke petunjuk preload guna mendownload gambar yang benar untuk area tampilan saat ini. Anda juga harus mengecualikan atribut src sehingga browser yang tidak mendukung pramuat responsif tidak mendownload image penggantian.

Demikian pula dengan preconnect, perintah preload memerlukan atribut crossorigin jika Anda melakukan pramuat resource CORS—seperti font. Jika Anda tidak menambahkan atribut crossorigin—atau menambahkannya untuk permintaan non-CORS—resource akan didownload oleh browser dua kali, sehingga membuang-buang bandwidth yang seharusnya lebih baik digunakan untuk resource lain.

<link rel="preload" href="/font.woff2" as="font" crossorigin>

Penting: Resource yang ditentukan dalam perintah preload akan didownload dua kali jika atribut as tidak ada pada elemen <link> perintah. Untuk daftar nilai atribut as, lihat dokumentasi MDN tentang nilai atribut as.

Dalam cuplikan HTML sebelumnya, browser diinstruksikan untuk melakukan pramuat /font.woff2 menggunakan permintaan CORS—meskipun /font.woff2 berada di domain yang sama.

Perhatian: Perintah preload adalah pengoptimalan performa yang sangat efektif—yang sebenarnya dapat digunakan secara berlebihan. Resource yang didownload menggunakan perintah preload akan didownload secara efektif dengan prioritas tinggi, dan—jika digunakan secara berlebihan—preload dapat menyebabkan pertentangan bandwidth dengan cara yang negatif terhadap kecepatan pemuatan halaman.

`prefetch`

Penting: Ini adalah penjelasan yang sangat umum tentang petunjuk resource prefetch. Dengan demikian, bagian ini tidak membahas detail mendalam tentang beberapa pertimbangan dan kompromi yang harus Anda pertimbangkan saat menggunakannya. Modul selanjutnya dalam kursus ini membahas detail yang lebih mendalam tentang pengambilan data resource yang diperlukan dalam waktu dekat dengan prioritas rendah, serta pengambilan data halaman untuk mempercepat navigasi di masa mendatang.

Perintah prefetch digunakan untuk memulai permintaan berprioritas rendah bagi resource yang kemungkinan akan digunakan untuk navigasi mendatang:

<link rel="prefetch" href="/next-page.css" as="style">

Perintah ini sebagian besar mengikuti format yang sama dengan perintah preload, hanya atribut rel elemen <link> yang menggunakan nilai "prefetch". Namun, tidak seperti perintah preload, prefetch sangat spekulatif karena Anda memulai pengambilan resource untuk navigasi mendatang yang mungkin atau mungkin tidak terjadi.

Ada kalanya prefetch dapat bermanfaat. Misalnya, jika Anda telah mengidentifikasi alur penggunaan di situs yang diikuti sebagian besar pengguna hingga selesai, prefetch untuk resource yang penting render untuk halaman mendatang tersebut dapat membantu mengurangi waktu pemuatan bagi halaman tersebut.

Perhatian: Mengingat sifat spekulatif prefetch, penggunaannya memiliki potensi kelemahan, yaitu data yang digunakan untuk mengambil resource mungkin tidak digunakan jika pengguna tidak membuka halaman yang pada akhirnya membutuhkan resource yang diambil data. Andalkan analisis atau sumber data lainnya untuk pola penggunaan situs Anda guna menentukan sendiri apakah menggunakan prefetch adalah ide bagus. Atau, Anda dapat menggunakan petunjuk Save-Data untuk memilih tidak menggunakan pengambilan data bagi pengguna yang telah menentukan preferensi untuk pengurangan penggunaan data.

Fetch Priority API

Anda dapat menggunakan Fetch Priority API melalui atribut fetchpriority-nya untuk meningkatkan prioritas resource. Anda dapat menggunakan atribut ini dengan elemen <link>, <img>, dan <script>.

<div class="gallery">
  <div class="poster">
    <img src="img/poster-1.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

Penting: Atribut fetchpriority sangat efektif saat digunakan untuk gambar LCP halaman. Dengan meningkatkan prioritas gambar LCP menggunakan atribut ini, Anda dapat meningkatkan LCP halaman dengan relatif sedikit upaya.

Secara default, gambar diambil dengan prioritas yang lebih rendah. Setelah tata letak, jika gambar ditemukan berada dalam area tampilan awal, prioritasnya akan ditingkatkan ke prioritas Tinggi. Dalam cuplikan HTML sebelumnya, fetchpriority segera memberi tahu browser untuk mendownload gambar LCP yang lebih besar dengan prioritas Tinggi, sedangkan gambar thumbnail yang kurang penting didownload dengan prioritas yang lebih rendah.

Browser modern memuat resource dalam dua fase. Fase pertama dicadangkan untuk resource penting dan berakhir setelah semua skrip pemblokiran telah didownload dan dieksekusi. Selama fase ini, resource prioritas Rendah mungkin akan tertunda download. Dengan menggunakan fetchpriority="high", Anda dapat meningkatkan prioritas resource, sehingga browser dapat mendownloadnya selama fase pertama.

Demo petunjuk resource

Menguji pengetahuan Anda

Apa fungsi petunjuk resource preconnect?

Membuka koneksi ke server lintas origin, termasuk pencarian DNS, serta koneksi dan negosiasi TLS sebelum browser menemukannya.

Benar.

Hanya melakukan pencarian DNS untuk server lintas origin.

Coba lagi.

Apa yang dapat Anda lakukan dengan Fetch Priority API?

Tentukan prioritas untuk mendownload HTML halaman saat ini.

Coba lagi.

Tentukan prioritas relatif untuk elemen <link>, <img>, dan <script>.

Benar.

Kapan Anda harus menggunakan petunjuk prefetch?

Untuk setiap dan semua resource atau halaman yang mungkin diperlukan pengguna, baik mereka benar-benar membutuhkannya di masa mendatang atau tidak.

Coba lagi.

Jika Anda memiliki keyakinan tinggi bahwa resource atau halaman yang ingin Anda ambil datanya diperlukan oleh pengguna.

Benar.

Jika pengguna belum menyatakan preferensi eksplisit untuk pengurangan penggunaan data.

Benar.

Berikutnya: Performa gambar

Sekarang, Anda mungkin mulai merasa cukup percaya diri dengan pengetahuan Anda tentang pertimbangan performa umum dalam hal HTML halaman, elemen <head>, dan petunjuk resource. Namun, ada pengoptimalan tambahan yang khusus untuk berbagai jenis resource yang biasanya dimuat halaman. Selanjutnya, performa gambar akan dibahas dalam modul berikutnya, yang dapat membantu Anda memuat gambar situs Anda dimuat secepat mungkin, apa pun perangkat pengguna.