Terima kasih telah menonton Google I/O. Tonton konten secara on-demand.

Halaman ini diterjemahkan oleh Cloud Translation API.

Membantu browser dengan petunjuk resource

Di modul terakhir tentang mengoptimalkan pemuatan resource, Anda telah mempelajari cara berbagai sumber daya halaman seperti CSS dan JavaScript dapat memengaruhi kecepatan pemuatan halaman, dan bagaimana Anda dapat mengoptimalkannya dan penayangannya untuk mempercepat rendering halaman. Ini adalah waktu yang tepat untuk pindah ke aspek yang lebih maju dari sumber daya memuat, dan itu termasuk membantu browser memuatnya lebih cepat dengan menggunakan petunjuk resource.

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

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

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

`preconnect`

Petunjuk preconnect digunakan untuk membuat koneksi ke asal 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 terhubung ke server lintas asal tertentu dalam waktu yang sangat dekat, dan bahwa browser harus segera membuka koneksi itu, idealnya sebelum menunggu Parser HTML atau pemindai pramuat untuk melakukannya.

Jika Anda memiliki banyak resource lintas asal di sebuah halaman, gunakan preconnect untuk sumber daya yang paling penting untuk laman saat ini.

Screenshot pengaturan waktu koneksi untuk resource di panel jaringan Chrome DevTools. Penyiapan koneksi mencakup waktu tunggu, negosiasi proxy, pencarian DNS, penyiapan koneksi, dan negosiasi TLS. — Visualisasi pengaturan waktu koneksi seperti yang terlihat di panel jaringan Chrome DevTools. Waktu di dalam kotak merah adalah pengaturan waktu yang digunakan koneksi dengan server lintas origin, yang dapat dilakukan `preconnect` mengurangi dengan membangun koneksi lebih cepat, daripada pada saat penemuan resource lintas origin.

Kasus penggunaan umum untuk preconnect adalah Google Fonts. Google Fonts merekomendasikan yang Anda preconnect ke domain https://fonts.googleapis.com yang berfungsi deklarasi @font-face dan ke domain https://fonts.gstatic.com yang menayangkan 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 origin menggunakan CORS—seperti file font—maka Anda perlu menambahkan atribut crossorigin ke Petunjuk preconnect.

`dns-prefetch`

Meskipun membuka koneksi ke server lintas asal lebih awal dapat secara signifikan meningkatkan waktu muat laman awal, mungkin tidak masuk akal atau tidak memungkinkan untuk membuat koneksi ke banyak server lintas asal sekaligus. Jika Anda khawatir Anda mungkin terlalu sering menggunakan preconnect, petunjuk resource yang jauh lebih murah adalah Petunjuk dns-prefetch.

Sesuai namanya, dns-prefetch tidak membuat koneksi ke lintas origin server tertentu, namun hanya melakukan pencarian DNS sebelumnya. DNS pencarian terjadi saat nama domain diselesaikan ke alamat IP yang mendasarinya. Sementara lapisan {i>cache<i} DNS pada tingkat perangkat dan jaringan membantu membuat yang umumnya cepat, masih membutuhkan 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, dalam beberapa kasus mungkin menjadi alat yang lebih tepat daripada preconnect. Di beberapa secara khusus, mungkin ini adalah petunjuk sumber daya yang diinginkan untuk digunakan dalam kasus tautan yang menavigasi ke {i>website<i} lain yang menurut Anda akan diikuti oleh pengguna. dnstradamus adalah salah satu alat yang melakukannya 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 pandang.

`preload`

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

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

Perintah preload harus dibatasi pada resource penting yang baru ditemukan. Kasus penggunaan yang paling umum adalah file font, file CSS yang diambil melalui @import deklarasi, atau background-image resource CSS yang kemungkinan besar Terbesar Kandidat Contentful Paint (LCP). Dalam kasus seperti itu, file tersebut tidak akan ditemukan oleh pemindai pramuat karena resource ini direferensikan di bagian eksternal Google Cloud Platform.

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

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

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

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

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

Perhatian: Perintah preload adalah pengoptimalan performa yang hebat, yang sebenarnya dapat digunakan secara berlebihan. Sumber daya didownload menggunakan perintah preload secara efektif didownload dengan prioritas tinggi, dan—jika digunakan secara berlebihan—preload dapat membuat pertentangan bandwidth dengan cara yang berpengaruh negatif terhadap kecepatan pemuatan halaman.

`prefetch`

Penting: Ini adalah penjelasan yang sangat umum tentang Petunjuk resource prefetch. Dengan demikian, bagian ini tidak membahas detail yang mendalam tentang beberapa pertimbangan dan konsekuensi yang harus Anda pertimbangkan saat menggunakannya. Modul selanjutnya dalam materi ini membahas lebih detail tentang prefetching sumber daya yang dibutuhkan dalam waktu dekat dengan prioritas rendah, serta prefetching halaman untuk mempercepat navigasi di masa mendatang.

Perintah prefetch digunakan untuk memulai permintaan prioritas rendah untuk sumber daya yang mungkin 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 saja Sebagai gantinya, atribut rel elemen <link> menggunakan nilai "prefetch". Namun, tidak seperti perintah preload, prefetch sebagian besar bersifat spekulatif dalam Anda memulai pengambilan resource untuk navigasi di masa mendatang yang mungkin atau mungkin tidak terjadi.

Ada kalanya prefetch dapat bermanfaat—misalnya, jika Anda mengidentifikasi alur pengguna di situs Anda yang diikuti oleh sebagian besar pengguna hingga selesai, prefetch untuk resource penting render bagi halaman mendatang tersebut dapat membantu mengurangi waktu muat untuk resource tersebut.

Perhatian: Mengingat sifat spekulatif prefetch, penggunaannya memiliki potensi kelemahan dari data yang digunakan untuk mengambil sumber daya mungkin tidak digunakan jika pengguna tidak membuka yang akhirnya membutuhkan sumber daya pengambilan data. Mengandalkan analisis atau sumber data lain untuk pola penggunaan situs web Anda guna memutuskan sendiri apakah menggunakan prefetch adalah ide yang bagus. Atau, Anda bisa menggunakan yang Petunjuk Save-Data untuk menonaktifkan pengambilan data bagi pengguna yang memiliki menentukan preferensi untuk pengurangan penggunaan data.

Fetch Priority API

Anda dapat menggunakan Fetch Priority API melalui atribut fetchpriority untuk meningkatkan prioritas resource. Anda dapat menggunakan atribut dengan <link>, Elemen <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 bersifat secara khusus efektif saat digunakan untuk gambar LCP halaman. Dengan meningkatkan prioritas Gambar LCP dengan atribut ini, Anda dapat meningkatkan LCP halaman dengan sedikit usaha.

Secara default, gambar diambil dengan prioritas yang lebih rendah. Setelah tata letak, jika gambar didapati berada dalam area pandang awal, prioritasnya ditingkatkan menjadi Prioritas tinggi. Dalam cuplikan HTML sebelumnya, fetchpriority langsung memberi tahu browser untuk mendownload gambar LCP yang lebih besar dengan prioritas High, sementara gambar thumbnail yang kurang penting didownload dengan prioritas yang lebih rendah.

Browser modern memuat resource dalam dua fase. Fase pertama disediakan untuk sumber daya penting dan berakhir setelah semua skrip pemblokir diunduh dan telah dijalankan. Selama fase ini, resource prioritas Rendah mungkin tertunda dari mengunduh. Dengan menggunakan fetchpriority="high", Anda dapat meningkatkan prioritas otomatis, sehingga browser dapat mendownloadnya pada fase pertama.

Demo petunjuk resource

Menguji pengetahuan Anda

Apa fungsi petunjuk resource preconnect?

Membuka koneksi ke server lintas asal, termasuk pencarian DNS, serta koneksi dan negosiasi TLS sebelum browser jika tidak ditemukan.

Benar.

Hanya melakukan pencarian DNS untuk server lintas asal.

Coba lagi.

Apa yang dapat Anda lakukan dengan Fetch Priority API?

Tentukan prioritas download HTML halaman saat ini.

Coba lagi.

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

Benar.

Kapan Anda harus menggunakan petunjuk prefetch?

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

Coba lagi.

Saat Anda memiliki keyakinan tinggi bahwa materi atau halaman yang Anda inginkan untuk pengambilan data dibutuhkan oleh pengguna.

Benar.

Jika pengguna belum menyatakan preferensi eksplisit untuk pengurangan data tingkat penggunaan.

Benar.

Berikutnya: Performa gambar

Sekarang, Anda mungkin mulai merasa cukup percaya diri dengan pengetahuan Anda pertimbangan performa umum dalam hal HTML halaman, <head> elemen, dan petunjuk resource. Namun, ada pengoptimalan tambahan yang spesifik untuk berbagai jenis resource yang biasanya dimuat oleh halaman. Selanjutnya, performa gambar dibahas di modul berikutnya, yang dapat membantu Anda mendapatkan gambar situs Anda dimuat secepat mungkin, terlepas dari perangkat pengguna.