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

Halaman ini diterjemahkan oleh Cloud Translation API.

Membantu browser dengan petunjuk resource

Dalam modul terakhir tentang mengoptimalkan pemuatan resource, Anda mempelajari cara berbagai resource halaman seperti CSS dan JavaScript dapat memengaruhi kecepatan pemuatan halaman, dan cara mengoptimalkan serta pengirimannya untuk mempercepat rendering halaman. Sekarang adalah waktu yang tepat untuk mempelajari aspek pemuatan resource yang lebih canggih, dan hal ini melibatkan bantuan browser untuk memuatnya lebih cepat dengan menggunakan petunjuk resource.

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

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

Petunjuk resource dapat ditentukan di HTML—paling sering di awal 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 pra-muat melakukannya.

Jika Anda memiliki banyak resource lintas origin di halaman, gunakan preconnect untuk resource yang paling penting bagi halaman saat ini.

Screenshot waktu koneksi untuk resource di panel jaringan Chrome DevTools. Penyiapan koneksi mencakup waktu jeda, negosiasi proxy, pencarian DNS, penyiapan koneksi, dan negosiasi TLS. — Visualisasi pengaturan waktu koneksi seperti yang terlihat di panel jaringan Chrome DevTools. Waktu dalam kotak merah adalah waktu yang diperlukan untuk menyiapkan koneksi dengan server lintas origin, yang dapat diringankan oleh `preconnect` dengan membuat koneksi lebih awal, bukan pada saat penemuan resource lintas origin.

Kasus penggunaan umum untuk preconnect adalah Google Fonts. Google Fonts merekomendasikan agar Anda preconnect ke domain https://fonts.googleapis.com yang menayangkan 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—Anda harus menambahkan atribut crossorigin ke petunjuk preconnect.

`dns-prefetch`

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

Sesuai namanya, dns-prefetch tidak membuat koneksi ke server lintas asal, tetapi hanya melakukan pencarian DNS untuknya 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 menjadikan proses ini umumnya cepat, proses ini tetap 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 menjadi alat yang lebih tepat dalam beberapa kasus dibandingkan dengan preconnect. Khususnya, petunjuk resource ini mungkin diinginkan untuk digunakan dalam kasus link yang mengarahkan ke situs lain yang menurut Anda mungkin diikuti oleh pengguna. dnstradamus adalah salah satu alat yang melakukan hal ini secara otomatis menggunakan JavaScript, dan menggunakan Intersection Observer API untuk menyuntikkan petunjuk dns-prefetch ke HTML halaman saat ini saat link ke situs lain di-scroll ke dalam area tampilan pengguna.

`preload`

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

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

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

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

Mirip dengan preconnect, direktif preload memerlukan atribut crossorigin jika Anda memuat ulang resource CORS—seperti font. Jika Anda tidak menambahkan atribut crossorigin—atau menambahkannya untuk permintaan non-CORS—maka resource akan didownload oleh browser dua kali, sehingga membuang bandwidth yang seharusnya dapat digunakan dengan lebih baik untuk resource lain.

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

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

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

Perhatian: Direktif preload adalah pengoptimalan performa yang sangat efektif—bahkan dapat digunakan secara berlebihan. Resource yang didownload menggunakan direktif preload didownload secara efektif dengan prioritas tinggi, dan—jika terlalu sering digunakan—preload dapat menyebabkan perebutan bandwidth yang berdampak negatif pada kecepatan pemuatan halaman.

`prefetch`

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

Direktif prefetch digunakan untuk memulai permintaan prioritas rendah untuk resource yang kemungkinan akan digunakan untuk navigasi mendatang:

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

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

Ada saatnya prefetch dapat bermanfaat—misalnya, jika Anda telah mengidentifikasi alur pengguna di situs Anda yang diikuti sebagian besar pengguna hingga selesai, prefetch untuk resource penting rendering untuk halaman mendatang tersebut dapat membantu mengurangi waktu pemuatan bagi mereka.

Perhatian: Mengingat sifat spekulatif prefetch, penggunaannya berpotensi menimbulkan kerugian karena data yang digunakan untuk mengambil resource mungkin tidak digunakan jika pengguna tidak membuka halaman yang akhirnya memerlukan resource yang telah di-prefetch. Andalkan analisis atau sumber data lainnya untuk mengetahui pola penggunaan situs Anda guna memutuskan sendiri apakah menggunakan prefetch adalah ide yang baik. Atau, Anda dapat menggunakan petunjuk Save-Data untuk menonaktifkan pengambilan data di muka bagi pengguna yang telah menentukan preferensi untuk mengurangi penggunaan data.

Fetch Priority API

Anda dapat menggunakan Fetch Priority API melalui atribut fetchpriority untuk meningkatkan prioritas resource. Anda dapat menggunakan atribut 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 jika digunakan untuk gambar LCP halaman. Dengan meningkatkan prioritas gambar LCP menggunakan atribut ini, Anda dapat meningkatkan LCP halaman dengan upaya yang relatif kecil.

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

Browser modern memuat resource dalam dua tahap. Fase pertama dicadangkan untuk resource penting dan berakhir setelah semua skrip pemblokiran didownload dan dieksekusi. Selama fase ini, download resource dengan prioritas Rendah mungkin tertunda. 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 negosiasi koneksi dan TLS sebelum browser menemukannya.

Benar.

Hanya melakukan pencarian DNS untuk server lintas asal.

Coba lagi.

Apa yang dapat Anda lakukan dengan Fetch Priority API?

Tentukan prioritas saat HTML halaman saat ini didownload.

Coba lagi.

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

Benar.

Kapan sebaiknya Anda menggunakan petunjuk prefetch?

Untuk semua referensi atau halaman yang mungkin dibutuhkan pengguna, terlepas dari apakah mereka benar-benar membutuhkannya di masa mendatang atau tidak.

Coba lagi.

Jika Anda sangat yakin bahwa resource atau halaman yang ingin Anda ambil data sebelumnya diperlukan oleh pengguna.

Benar.

Jika pengguna belum menyatakan preferensi eksplisit untuk penggunaan data yang lebih sedikit.

Benar.

Berikutnya: Performa gambar

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