Mengoptimalkan Kinerja Dengan Petunjuk Sumber Daya

Diterbitkan: 2022-03-10

Ringkasan cepat Banyak pengoptimalan kinerja dapat dilakukan ketika kami dapat memprediksi apa yang mungkin dilakukan pengguna sebelum mereka benar-benar melakukannya. Petunjuk Sumber Daya adalah cara sederhana namun efektif yang dapat dilakukan pengembang web untuk membantu browser agar tetap selangkah lebih maju dari pengguna dan menjaga halaman tetap cepat.

Peramban web modern menggunakan segala macam teknik untuk membantu meningkatkan kinerja pemuatan halaman dengan menebak apa yang mungkin akan dilakukan pengguna selanjutnya. Namun, browser tidak mengetahui banyak tentang situs atau aplikasi kami secara keseluruhan, dan seringkali wawasan terbaik tentang apa yang mungkin dilakukan pengguna berasal dari kami, sang pengembang.

Ambil contoh konten yang diberi halaman, seperti album foto. Kita tahu bahwa jika pengguna melihat foto di album, kemungkinan mereka mengklik tautan 'berikutnya' untuk melihat gambar berikut di album cukup tinggi. Namun, browser tidak benar-benar mengetahui bahwa dari semua tautan di halaman, itulah yang paling mungkin diklik oleh pengguna. Untuk browser, semua tautan itu memiliki bobot yang sama.

Bagaimana jika browser entah bagaimana bisa mengetahui ke mana pengguna akan pergi selanjutnya dan dapat mengambil halaman berikutnya sebelumnya sehingga ketika pengguna mengklik tautan, pemuatan halaman jauh lebih cepat? Itulah prinsipnya Petunjuk Sumber Daya. Ini adalah cara bagi pengembang untuk memberi tahu browser tentang apa yang mungkin terjadi di masa depan sehingga browser dapat mempertimbangkannya dalam pilihannya tentang cara memuat sumber daya.

Semua petunjuk sumber daya ini menggunakan atribut rel dari elemen <link> yang biasa Anda temukan di <head> dokumen HTML Anda. Dalam artikel ini kita akan melihat jenis utama dari Petunjuk Sumber Daya dan kapan dan di mana kita dapat menggunakannya di halaman kita. Kami akan pergi dari petunjuk kecil dan halus hingga senjata besar di akhir.

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Pengambilan Awal DNS

Pencarian DNS adalah proses mengubah nama domain ramah manusia seperti example.com menjadi alamat IP ramah mesin seperti 123.54.92.4 yang sebenarnya diperlukan untuk mengambil sumber daya.

Setiap kali Anda mengetik URL di bilah alamat browser, mengikuti tautan di halaman, atau bahkan memuat sumber daya seperti gambar dari domain yang berbeda, browser perlu melakukan pencarian DNS untuk menemukan server yang menyimpan sumber daya yang kita miliki diminta. Untuk halaman yang sibuk dengan banyak sumber daya eksternal (seperti mungkin situs web berita dengan banyak iklan dan pelacak), mungkin ada lusinan pencarian DNS yang diperlukan per halaman.

Peramban menyimpan hasil pencarian ini, tetapi bisa lambat. Salah satu teknik pengoptimalan kinerja adalah mengurangi jumlah pencarian DNS yang diperlukan dengan mengatur sumber daya ke domain yang lebih sedikit. Jika tidak memungkinkan, Anda dapat memperingatkan browser tentang domain yang perlu dicari dengan petunjuk sumber daya dns-prefetch .

 <link rel="dns-prefetch" href="https://images.example.com">

Saat browser menemukan petunjuk ini, browser dapat mulai menyelesaikan nama domain images.example.com sesegera mungkin, meskipun belum mengetahui cara penggunaannya. Hal ini memungkinkan browser untuk maju dari permainan dan melakukan lebih banyak pekerjaan secara paralel, mengurangi waktu muat secara keseluruhan.

Kapan Saya Harus Menggunakan `dns-prefetch` ?

Gunakan dns-prefetch saat halaman Anda menggunakan sumber daya dari domain yang berbeda, untuk memberi browser permulaan. Dukungan browser sangat bagus, tetapi jika browser tidak mendukungnya maka tidak ada salahnya — prefetch tidak akan terjadi.

Jangan mengambil terlebih dahulu domain apa pun yang tidak Anda gunakan, dan jika Anda ingin mengambil terlebih dahulu sejumlah besar domain, Anda mungkin lebih baik untuk melihat mengapa semua domain tersebut diperlukan dan jika ada yang bisa dilakukan untuk mengurangi jumlahnya.

Pra-koneksi

Satu langkah dari prefetching DNS adalah prakoneksi ke server. Membuat koneksi ke server yang menghosting sumber daya memerlukan beberapa langkah:

Pencarian DNS (seperti yang baru saja kita bahas);
jabat tangan TCP
"Percakapan" singkat antara browser dan server untuk membuat koneksi.
Negosiasi TLS di situs HTTPS
Ini memverifikasi bahwa informasi sertifikat valid dan benar untuk koneksi.

Ini biasanya terjadi sekali per server dan menghabiskan waktu yang berharga — terutama jika server sangat jauh dari browser dan latensi jaringan tinggi. (Di sinilah CDN yang didistribusikan secara global benar-benar membantu!) Dengan cara yang sama seperti prefetching DNS dapat membantu browser mendahului permainan sebelum melihat apa yang akan datang, pra-koneksi ke server dapat memastikan bahwa ketika browser masuk ke bagian halaman di mana sumber daya diperlukan, pekerjaan lambat dalam membangun koneksi telah terjadi dan saluran terbuka dan siap untuk digunakan.

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

Kapan Saya Harus Menggunakan `preconnect` ?

Sekali lagi, dukungan browser kuat dan tidak ada salahnya jika browser tidak mendukung preconnecting — hasilnya akan sama seperti sebelumnya. Pertimbangkan untuk menggunakan prakoneksi ketika Anda tahu pasti bahwa Anda akan mengakses sumber daya dan Anda ingin maju.

Berhati-hatilah untuk tidak melakukan prakoneksi dan kemudian tidak menggunakan koneksi, karena ini akan memperlambat halaman Anda dan mengikat sejumlah kecil sumber daya di server yang Anda sambungkan juga.

Prefetching Halaman Berikutnya

Dua petunjuk yang telah kita lihat sejauh ini terutama difokuskan pada sumber daya di dalam halaman yang sedang dimuat. Mereka mungkin berguna untuk membantu browser maju pada gambar, skrip atau font, misalnya. Beberapa petunjuk berikutnya lebih memperhatikan navigasi dan memprediksi ke mana pengguna akan pergi setelah halaman yang sedang dimuat.

Yang pertama adalah prefetching, dan tag tautannya mungkin terlihat seperti ini:

 <link rel="prefetch" href="https://example.com/news/?page=2" as="document">

Ini memberi tahu browser bahwa ia dapat melanjutkan dan mengambil halaman di latar belakang sehingga siap untuk dibuka saat diminta. Ada sedikit pertaruhan di sini karena Anda harus mendahului di mana menurut Anda pengguna akan menavigasi selanjutnya. Lakukan dengan benar, dan halaman berikutnya mungkin tampak dimuat dengan sangat cepat. Lakukan kesalahan, dan Anda telah membuang waktu dan sumber daya untuk mengunduh sesuatu yang tidak akan digunakan. Jika pengguna menggunakan koneksi terukur seperti paket telepon seluler terbatas, Anda mungkin benar-benar membebani mereka dengan uang sungguhan.

Saat prefetch terjadi, browser melakukan pencarian DNS dan membuat koneksi server yang telah kita lihat di dua jenis petunjuk sebelumnya, tetapi kemudian melangkah lebih jauh dan benar-benar meminta dan mengunduh file. Namun, berhenti pada saat itu, dan file tidak diuraikan atau dieksekusi dan sama sekali tidak diterapkan ke halaman saat ini. Mereka hanya diminta dan tetap siap.

Anda mungkin menganggap prefetch seperti menambahkan file ke cache browser. Alih-alih harus keluar ke server dan mengunduhnya saat pengguna mengklik tautan, file dapat ditarik dari memori dan digunakan lebih cepat.

`as` Atribut

Pada contoh di atas, Anda dapat melihat bahwa kami menyetel atribut as ke as="document" . Ini adalah atribut opsional yang memberi tahu browser bahwa apa yang kita ambil harus ditangani sebagai dokumen (yaitu halaman web). Ini memungkinkan browser untuk menyetel jenis header permintaan dan kebijakan keamanan yang sama seolah-olah kita baru saja mengikuti tautan ke halaman baru.

Ada banyak kemungkinan nilai untuk atribut as dengan mengaktifkan browser untuk menangani berbagai jenis prefetch dengan cara yang sesuai.

Nilai `as`	Jenis sumber daya
`audio`	File suara dan musik
`video`	Video
`Track`	Video atau audio trek WebVTT
`script`	file JavaScript
`style`	Lembar gaya CSS
`font`	font web
`image`	Gambar-gambar
`fetch`	XHR dan Ambil permintaan API
`worker`	Pekerja web
`embed`	Permintaan `<embed>` multimedia
`object`	Permintaan `<object>` multimedia
`document`	Halaman web

Nilai berbeda yang dapat digunakan untuk menentukan jenis sumber daya dengan atribut as .

Kapan Saya Harus Menggunakan `prefetch` ?

Sekali lagi prefetch memiliki dukungan browser yang hebat. Anda harus menggunakannya ketika Anda memiliki kepastian yang wajar bahwa pengguna mungkin mengikuti situs Anda jika Anda yakin bahwa mempercepat navigasi akan berdampak positif pada pengalaman pengguna. Ini harus dipertimbangkan terhadap risiko pemborosan sumber daya dengan kemungkinan mengambil sumber daya yang kemudian tidak digunakan.

Memprarender Halaman Berikutnya

Dengan prefetch , kita telah melihat bagaimana browser dapat mengunduh file di latar belakang yang siap digunakan, tetapi juga mencatat bahwa tidak ada lagi yang dilakukan dengan file tersebut pada saat itu. Prarendering melangkah lebih jauh dan mengeksekusi file, melakukan hampir semua pekerjaan yang diperlukan untuk menampilkan halaman kecuali untuk benar-benar menampilkannya.

Ini mungkin termasuk mengurai sumber daya untuk setiap subsumber daya seperti file dan gambar JavaScript dan juga mengambilnya terlebih dahulu.

 <link rel="prerender" href="https://example.com/news/?page=2">

Ini benar-benar dapat membuat pemuatan halaman berikutnya terasa seketika, dengan jenis kinerja pemuatan cepat yang mungkin Anda lihat saat menekan tombol kembali browser Anda. Namun, taruhannya bahkan lebih besar di sini, karena Anda tidak hanya menghabiskan waktu untuk meminta dan mengunduh file, tetapi juga menjalankannya bersama dengan JavaScript apa pun dan semacamnya. Ini dapat menghabiskan memori dan CPU (dan oleh karena itu baterai) sehingga pengguna tidak akan melihat manfaatnya jika mereka akhirnya tidak meminta halaman tersebut.

Kapan Saya Harus Menggunakan `prerender` ?

Dukungan browser untuk prerender saat ini sangat terbatas, dengan hanya Chrome dan IE lama (bukan Edge) yang menawarkan dukungan untuk opsi tersebut. Ini mungkin membatasi kegunaannya kecuali Anda secara khusus menargetkan Chrome. Sekali lagi ini adalah kasus "tidak ada salahnya, tidak ada pelanggaran" karena pengguna tidak akan melihat manfaatnya tetapi tidak akan menimbulkan masalah bagi mereka jika tidak.

Menempatkan Petunjuk Sumber Daya Untuk Digunakan

Kita telah melihat bagaimana petunjuk sumber daya dapat digunakan di <head> dokumen HTML menggunakan tag <link> . Itu mungkin cara yang paling nyaman untuk melakukannya, tetapi Anda juga dapat mencapai hal yang sama dengan Link: header HTTP.

Misalnya, untuk mengambil dengan header HTTP:

 Link: <https://example.com/logo.png>; rel=prefetch; as=image;

Anda juga dapat menggunakan JavaScript untuk menerapkan petunjuk sumber daya secara dinamis, mungkin sebagai tanggapan untuk menggunakan interaksi. Untuk menggunakan contoh dari dokumen spesifikasi W3C:

 var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);

Ini membuka beberapa kemungkinan menarik, karena berpotensi lebih mudah untuk memprediksi ke mana pengguna akan bernavigasi selanjutnya berdasarkan cara mereka berinteraksi dengan halaman.

Hal yang Perlu Diperhatikan

Kami telah melihat empat cara pramuat sumber daya yang lebih agresif secara progresif, dari sentuhan paling ringan hanya menyelesaikan DNS hingga membuat halaman lengkap yang siap digunakan di latar belakang. Penting untuk diingat bahwa petunjuk ini hanya itu; itu adalah petunjuk tentang cara browser dapat mengoptimalkan kinerja . Itu bukan arahan. Peramban dapat menerima saran kami dan menggunakan penilaian terbaiknya dalam memutuskan bagaimana merespons.

Ini mungkin berarti bahwa pada perangkat yang sibuk atau kewalahan, browser tidak mencoba menanggapi petunjuk sama sekali. Jika browser mengetahui bahwa itu ada pada koneksi terukur, misalnya, mungkin mengambil DNS terlebih dahulu tetapi tidak seluruh sumber daya. Jika memori rendah, browser mungkin kembali memutuskan bahwa tidak ada gunanya mengambil halaman berikutnya sampai halaman saat ini diturunkan.

Kenyataannya adalah bahwa pada browser desktop, semua petunjuk kemungkinan akan diikuti seperti yang disarankan pengembang, tetapi perlu diketahui bahwa itu tergantung pada browser dalam setiap kasus.

Pentingnya Pemeliharaan

Jika Anda telah bekerja dengan web selama lebih dari beberapa tahun, Anda akan terbiasa dengan fakta bahwa jika sesuatu pada halaman tidak terlihat maka sering kali dapat diabaikan. Metadata tersembunyi (seperti deskripsi halaman) adalah contoh yang bagus untuk ini. Jika orang yang menjaga situs tidak dapat dengan mudah melihat datanya, maka data tersebut dapat dengan mudah diabaikan dan ketinggalan zaman.

Ini adalah risiko nyata dengan petunjuk sumber daya. Karena kode disembunyikan dan hampir tidak terdeteksi saat digunakan, akan sangat mudah bagi halaman untuk berubah dan petunjuk sumber daya apa pun untuk tidak diperbarui. Konsekuensi dari mengatakan, mengambil halaman sebelumnya yang tidak Anda gunakan, berarti bahwa alat yang Anda gunakan untuk meningkatkan kinerja situs Anda kemudian secara aktif merusaknya. Jadi memiliki prosedur yang baik untuk memasukkan petunjuk sumber daya Anda menjadi sangat, sangat penting.

Sumber daya

“Spesifikasi Petunjuk Sumber Daya,” W3C
“Mempercepat Navigasi Halaman Berikutnya Dengan Prefetching,” Addy Osmani