Cara Mempercepat PageSpeed Blog dengan Link HREF Dns-Prefetch

Sekarang ini jujur saja saya sedang bereksperiment untuk menurunkan Speed Blog saya di RahmanCyber ini, terutama untuk speed mobile.

 

{getToc} $title={Table of Contents}

 

Kenapa engak ganti template saja?

1.  aku
2. adalah
3. aku
4. aku
5. aku
6. di
7. sini
   

 

Mungkin itu adalah cara yang paling mudah ya teman teman.. tapi saya sudah terlanjur buat dan ini adalah kenang kenangan lama, yang dulu saya suka banget dengan yang namanya SLIDER.

Seakan akan punya website sekelas Kompas, Detik, atau beberapa Website Berita yang disitu memang banyak sekali Slidernya yang mengagumkan.. 

 

 

Saya sempat mencabut Slider dari Template Blog RahmanCyber v1 ini, ternyata memang bener, speed blog langsung naik drastis.. hehe

Berarti memang permasalahannya ada di Slider, dan Juga Gambar yang tidak Teroptimasi.

Saya sendiri juga sampai buat panduan dari pengalaman saya bereksperimen, 😁 Panduan Mempercepat Blog tampilan Mobile

Kalian bisa baca disana, atau bisa juga menambahi pengalaman yang kalian punya, siapa tau akan bermanfaat untuk mempercepat loading blog yang saya miliki ini.

Mempercepat Loading Blog bukanlah hal yang Mudah!

Memang benar, semuanya itu berbanding lurus gan, semakin banyak yang kamu bawa barang, maka semakin berat juga.

Beberapa cara mempercepat muatan website yang berada, kebanyakan adalah Malas, atau memanipulasi loading yang sebenarnya sih ujung ujungnya sama, cuman bedanya adalah, hanya memuat yang nampil atau dibutuhkan saja..

Yang tidak dibutuhkan ya, tidak di load dulu atau di pending.

Ini adalah konsep dari Lazy Load.

Pernah kalian temukan MINIFY? yang fungsinya adalah untuk menyingkat CSS atau Javascript.. biasanya bisa kalian akses di Minify org

ada petikan yang sangat saya soroti, yaitu

Make your website smaller and faster to load by minifying the JS and CSS code.

This minifier removes whitespace, strips comments, combines files, and optimizes/shortens a few common programming patterns. And it comes with a huge test suite.

Jika diterjemahkan

Minifier ini menghapus spasi, menghapus komentar, menggabungkan file, dan mengoptimalkan / memperpendek beberapa pola pemrograman umum. Dan itu datang dengan rangkaian pengujian yang besar.

Ternyata spasi yang ada di CSS itu dihitung.

Padahal di RahmanCyber V1 yang belum saya naikkan menjadi V2, ini memang banyak spasinya.. hehe, kenapa? agar mempermudah saya untuk melakukan pengeditan template. Bahkan ada List Petunjuknya untuk mempermudah saya menuju kode Root atau Kode Utama, misalnya bagian #Comment

Kalo spasi dihilangkan, dan komentar juga, maka saya akan bingung..

Makannya beberapa template yang ringan...

Ketika saya lihat.. oh ternyata di Minifier.. makannya susah untuk ngeditnya.. komentarpun juga hilang...

Jadi benar benar template itu untuk End User.. atau pengguna akhir yang gak perlu ngedit ngedit templatenya, yang penting pakai..

Use it in your projects

Simply add a dependency on matthiasmullie/minify to your composer.json file if you use Composer to manage the dependencies of your project:
composer require matthiasmullie/minify
Although it’s recommended to use Composer, you can actually include these files anyway you want. 

Jika di terjemahkan

Cukup tambahkan dependensi pada matthiasmullie / minify ke file composer.json Anda jika Anda menggunakan Composer untuk mengelola dependensi proyek Anda:
komposer membutuhkan matthiasmullie / minify
Meskipun disarankan untuk menggunakan Komposer, Anda sebenarnya dapat menyertakan file ini sesuka Anda.

Sumber https://www.minifier.org/

Dan disitulah kalian bisa melakukan minify CSS dan Javascript. Jika pengen belajar lebih lanjut, langsung aja ke website sumbernya itu.

Tapi memang cara cara itulah hasil dari pemikiran para pakar untuk dapat membungkus atau mempackaging barang bawaan kalian supaya lebih ringkes dan ringan untuk di muat pakai media transportasi apapun ( dalam hal ini browser ) 

Tampilan Mobile merupakan sebuah Tantangan

 

Makannya, saat ini udah banyak yang meninggalkan yang namanya Slider, karena prioritas utama adalah Muatan tampilan.

Karena dari pengamatan traffic di RahmanCyber sendiri ternyata... pengguna Mobile jauh lebih banyak...

Dan Bahaya juga jika saya tidak melakukan Optimasi, terutama di Speed Mobile...👀

Saya merasakannya sendiri, betapa  saya harus melakukan banyak pengaturan kondisional untuk tampilan mobile ini.

Bayangkan Skor RahmanCyber V1 ini bahkan pernah mencapai dibawah 10 ketika di test di Google PageSpeed.

Dan itu merupakan peringatan merah yang menandakan muatannya berat banget dan Slow.

Konon katanya kalau website itu Slow, maka pengunjung pun akan beralih, dan itu menaikkan presentasi Bounce Rate Website.

Saya biasa Cek di Alexa SiteInfo, yang saat ini masih eksis untuk bisa diakses secara gratis untuk mengetahui peringkatmu.. tetapi itu yang dihitung di alexa adalah posisi rank atau keaktifan website kalian selama 90 hari... di monitoring...

Ngeri ya..

hehe, jadi kalo di Alexa itu jika blognya jadi inactive artinya kunjungannya menurun.. itu akan berpengaruh pada rank.. dan tentu ranknya akan naik.. hehe, naik disini berarti buruk ya..

Apa sih itu DNS Prefetch

Dari beberapa hal yang saya lalui, saya pengen menuliskan catatan ini, tentang DNS Prefetch.

Saya mencoba untuk melakukan pencopotan beberapa Link HREF DNS Prefetch yang telah saya pasang dari dulu, alhasil ternyata malah membuat pagespeed jadi lebih buruk.. 

 

Ketika saya copot, hasilnya pada pengetesan mobile adalah 20, sedangkan ketika saya pasang lagi, eh.. naik lagi jadi 24.

Berarti hal ini memiliki pengaruh besar di tampilan Mobile, sedangkan jika di tampilan desktop, nilainya tidak terlalu besar.. tetapi tetap berpengaruh

 

DNS Prefetch sendiri merupakan fitur dari browser dimana secara background melakukan permintaan nama domain, misal dari rahmancyber.net menjadi ip address contohnya 127.0.0.3. 

Prefetching, also known as DNS prefetching, is the act of resolving a website’s IP address before a user clicks on its link. It attempts to solve latency issues associated with DNS resolution (i.e., the time it takes for your site’s domain name to be resolved to an IP address), which can add several seconds to a site’s page load time.

Sumber : https://www.imperva.com/learn/performance/prefetching/

Dari segi bandwidth memang sih pengaruhnya kecil, namun secara latency ( Jeda Waktu ) pengaruhnya cukup besar terutama di jaringan internet mobile.  

 

 

 

Jadi sepertinya ini cocok untuk Panduan Mempercepat Blog pada Tampilan Mobile.

Ketika kalian menggunakan fitur DNS prefetch, maka saat pengunjung website melakukan klik link, maka jeda waktu atau  latency yang terjadi menjadi lebih rendah. Dalam beberapa kasus, latency dapat menurun hingga satu detik.

Koleksi DNS Prefetch ( Ambil dulu ah )

Berikut ini adalah koleksi yang saya miliki, dan saya tempelkan di RahmanCyber v1, kalian juga bisa memakainya..

1. <link href='//adservice.google.ca' rel='dns-prefetch'/>
2. <link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
3. <link href='//adservice.google.com' rel='dns-prefetch'/>
4. <link href='//www.googletagservices.com' rel='dns-prefetch'/><link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
5. <link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
6. <link href='//fonts.googleapis.com' rel='dns-prefetch'/>
7. <link href='//disqus.com' rel='dns-prefetch'/>
8. <link href='//github.com' rel='dns-prefetch'/>
9. <link href='//cdn.rawgit.com' rel='dns-prefetch'/>
10.<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
11.  <link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
12.<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
13.  <link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
14.<link href='//www.blogger.com' rel='dns-prefetch'/>
15.<link href='//www.facebook.com' rel='dns-prefetch'/>
16.  <link href='//plus.google.com' rel='dns-prefetch'/>
17. <link href='//twitter.com' rel='dns-prefetch'/>
18. <link href='//www.youtube.com' rel='dns-prefetch'/>
19.<link href='//feedburner.google.com' rel='dns-prefetch'/>
20.  <link href='//feeds.feedburner.com' rel='dns-prefetch'/>
21. <link href='//platform.twitter.com' rel='dns-prefetch'/>
22. <link href='//apis.google.com' rel='dns-prefetch'/>
23. <link href='//connect.facebook.net' rel='dns-prefetch'/>
24. <link href='//www.google-analytics.com' rel='dns-prefetch'/>
25.   <link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
26.   <link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
27. <link href='//syndication.twitter.com' rel='dns-prefetch'/>
28. <link href='//fonts.gstatic.com' rel='dns-prefetch'/>
29. <link href='https://3p.ampproject.net' rel='dns-prefetch'/>
30. <link href='https://lh3.googleusercontent.com' rel='dns-prefetch'/>
31. <link href='https://tpc.googlesyndication.com' rel='dns-prefetch'/>
32. <link href='https://i.ytimg.com' rel='dns-prefetch'/>
33. <link href='https://i3.ytimg.com' rel='dns-prefetch'/>
34. <link href='https://img.youtube.com' rel='dns-prefetch'/>
35.   <link href='https://www.googletagmanager.com' rel='dns-prefetch'/>
36.   <link href='https://adservice.google.co.id/' rel='dns-prefetch'/>
37. <link href='//cdnjs.cloudflare.com/' rel='dns-prefetch'/>
38. <link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
39. <link href='//www.blogger.com' rel='dns-prefetch'/>
40. <link href='//fonts.googleapis.com' rel='dns-prefetch'/>
41. <link href='//use.fontawesome.com' rel='dns-prefetch'/>
42. <link href='//ajax.googleapis.com' rel='dns-prefetch'/>
43. <link href='//resources.blogblog.com' rel='dns-prefetch'/>
44. <link href='//www.facebook.com' rel='dns-prefetch'/>
45. <link href='//www.pinterest.com' rel='dns-prefetch'/>
46. <link href='//www.linkedin.com' rel='dns-prefetch'/>
47. <link href='//player.vimeo.com' rel='dns-prefetch'/>
48. <link href='//apis.google.com' rel='dns-prefetch'/>
49. <link href='//connect.facebook.net' rel='dns-prefetch'/>
50. <link href='//www.gstatic.com' rel='preconnect'/>
51. <link href='//www.googletagservices.com' rel='dns-prefetch'/>

Tidak bisa di Copy... hehe, maaf.. saya memakai Cara agar Blog tidak Mudah di Copy Paste soalnya.

Jadi silahkan dicopy yang ini :

<link href='//adservice.google.ca' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
    <link href='//adservice.google.com' 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='//fonts.googleapis.com' rel='dns-prefetch'/>
    <link href='//disqus.com' rel='dns-prefetch'/>
    <link href='//github.com' rel='dns-prefetch'/>
    <link href='//cdn.rawgit.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='//www.blogger.com' rel='dns-prefetch'/>
    <link href='//www.facebook.com' rel='dns-prefetch'/>
    <link href='//plus.google.com' rel='dns-prefetch'/>
    <link href='//twitter.com' rel='dns-prefetch'/>
    <link href='//www.youtube.com' rel='dns-prefetch'/>
    <link href='//feedburner.google.com' rel='dns-prefetch'/>
    <link href='//feeds.feedburner.com' rel='dns-prefetch'/>
    <link href='//platform.twitter.com' rel='dns-prefetch'/><link href='//apis.google.com' rel='dns-prefetch'/><link href='//connect.facebook.net' rel='dns-prefetch'/><link href='//www.google-analytics.com' rel='dns-prefetch'/><link href='//www.gstatic.com' rel='dns-prefetch'/>
    <link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
    <link href='//tpc.googlesyndication.com' rel='dns-prefetch'/><link href='//syndication.twitter.com' rel='dns-prefetch'/><link href='//fonts.gstatic.com' rel='dns-prefetch'/><link href='https://3p.ampproject.net' rel='dns-prefetch'/><link href='https://lh3.googleusercontent.com' rel='dns-prefetch'/>
    <link href='https://tpc.googlesyndication.com' rel='dns-prefetch'/>
    <link href='https://i.ytimg.com' rel='dns-prefetch'/>
    <link href='https://i3.ytimg.com' rel='dns-prefetch'/>
    <link href='https://img.youtube.com' rel='dns-prefetch'/>
    <link href='https://www.googletagmanager.com' rel='dns-prefetch'/>
    <link href='https://adservice.google.co.id/' rel='dns-prefetch'/><link href='//cdnjs.cloudflare.com/' rel='dns-prefetch'/>
    

<link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>

<link href='//www.blogger.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='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>

<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>


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

<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' 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='//syndication.twitter.com' rel='dns-prefetch'/>

Udah ya bisa di Copy... beberapa situs yang di Prefetch ( diambil dulu ) itu sebenarnya ada yang gak penting..

Tapi perlu kalian ketahui, bahwa sebagian besar adalah situs yang sering dipakai atau dimuat..

Contohnya   

 

    <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='//www.blogger.com' rel='dns-prefetch'/>

Enggak asing kan, 1.bp itu biasanya adalah server penyimpanan gambar dari Blogger / Blogspot, atau Pihak Google di Divisi Blogger.. hehe

Oh iya, ini sebenarnya tidak hanya ilmu blogger ya gan, jadi di dunia pemprograman web ini juga sering digunakan.. <link href> untuk memuat CSS dari sebuah folder, atau untuk memuat Js dari folder tertentu yang ada di website,

yang sifatnya adalah dimuat bolak balik ketika halaman halaman web dikunjungi.. biasanya sih ditempatkan di header..

Makannya di Blogspot sendiri kalo kalian lihat B:SKIN itu yang notabene berisi Kode kode CSS, LETAKNYA DIMANA COBA?

ya letaknya diantara tag Header kan <Head> <BSKIN> </Head>

Kira kira seperti itu...

lalu apakah bisa diletakkan di Body? bisa aja, tapi kalian perlu kasih tag / deklarasi bahwa itu CSS , biasanya <STYLE>

seperti itu.

Saya akan coba jelaskan ya..

 

Penjelasan Prefetch Secara Manual

 

 

Jika kita pengen melakukan prefetch secara manual dengan tag HTML, caranya sebagai berikut.. 

<link rel="dns-prefetch" href="https://www.genbisoft.com/">

Jadi, kalian perhatikan diatas ada rel="dns-prefetch" , sebenarnya hanya dengan menambahkan itu ke setiap link yang biasa dimuat

kalian juga bisa meletakkannya seperti ini 

<link href="https://www.genbisoft.com/" rel="dns-prefetch" >

 

Jika kalian meletakkannya di Blogger di dalam edit html biasanya ada bentrok ketika kalian memakai petik dua seperti ini " sama petik satu seperti ini '

 

<link href='https://www.genbisoft.com/' rel='dns-prefetch' >

 

Jadi seperti pada beberapa list DNS PREFETCH yang saya bagikan diatas memiliki petik satu, karena itu peletakannya di HEAD, biar tidak bentrok, biasanya bakalan muncul peringatan ketika kita melakukan save template.. itu tanda ada yang error..

Oh iya, terkadang kan kita tidak bisa memprediksi apakah situs itu pakai SSL atau tidak, jadi seperti contoh list saya diatas.. jauh lebih aman menggunakan tanpa slash untuk linknya..

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

 

seperti itulah gan.. oh iya.. sebaiknya kalian pakai ketika kalian memuat elemen dari website tersebut.. misalnya disini saya memakai gambar dari Genbisoft, maka saya akan memasukkan genbisoft.com sebagai link yang diberi rel dns prefetch

 

Jika tidak lebih baiknya dihapus saja...

 

heh... lelah bang... banyak banget.. gak ada cara otomatisnya?

:D Ada dong...

DNS Prefetch dengan META Prefetch Control

Nah inilah, kita bisa pakai Meta, meta seperti apa? Meta itu seperti ini

<meta http-equiv="x-dns-prefetch-control" content="off">

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

kondisi diatas menandakan bahwa Control DNS Prefetch diaktifkan, artinya  jika Control DNS prefetch “off”, dan linknya dipasangi dns-prefetch , maka artinya link tersebut berarti dns-prefetchnya "on".

 

Masih bingung?

 

Saya kasih contoh lagi..

 

  <meta http-equiv="x-dns-prefetch-control" content="on">

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

kondisi diatas menandakan bahwa Control DNS Prefetch pada Meta diaktifkan, artinya  jika Control DNS prefetch Meta “on”, dan linknya dipasangi dns-prefetch , maka artinya link tersebut berarti dns-prefetchnya "off". 

Makannya biar lebih paham lagi saya kasih contoh, website kamu tidak menggunakan List DNS Prefetch yang saya berikan diatas... Blas pokoknya.. gak ngatur begituan..

<meta http-equiv="x-dns-prefetch-control" content="on">

<link href='//www.genbisoft.com/'> 

 

 Contohnya itu.. maka ketika DNS Control Meta diaktifkan atau kondisinya "on" , maka semua link yang ada ( tanpa ada rel dns prefetch ) maka dns-prefetchnya aktif atau "on" tanpa kamu harus susah payah kasih rel=dns-prefetch satu persatu..

Begitupun juga sebaliknya.. jika contol dns prefetchnya "off" maka semua link juga mati dns prefetchnya "off"

Semoga udah paham ya..

Beberapa template blog saya lihat sudah pakai tag meta.. untuk pengaturan dns prefetchnya.. lebih simple.. cocok buat pemalas seperti saya.

Udah ya... Moga Paham.

Bonus Kesimpulan!

Yey.. ada Bonusss!!! Dari pembahasan saya panjang lebar diatas... ada sebuah kesimpulan yang aya dapatkan dari pengalaman yang memilukan tapi penuh makna ini..

Yaitu

Jika kamu memakai DNS Prefetch Control dengan Tag Meta, itu akan mengurangi beban muatan barang kamu.. 

artinya

Jika kamu harus ngetik atau copas panjang banget koleksi saya yang dulu diatas.. itu bakalan nambah beban pemuatan atau pembacaan kode yang ada di template kalian, tapi dengan menyingkatnya dengan dns prefetch control, akan menyederhanakan kode.

Seperti konsep dalam Minify tadi yang saya bahas diatas..

Jadi spasi aja sebenarnya dihitung!

Komentar Dihitung!

Jadi lebih baik Backup jadi Konten ... hehehehehehehehehehehehehehehehehehehehe 😁😁😁😁

F.N.A-RED