Penggunaan atribut 'async' dan 'defer' pada HTML Script untuk Javascript External Blogger JSON

June 23, 2018 - #blog_tutorial #web

Penggunaan atribut 'async' dan 'defer' pada HTML Script untuk Javascript External Blogger JSON

Anda mungkin seseorang yang peduli dengan nilai atau kualitas page speed setelah menguji dibeberapa page speed analyzer seperti PageSpeed Insights, GTMetrix, Pingdom, dan lain-lain, serta dengan hasil kurang memuaskan dengan membawa masalah Blocking Rendering atau serupa.

Disaat pengembang web atau blogger templates yang ingin menggunakan Javascript external, tapi tag HTML <script> diletakkan di pertengahan konten HTML lainnya bukan terletak di bagian akhir HTML konten atau di sebelum akhir tag penutup body yaitu </body>. Pengembang web atau blogger templates tidak bisa mengelak, harus menggunakan Javascript external di posisi tersebut dan setelah melakukan pengetesan page speed, hasil yang didapat buruk. Nilai buruk ini biasa dipoinkan PageSpeed Insights dengan poin masalah Blocking Rendering atau pada GTMetrix dengan poin masalah Optimize the order of styles and scripts.

Ini memang biasa terjadi, natural dan lumrah, karena akibat dari penggunaan Javascript external yang diletakkan bukan di akhir konten style atau sebelum tag </body> yang dapat memblok konten di bawahnya atau konten yang tertulis setelah Javascript external tersebut, memblok konten tersebut termasuk mengunduh atau fetch sumber konten pada halaman web atau blog.

Contoh nyatanya, jika ada pengguna atau pembaca dari sebuah web atau blog, membuka sebuah web atau blog yang sumber kontennya mempunyai Javascript external yang harus dimuat ditengah-tengah konten, ketika pengguna atau pembaca tersebut mempunyai kecepatan koneksi internet yang lambat, pengguna atau pembaca tersebut akan mendapatkan layar putih atau layar kosong sementara sampai Javascript external tersebut benar-benar selesai terunduh(downloaded), tereksekusi(executed) dan terurai(parsed). Bayangkan jika ini memang terjadi, pengguna atau pembaca akan menutup tab, dan membuka halaman web atau blog lain. Walaupun pada kenyataannya, mungkin hanya akan ada (0.1 - [1 digit]%) pengguna atau pembaca yang akan mendapatkan itu, karena tuntutan sekarang akan kecepatan koneksi internet. Tapi masalah tersebut tetap harus dihindari, dan para page speed anaylizer menganggap nya sebuah nilai buruk pada halaman web atau blog.

Solusi untuk mengatasi itu biasanya disarankan meletakkan Javascript external sebelum tag </body>, namun ada solusi lain jika memang itu yang terkadang memang tak bisa hindari atau ingin penempatan script mudah dimengerti, lebih readable atau juga seperti penempatan Javascript external blogger dengan penempatan di dalam sebuah widget content yang penempatannya harus teratur.

Maka ada solusinya, yaitu dengan penambahan atribut 'async' dan 'defer' pada penulisan HTML <script>

Syntax (XHTML)

<script async='async' src='...'/>
<script defer='defer' src='...'/>

Syntax (HTML)

<script async src='...'/>
<script defer src='...'/>

Platform Blogger menggunakan XHTML. Tak boleh disingkat seperti pada HTML.

Dengan penggunaan atribut 'async' dan 'defer', script tidak akan membebani atau menambah load time (atau layar putih kosong sementara) saat halaman dimuat.

async: Script terunduh dan tereksekusi secara asinkron dengan yang lainnya. Saat script sedang dimuat atau diunduh, pemuatan atau pengunduhan tidak akan memblok konten lain dan sejalan dengan penguraian script dan konten lain.

defer: Script terunduh dan dieksekusi setelah penguraian konten lain. Saat script sedang dimuat atau diunduh, pemuatan atau pengunduhan tidak akan memblok konten lain dan sejalan dengan penguraian script dan konten lain.

Jika digambar dalam grafik, tampilannya akan seperti ini

Jika atribut async digunakan, script akan diambil secara paralel untuk diurai, dan dievaluasikan sesegera mungkin setelah selesai (berpontensial bahkan sebelum parsing selesai)

Jika atribut defer digunakan, script akan diambil secara paralel dan dievaluasikan setelah halaman selesai parsing.

Jika tidak keduanya, script akan diambil dan sesegera mungkin dievaluasikan, memblok penguraian (blocking parsing) sampai script diambil dan dievaluasikan selesai, membuat semuanya menjadi lambat bahkan berpotensial parsing tertunda lebih lama lagi.

Benar-benar masalah sepertinya kalau memang tidak dilakukan (mungkin)
Namun, masalah bertambah jika 'async' atau 'defer' digunakan dan saat sebuah callback function dengan penggunaan

document.write()

Syntax tersebut pada Javascript tidak bisa digunakan dengan asinkron maupun penundaan (defer) metode Javascript external, seperti pada post saya sebelumnya
Menggunakan Blogger JSON Feed API
Membuat Slide OwlCarousel2 dengan Blogger JSON Feed API

Ini juga bisa menjadi referensi diluar platform blogger, karena Javascript semuanya sama.

Saat saya membuat sebuah callback, contohnya:

<script type="text/javascript">//<![CDATA[
function dapatsemuajudul(json){
  var entry=json.feed.entry[i];
  for(var i=0;i<entry.length;i++){//looping i sebanyak jumlah post(entry.length)
   var posttitle=entry.title.$t;
    for(var j=0;j<entry.link.length;i++){
     if(entry.link[j].rel == "alternate"){
      var posturl=entry.link[j].href;//dapatkan link setiap post ke-i
     }
    }
   var posttag=[];var posttagwrite="";
   for(var k=0;k<entry.category.length;k++){
   //setiap post bisa ada beberapa label, jika diambil secara biasa hanya akan terambil satu label pertama saja setiap post
   //Maka perlu diambil semua label pada setiap index post atau post ke-i
    posttag.push(entry.category[k].term);//masukkan ke dalam array
   }
   for(var t=0;t<posttag.length;t++){
    posttagwrite+="<a href='../search/label/"+posttag[t]+"?max-results=5'>"+posttag[t]+"</a> ";
   }
   document.write('<li><a href="'+posturl+'">'+posturl+'</a><br/>'+posttagwrite+'</li>')//print sebanyak dan setiap post i
  }
}
//]]></script>

dan dengan penggunaan Javascript external blogger JSON Feed:

<script src='http://audiralog.blogspot.com/feeds/posts/default/-/fun?max-results=5&alt=json-in-script&callback=dapatsemuajudul'/>

Jika saya menambahkan atribut 'async' pada <script>, saya tidak akan mendapatkan hasil apapun, dengan callback tersebut. Maka yang dapat dilakukukan adalah mengganti metode

document.write()

dengan metode:

document.getElementById('targetID').insertAdjacentHTML('afterbegin','kontennya')

Dengan metode tersebut, saya akan mendapatkan hasil kembali seperti biasa dengan document.write() tanpa asinkron Javascript external.

Keterangan

targetID //elemen target ID tempat konten akan ditampilkan

.insertAdjacentHTML('afterbegin','konten')

//'afterbegin' konten dimuat setelah pembuka targetID, cth: <div id='targetID'>

//'afterend' seteleh elemen targetID

//'beforebegin' sebelum elemen targetID

//'beforeend' sebelum penutup elemen targetID, cth: </div>

Jadi, saya perlu mengganti metode document.write() pada callback yang saya tulis

<script type="text/javascript">//<![CDATA[
function dapatsemuajudul(json){
  var entry=json.feed.entry[i];var htmltag='';
  for(var i=0;i<entry.length;i++){//looping i sebanyak jumlah post(entry.length)
   var posttitle=entry.title.$t;
    for(var j=0;j<entry.link.length;i++){
     if(entry.link[j].rel == "alternate"){
      var posturl=entry.link[j].href;
     }
    }
   var posttag=[];var posttagwrite="";
   for(var k=0;k<entry.category.length;k++){
    posttag.push(entry.category[k].term);
   }
   for(var t=0;t<posttag.length;t++){
    posttagwrite+="<a href='../search/label/"+posttag[t]+"?max-results=5'>"+posttag[t]+"</a> ";
   }
   htmltag+='<li><a href="'+posturl+'">'+posturl+'</a><br/>'+posttagwrite+'</li>'
  }
document.getElementById('targetID').insertAdjacentHTML('afterbegin',htmltag);
}
//]]></script>

Dengan Javascript external untuk memanggil 'dapatsemuajudul'

<script async='async' src='http://audiralog.blogspot.com/feeds/posts/default/-/fun?max-results=5&alt=json-in-script&callback=dapatsemuajudul'/>

Maka saya, mendapatkan konten seperti sebelumnya tanpa asinkron Javascript, plus dengan rendering yang baik dan nilai page speed yang bagus tentunya.
Jika pengguna atau pembaca tidak menyadarinya atau tidak mendapatkannya tidak masalah, namun apa yang terjadi sebenarnya sangatlah berbeda, bahkan bisa menambah load time jika terjadi timed out saat mengambil script atau kecepatan koneksi internet lambat saat mengambil script. Pada gambar grafik sebelumnya, runtime yang sebenarnya juga berpengaruh pada koneksi internet, dan banyak hal lain yang pasti mempengaruhi runtime dan secara langsung mempengaruhi pengalaman pengguna atau pembaca.