Cara Mengatasi Reduce DNS Lookups pada GTmetrix YSlow

    Kesempatan kali ini saya kembali berbagi cara memperbaiki skor GTmetrix, khususnya pada YSlow bagian Reduce DNS Lookups. Dalam bahasa Indonesianya bisa kita sebut mengurangi pencarian DNS.

    Apa itu Reduce DNS Lookups?


    Reduce DNS Lookups, bisa juga diartikan sebagai mengurangi pencarian DNS merupakan sebuah masalah loading blog pada GTmetrix bagian YSlow. Singkatnya, pada permasalahan ini GTmetrix menyuruh kita untuk mengurangi script-script eksternal yang dihosting pada tempat-tempat yang berbeda.

    Contohnya seperti ini. Anda membuka sebuah blog saya, dan di blog saya ada beberapa script yang dihosting diluar atau eksternal. Untuk lebih jelasnya silakan lihat gambar dibawah.
    4x Request DNS
    Digambar tersebut saya beri contoh saya memiliki 4 macam script Javascript yang ingin saya masukkan ke blog. Karena ukurannya besar, jadi keempat script tadi saya host diluar. Masing-masing saya host di:
    1. Github
    2. Yourjavascript
    3. Google Drive
    4. Wordpress Self Host
    Tanpa anda sadari, melakukan cara host seperti ini dapat memperlambat loading blog, dikarenakan browser akan merequest ke tempat-tempat yang berbeda dan membutuhkan waktu lebih untuk menerima respons dari DNS masing-masing script. Bingung?

    Sekarang browser kita misalkan seorang anak. Anak tadi disuruh sama ibunya untuk membeli garam, gula, kecap, dan micin. Saat ingin membeli barang-barang tadi, ia membeli garam di Warung A, beli gula di Warung B, beli kecap di Warung C, dan membeli micin di Warung D. Tentu waktu yang dikeluarkan anak tadi menjadi lebih banyak.

    Sama seperti browser. Ia harus pergi ke tempat (DNS) lain hanya untuk memuat Javascript yang anda hosting tadi.

    Sekarang mari kita lihat lagi gambar kedua ini:
    1x Request DNS
    Gambar diatas menunjukkan saya hanya menghosting script pada 1 tempat, sehingga hanya ada 1 request/lookups. Tentu hal ini dapat mempercepat loading blog karena mengurangi waktu respons bagi browser untuk melakukan lookups ke berbagai tempat.

    Singkatnya, anak yang kita bicarakan tadi hanya membeli pada 1 warung untuk keempat barang yang disuruh beli oleh ibunya. Jadi dia tidak terlalu capek dan tidak membuang banyak waktu.

    Bagaimana cara mengatasi masalah Reduce DNS Lookups ini?


    Nah sekarang kembali ke topik pembahasan, bagaimana cara mengatasinya?

    Sebenarnya cukup mudah, tetapi membosankan dan membuat sedikit pegal, karena kita harus menghosting ulang seluruh script tadi ke suatu tempat.

    Cobalah sekarang anda lihat semua script eksternal yang ada di blog anda, lalu kumpulkan, catat, dan hapus script asli. Kurang lebih bentuk catatannya menjadi seperti ini:

    http://www.abc.com/script.js
    http://www.def.com/script.js
    http://www.ghi.com/script.js
    http://www.jkl.com/script.js

    Semuanya dihost pada tempat berbeda, script satu pada abc.com, script dua pada def.com, dan seterusnya. Saya sangat menyarankan untuk membuatnya hanya dihost pada satu tempat saja, yaitu Github. Sehingga kurang lebih bentuknya menjadi seperti ini:

    http://github.com/script.js

    Caranya cukup mudah, anda hanya perlu membuka satu per satu link script yang dihosting pada tempat berbeda tadi, copas isinya, lalu masukkan semuanya pada 1 file notepad.

    // Script 1 (host dari abc.com)
     ....
    // Script 2 (host dari def.com)
     ....
    dan seterusnya

    Setelah itu, simpan dalam bentuk format .js. Beri nama yang sesuai misal script-blog.js. Setelah itu, silakan anda host file tadi di Github, tutorial ada di Internet. Setelah itu, masukkan lagi script yang sudah di host tadi pada HTML template anda.

    Selain dengan cara diatas, anda juga dapat mengatasinya dengan cara memasang Lazyload. Untuk cara pemasangannya saya sudah pernah bahas pada artikel seputar LazyLoad JS Eksternal.

    Mohon diperhatikan, selalu membackup template sebelum melakukan perubahan pada template, khususnya Edit HTML. Terlebih tidak semua script dapat dihosting ulang ditempat lain karena bisa menyebabkan kerusakan.