Meningkatkan Kecepatan Website dengan HTML5 Prefetch

Meningkatkan kecepatan website merupakan salah satu cara untuk mengoptimasi web. Ketika mengakses sebuah halaman web dengan waktu loading yang cepat, tentu akan memberikan kesan dan pengalaman menyenangkan kepada pengunjung.

Tutorial ini akan membahas salah satu cara bagi developer web untuk meningkatkan kecepatan loading halaman web menggunakan HTML5 Prefetch.

Apa itu HTML5 Prefetch

HTML5 Prefetch merupakan sebuah mekanisme pada web bowser, yang memungkinkan web browser untuk mengambil kembali dokumen web seperti halaman web secara utuh, file HTML, gambar dan sebagainya. Mekanisme ini bekerja dengan cara menyimpan semua dokumen dari suatu halaman web ketika pertama kali diakses ke dalam cache browser. Nantinya, ketika user akan mengunjungi kembali web tersebut, browser akan langsung mengambil dokumen web yang telah disimpan di-cache web browser.

Cara Menggunakan HTML5 Prefetch

Perlu Anda ketahui, untuk saat ini hanya Mozilla Firefox dan Google Chrome yang mendukung perintah HTML5 Prefetch. Untuk menggunakan Prefetch sangatlah mudah, Anda hanya perlu menambahkan tag link dibagian <head> HTML. Contoh :

<head>
<link rel="prefetch" href="/images/logo-eplusgo.jpeg">
<link rel="prefetch" href="/images/profil-perusahaan.html">
</head>

Pada perintah diatas terdapat 2 dokumen yang akan di-prefetch yaitu :

logo-eplusgo.jpeg : dokumen gambar
profil-perusahaan.html : dokumen HTML

Apabila Anda ingin menerapkan prefetch ini di Google Chrome berikut perintahnya :

<head>
<link rel="prefetch" href="/images/logo-eplusgo.jpeg"> <!-- Untuk Mozilla Firefox -->
<link rel="prefetch" href="/images/profil-perusahaan.html"> <!-- Untuk Mozilla Firefox -->
<link rel="prerender" href="/images/logo-eplusgo.jpeg"> <!-- Untuk Google Chrome -->
<link rel="prerender" href="/images/profil-perusahaan.html"> <!-- Untuk Google Chrome -->
</head>

Kapan HTML5 Prefetch Digunakan ?

Apakah kita bisa menggunakan HTML5 prefetch untuk semua dokumen web ? Tentu jawabannya tidak. Jangan pernah menggunakan prefetch disemua dokumen web, gunakanlah hanya pada bagian-bagian atau dokumen yang tepat. HTML5 prefetch akan sangat berguna jika digunakan pada :

Halaman web yang panjang dan berkelanjutan. Misal Anda membuat konten slide bersambung dari halaman 1-3. (dengan asumsi ukuran slide kecil)
Dokumen yang digunakan secara berulang pada seluruh halaman web Anda. Seperti gambar, grafik, file Javascript ataupun CSS.
Menampilkan halaman berikutnya dari hasil pencarian di situs Web Anda.

Kesimpulan

HTML5 Prefetch sangat membantu untuk meningkatkan kecepatan akses sebuah halaman web. Meskipun tidak semua web browser mendukung, namun tidak menutup kemungkinan kedepan web browser lainnya akan mengusung mekanisme prefetch ini. Sekarang, apakah Anda ingin menggunakan mekanisme prefetch ini ?