Manfaat Dan Cara Menggunakan Tag DNS Prefetch

PenulisAbdul Somad -August 10, 2019

1

Manfaat Dan Cara Menggunakan Tag DNS Prefetch - Apa itu DNS Prefetch (Domain Name System Prefetching)? DNS Prefetch merupakan sebuah metode untuk mempercepat pemuatan domain tertentu yang di tandai dengan tag dns-prefetch pada sebuah halaman web. Secara mekanisme DNS Prefetch akan memberikan perintah kepada browser untuk menyelesaikan sedini / secepat mungkin perenderan masing-masing domain name kemudian browser akan mengingat nya dalam beberapa saat sehingga ketika pengunjung menavigasi halaman secara otomatis browser akan menampikan halaman web lebih cepat karena semua link external dengan tag dns-prefetch sudah dianggap selsesai dimuat.

Manfaat Dan Cara Menggunakan Tag DNS Prefetch

Pemahaman Sederhana Tentang DNS Prefetch

Pada hakikat-nya browser akan memuat atau mengunjungi semua link (hyperlink) yang di temukan pada laman situs, hal ini tentu saja akan menghambat kinerja browser untuk menampilkan laman web secara utuh, Agar prilaku tersebut tidak di-lakukan browser seara berulang pengelola situs perlu menambahkan tag dns-prefetch kedalam html situs yang ditujukan kepada domain-domain tertentu.

Dengan demikian browser akan menyelesaikan sepenuhnya dan sedini mungkin perenderan kumpulan link external pada kunjungan pertama, sedangkan pada kunjungan ke dua atau laman selanjutnya browser tidak perlu lagi melakukan perenderan terhadap kumpulan link yang ditandai dengan tag dns-prefetch sehingga visitor dapat menghemat waktu pemuatan hingga sekitar 200 milidetik.

Situs ini juga menggunakan tag dns-prefetch untuk mempercepat perenderan halaman situs kami, Tag dns-prefetch benar-benar sangat membantu meningkatkan kinerja pemuatan halaman web ini, akan tetapi sangat di sayangkan tag dns-prefetch tidak berfungsi pada browser versi lama. Saat ini DNS Prefetch hanya berfungsi pada browser IE 9 dan versi lebih tinggi, Google Chrome, Firefox versi 3.5 keatas dan Safari versi 5+.

Cara Menggunakan Tag DNS Prefetch Pada Situs Blogger

Agar penggunaan tag dns-prefetch lebih optimal pada situs blogger saya sangat menyarankan untuk memasang tag dns-prefetch pada domain-domain atau link external permanent yang ada di dalam laman situs, contohnya link gambar, css external, dan javascript external saja, berikut basic atau dasar-dasar tag dns-prefetch pada situs blogger.

<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>

Simpan dns-prefetch tersebut pada area header situs (diantara tag <head> dan </head>), Jika pada situs blogger terdapat link external dari sumber daya yang lain, silahkan tambahkan tag dns-prefetch dengan format seperti berikut ini;

<link href='//url-external' rel='dns-prefetch'/>

Ganti tulisan url-external dengan link target dan selalu diawali dengan double string "//", Berdasarkan keterangan dari project chromium browser akan mengingat 10 domain pertama dan secara otomatis mulai menyelesaikan nama-nama domain di dalam tag dns-prefetch pada awal dalam proses startup.

Jika pada situs blogger terdapat iklan adsense, kamu juga dapat menambahkan tag dns-prefetch seperti berikut;

<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>

Kamu tidak perlu menambahkan semua tag dns-prefetch pada semua domian (link external) yang terdapat pada situs, pilih nama-nama domain yang membutuhkan waktu pemuatan yang cukup lama. Dibawah ini adalah hyperlink yang mungkin ada di dalam situs yang sudah disesuaikan dengan markup tag dns-prefetch.

<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>

<link href='//www.google-analytics.com' rel='dns-prefetch'/>

<link href='//themes.googleusercontent.com ' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>

<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>

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

<link href='//use.fontawesome.com' rel='dns-prefetch'/>

<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>

<link href='//ajax.microsoft.com ' rel='dns-prefetch'/>
<link href='//ajax.aspnetcdn.com ' rel='dns-prefetch'/>

<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>

<link href='//player.vimeo.com' rel='dns-prefetch'/>

<link href='//s3.amazonaws.com ' rel='dns-prefetch'/>

<link href='//s3.buysellads.com ' rel='dns-prefetch'/>
<link href='//stats.buysellads.com ' rel='dns-prefetch'/>
<link href='//cdn.adpacks ' rel='dns-prefetch'/>

<link href='//github.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
<link href='//r.twimg.com ' rel='dns-prefetch'/>
<link href=' http://p.twitter.com ' rel='dns-prefetch'/>
<link href=' http://cdn.api.twitter.com ' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>

Demikian penjelasan dan cara menggunakan tag dns-prefetch (Domain Name System Prefetching) pada situs web khusunya situs blogger, kamu dapat meniru penggunaan tag dns-prefetch dengan melihat source situs ini dengan menekan tombol Ctrl+U di beranda situs tukang listrik batam atau situs2 lainnya yang mungkin menggunakan dns-prefetch untuk mempercepat loading atau pemuatan halaman mereka. semoga bermanfaat dan menambah pengetahuan lebih dan kurang mohon maaf.