Cara Mempercepat Loading Blog dengan Memasang DNS Prefetch

Mau tau bagaimana cara mempercepat loading blog dengan memasang HTML DNS Prefetch? Yuk simak tutorialnya di artikel ini!
Cara Mempercepat Loading Blog dengan DNS Prefetch
Cara Mempercepat Loading Blog dengan Memasang DNS Prefetch

AdityaTekno.com - Mempunyai blog yang fast loading atau cepat adalah idaman bagi setiap blogger maupun para pengunjung blog tersebut. Selain untuk meningkatkan SEO blog juga akan menghemat waktu pengunjung dalam memuat sebuah artikel.

Kerena jika loading blog kita lambat pasti akan langsung ditinggalkan para pengunjung, alhasil lama-kelamaan pengunjung blog akan menjadi sepi. Tentu hal seperti itu tidak mau terjadi pada blog kita kan?

Maka dari itu anda wajib meningkatkan kecepatan loading blog anda, agar para pengunjung senang dan betah berlama-lama di blog anda.

Ada banyak cara optimasi untuk mempercepat loading blog, mulai dari optimasi gambar/thumbnail blog, memasang script lazy load maupun lazy size image, meng-Compress Script JavaScript dan CSS template blog, dan masih banyak lagi. Semua cara optimasi kecepatan blog yang sudah saya sebutkan tadi bisa anda ikuti tutorialnya di artikel berikut : 10 Cara Mempercepat Loading Blog Blogger.

Kenapa tidak dibahas disini saja mas?

Karena disini saya hanya akan membagikan tutorial cara mempercepat loading blog dengan memasang DNS Prefetch dan langkah-langkahnya dijamin mudah untuk diikuti.

Tapi sebelum saya membagikan trik cara meningkatkan loading blog dengan dns prefetch, alangkah baiknya anda mengetahui terlebih dahulu apa itu dns prefetch dan bagaimana cara kerjanya.

Apa Itu DNS Prefetch?

DNS Prefetch adalah fitur dari browser dimana secara background melakukan perubahan nama domain, misalnya saja dari adityatekno.com menjadi ip address 127.0.0.1.

DNS Prefetch secara bandwidth juga pengaruhnya kecil, namun secara latency pengaruhnya cukup besar apalagi di jaringan internet seluler (mobile).

Dengan menggunakan fitur DNS Prefetch, ketika pengunjung situs melakukan klik link maka latency yang terjadi menjadi lebih rendah. Dalam beberapa kasus, latency dapat menurun sampai satu detik.

Bagaimana? sudah mulai faham kan apa itu dns prefetch. Jika masih bingung, yuk lanjut ke pembahasan cara kerja dns prefetch, agar menjadi lebih faham.

Cara Kerja DNS Prefetch

Cara kerjanya yaitu DNS Prefetch akan memberikan perintah kepada browser untuk menyelesaikan perenderan nama domain secepat mungkin, kemudian untuk beberapa saat browser akan menahannya dan ketika pengunjung men-Scroll halaman blog, maka secara otomatis browser akan menampilkan halaman blog lebih cepat karena link eksternal dengan tag DNS Prefetch dianggap telah selesai dimuat.

Misalnya anda menggunakan google font pada blog anda, maka penerapan tag dns prefetch nya seperti berikut ini:

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

Agar tidak pusing mikirin kode script dns prefetch, anda tinggal ikuti saja panduan pemasangan DNS Prefetch untuk mempercepat loading blog dibawah ini.

Perhatian! Sebelum anda memasang script HTML DNS Prefetch pada blog, alangkah baiknya anda cek terlebih dahulu apakah di template blog anda sudah terpasang script HTML DNS Prefetch belum. Jika sudah, tidak perlu memasangnya lagi. Tapi, jika belum terpasang, anda bisa langsung memasangnya.

Cara Memasang DNS Prefetch untuk Mempercepat Loading Blog

  1. Pertama, buka dashboard Blogger anda.
  2. Kemudian pilih menu Tema.
  3. Klik Edit HTML.
  4. Salin kode html dns prefetch dibawah, lalu tempelkan dibawah kode <head>.
    <link href='//ajax.googleapis.com' rel='dns-prefetch'/>
    <link href='//www.google-analytics.com' rel='dns-prefetch'/>
    <link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
    <link href='//www.googletagservices.com' rel='dns-prefetch'/>
    <link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
    <link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
    <link href='//adservice.google.ca' rel='dns-prefetch'/>
    <link href='//adservice.google.com' rel='dns-prefetch'/>
    <link href='//resources.blogblog.com' rel='dns-prefetch'/>
    <link href='//fonts.googleapis.com' rel='dns-prefetch'/>
    <link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
    <link href='//2.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='//disqus.com' rel='dns-prefetch'/>
    <link href='//c.disquscdn.com' rel='dns-prefetch'/>
    <link href='//github.com' rel='dns-prefetch'/>
    <link href='//cdn.staticaly.com' rel='dns-prefetch'/>
    <link href='//cdn.statically.io' rel='dns-prefetch'/>
    <link href='//fontawesome.com' rel='dns-prefetch'/>
    <link href='//www.sharethis.com' rel='dns-prefetch'/>
    <link href='//cdn.jsdelivr.net' rel='dns-prefetch'/>
    <link href='//rawcdn.githack.com' rel='dns-prefetch'/>
    <link href='//images.dmca.com' rel='dns-prefetch'/>
  5. Klik Simpan Tema.

Jika di blog anda terdapat link eksternal sumber lainnya, silahkan lakukan pemasangan DNS Prefetch dengan format seperti pemasangan yang tadi dan tambahkan pada daftar dns prefetch diatas.

Atau bisa ikuti format DNS Prefetch seperti dibawah ini.

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

Info: Ganti url-external-lainnya dengan link eksternal lainnya yang ada pada blog anda.

Penutup

Trik mempercepat loading blog dengan memasang dns prefetch yang sudah saya jelaskan diatas merupakan satu dari beberapa panduan optimasi loading blog lainnya. 

Dan perlu anda ketahui, cara mempercepat loading blog dengan dns prefetch ini juga bisa mengatasi Reduce DNS Lookups pada YSlow GTmetrix

Cara Mengatasi Reduce DNS Lookups YSlow GTmetrix
Reduce DNS Lookups pada YSlow GTmetrix

Jadi, jika blog anda mengalami masalah pada Reduce DNS Lookups, anda bisa mencoba tutorial cara mengatasi Reduce DNS Lookups dengan memasang DNS Prefetch ini.

Baca Juga : 

Demikian artikel tentang tutorial Cara Mempercepat Loading Blog dengan Memasang DNS Prefetch. Semoga membantu mengatasi masalah loading blog yang lambat maupun untuk meningkatkan loading blog. Terima kasih sudah berkunjung. Salam AdityaTekno.com

Sumber referensi:
http://dev.chromium.org/developers/design-documents/dns-prefetching