Panduan Browser Hints - Preload Prefetch dan Preconnect

Penggunaan Petunjuk Browser atau Browser Hints yang tepat akan membuat situs atau aplikasi Blogger/WordPress Anda lebih cepat dan umumnya lebih berkinerja dengan memanfaatkan Browser Hints secara cerdas seperti penggunaan tag prefetch, preload, preconnect.

Di situs web mana pun, memuat aset adalah bagian penting dari pengalaman pengguna. Semakin cepat aset dimuat, semakin baik pengalaman penggunanya. Beberapa faktor memengaruhi waktu pemuatan aset, seperti ukuran aset, jumlah permintaan, dan jumlah koneksi. Aset ini adalah pemblokiran render, yang berarti bahwa browser tidak dapat merender halaman hingga semua aset dimuat.

Kecepatan situs web adalah faktor penting yang dapat membuat atau menghancurkan kehadiran online situs web anda. Situs web yang memuat lambat dapat menyebabkan rasio pentalan yang tinggi, keterlibatan pengunjung akan berkurang, dan pada akhirnya, hilangnya pendapatan. Untungnya, ada beberapa teknik yang tersedia yang dapat membantu Anda mengoptimalkan kecepatan situs web Anda.

Preload, Prefetch, Preconnect, dan DNS Prefetch adalah metode yang digunakan browser web untuk meningkatkan kinerja situs web. Metode ini memungkinkan browser untuk mengunduh atau menyelesaikan aset yang diperlukan untuk halaman terlebih dahulu sehingga halaman dimuat lebih cepat saat pengguna mengunjunginya.

Dalam artikel ini, kami mengeksplorasi fitur baru yang disebut Petunjuk Browser, yang digunakan untuk meningkatkan waktu pemuatan aset. Petunjuk Browser ini memungkinkan browser untuk mengetahui aset mana yang penting dan harus dimuat terlebih dahulu.

Petunjuk browser adalah metode yang digunakan untuk mengoptimalkan kinerja situs web dengan menginstruksikan browser tentang tindakan yang diantisipasi. Mereka dapat ditambahkan ke bagian situs web atau dikirim di header Tautan dengan respons Early Hints 103, atau respons 200 dengan halaman. Berikut ini adalah petunjuk utama browser:

A. Preconnect

Tag Preconnect digunakan untuk membuat koneksi jaringan yang diharapkan akan segera digunakan oleh halaman web. Tujuannya adalah untuk mengatur koneksi yang diperlukan terlebih dahulu, menghemat waktu ketika sumber daya benar-benar diminta. Ini sangat bermanfaat bagi sumber daya pihak ketiga. Preconnect biasanya terjadi selama pengalihan.

Tag preconnect memungkinkan browser untuk mengatur koneksi awal sebelum permintaan HTTP benar-benar dikirim ke server. Ini termasuk pencarian DNS, negosiasi TLS, jabat tangan TCP. Dengan Preconnect anda dapat menghilangkan latensi bolak-balik dan menghemat waktu bagi pengguna.

Menurut Ilya Grigorik, salah seorang Insinyur dan Penasihat Teknis untuk CEO di Shopify mengatakan "Preconnect adalah alat penting dalam kotak alat pengoptimalan Anda... Ini dapat menghilangkan banyak perjalanan pulang pergi yang mahal dari jalur permintaan Anda - dalam beberapa kasus mengurangi latensi permintaan hingga ratusan dan bahkan ribuan milidetik".

Preconnect dapat menghilangkan
Latensi yang tak digunakan

Preconnect dapat ditambahkan langsung ke tag tautan sebagai atribut dalam HTML. Ini juga dapat dikirimkan melalui header HTTP Link atau dapat dipanggil oleh JavaScript berdasarkan aktivitas pengguna. Berikut adalah contoh mengaktifkan Preconnect pada Blogger atau wordpress.

Contoh Tag preconnect

<link href='https://www.youtube.com' rel='preconnect'/>
<link href='https://www.blogger.com' pr='0.2' rel='preconnect'/>

B. prefetch

Prefetch digunakan untuk menginstruksikan browser agar mengambil sumber daya di latar belakang (waktu idle) yang mungkin diperlukan nanti atau di masa mendatang, dan menyimpannya di cache browser. Setelah halaman selesai dimuat, halaman mulai mengunduh sumber daya tambahan dan jika pengguna kemudian mengklik tautan yang diambil sebelumnya, itu akan memuat konten secara instan, sehingga meningkatkan performa untuk navigasi berikutnya.

Prefetch memiliki Cache Yang dapat
menyimpan sumber daya browser

Catatan: Prefetch tidak meningkatkan pemuatan halaman awal, tetapi dapat sangat meningkatkan kecepatan navigasi di masa mendatang. Ada tiga jenis prefetching yaitu, link, DNS, dan prerendering.

1. Link prefetching

Seperti disebutkan di atas, prapengambilan tautan memungkinkan browser untuk mengambil sumber daya, menyimpannya di cache, dengan asumsi bahwa pengguna akan memintanya. Browser mencari prefetch di <link> elemen HTML atau header HTTP Link seperti:

Contoh Tag Link prefetching

<link href='https://drive.google.com/file/d/' rel='prefetch'/>

Script di atas sangat ideal untuk data yang disimpan di Google drive yang digunakan untuk menampilkan atau mendownload data. Pengguna lebih cenderung memuat halaman berikut, sehingga Anda dapat menyiapkan sumber daya Google drive terlebih dahulu.

Tag Link prefetch didukung oleh sebagian besar browser modern kecuali Safari, iOS Safari, dan Opera Mini. Chrome dan Firefox juga akan menampilkan sumber daya yang diambil sebelumnya di panel jaringan jika Anda mencoba menguji.

Resource Hints tag prefetch

2. DNS prefetching

DNS prefetching memungkinkan browser untuk melakukan pencarian DNS pada halaman di latar belakang saat pengguna sedang menjelajah. DNS prefetching juga mengizinkan anda untuk menentukan nama domain (melakukan pencarian DNS di latar belakang) sebelum pengguna mengklik tautan, yang pada gilirannya dapat membantu meningkatkan kinerja dan meminimalkan latensi karena pencarian DNS telah dilakukan setelah pengguna mengklik tautan.

DNS prefetching dapat ditambahkan ke URL tertentu dengan menambahkan tag rel="dns-prefetch" ke atribut tautan. Kami sarankan untuk menggunakan ini pada hal-hal seperti font Google, Google Analytics, dan CDN Anda.

Katakanlah Anda memiliki situs web dengan font yang berbeda, dan dapat mengantisipasi bahwa beberapa pengguna mungkin ingin beralih ke font Google setelah mereka menggulir ke tengah halaman.‍ Anda dapat memasukkan kode di bawah ini di <head> HTML Anda untuk mengambil font Google terlebih dahulu.

Contoh Tag DNS prefetching

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

DNS-prefetch didukung oleh semua browser modern, kecuali iOS Safari, Opera Mini, dan Android Browser. Catatan: Firefox hanya mendukung dns-prefetch pada asal HTTP.

Penting juga untuk dicatat bahwa Google Chrome sudah melakukan hal serupa saat Anda mengetik sesuatu di bilah alamat, seperti DNS preresolve dan TCP preconnect. Itu cukup keren! Anda dapat melihat daftar tersebut dengan membuka chrome://dns/.

3. Prerendering

Tag Prerendering sangat mirip dengan tag prefetching karena mengumpulkan sumber daya yang dapat dinavigasi pengguna berikutnya. Perbedaannya adalah pra-rendering benar-benar merender seluruh halaman di latar belakang, semua aset dokumen. Berikut ini adalah contohnya.

Contoh Tag DNS prerendering

<link href='https://fonts.googleapis.com/' rel='prerender'/>

Prerender memungkinkan Anda menentukan halaman web yang akan dimuat saat pengguna membaca halaman saat ini. Meskipun halaman tidak dirender, respons dijamin siap saat pengguna menavigasi dari halaman saat ini.

Karena respons sudah diambil, cache lokal apa pun harus dipicu, yang kami sebut sebagai primed. Hanya permintaan GET yang disertakan dalam siklus prerender dan tidak ada JavaScript yang dieksekusi hingga halaman dimuat.

Anda harus menggunakannya dengan hati-hati karena dapat menjadi berat dan membuang-buang bandwidth. Pastikan sumber daya yang Anda tetapkan kemungkinan besar akan dinavigasi. Dukungan browser untuk prerender cukup buruk. Saat ini hanya Chrome dan Samsung Internet yang menawarkan dukungan. Internet Explorer menyediakannya, tetapi tidak Edge.

C. Preload

Tidak seperti preconnect dan prefetch, preload digunakan untuk mengambil resource yang diperlukan untuk navigasi saat ini, dengan fokus pada peningkatan performa pemuatan halaman saat ini.

Preload paling baik digunakan untuk sumber daya langsung yang mungkin tidak diprioritaskan oleh browser.

Berikut adalah contoh preload untuk file font:

Contoh tag preload

<link as='font' href='https://rabbitloader.com/fonts/hnlfont.ttf' rel='preload' type='font/ttf'/>
<link as='font' crossorigin='anonymous' href='fonts/cicle_fina-webfont.woff2' rel='preload' type='font/woff2'/>

1. Dukungan browser untuk preload

Mulai September 2022, preload didukung oleh sebagian besar browser populer, termasuk Google Chrome, Firefox, Microsoft Edge, Opera, dan Safari.

 

2. Apa itu Preload Gambar?

Preload gambar menggunakan tag HTML yang dapat meningkatkan kinerja halaman web secara signifikan. Dengan menginstruksikan browser untuk mengambil gambar penting diawal proses pemuatan halaman, Anda dapat mengurangi waktu pemuatan yang dirasakan dan meningkatkan pengalaman pengguna.

Contoh berikut adalah penggunaan preload gambar:

Contoh tag preload image

<link as='image' href='main-image.webp' rel='preload' type='image/webp'/>

3. Perbedaan Antara Preload dan Prefetch

Perbedaan antara "preload" dan "prefetch" tetap konsisten dengan prinsip pengembangan web umum.

Feature	Preload	Prefetch
Tujuan	Muat sumber daya penting untuk halaman saat ini	Muat sumber daya untuk navigasi atau interaksi di masa mendatang
Prioritas	High	Low
Kapan harus digunakan	Sumber daya penting untuk pengalaman pengguna	Sumber daya yang kemungkinan akan segera digunakan

Secara keseluruhan, menggunakan preload, prefetch, preconnect, dan dns-prefetch dapat membantu meningkatkan kinerja situs web, membuatnya lebih responsif dan ramah pengguna. Tetapi penting juga untuk tidak menggunakan metode ini secara berlebihan karena dapat menyebabkan browser mengunduh atau menyelesaikan aset yang tidak perlu, yang sebenarnya dapat mengurangi kinerja situs web.