Mengatasi Prefer Asynchronous Resources pada GTmetrix PageSpeed

Masih dalam artikel seputar GTmetrix, kali ini saya ingin membagikan cara mengatasi masalah Prefer Asynchronous Resources pada GTmetrix bagian PageSpeed. Mari kita bahas dari awal, yaitu pengertiannya sampai pada tahap penumpasan masalah.

Apa itu Prefer Asynchronous Resources (PAR)?

Bila diartikan kedalam bahasa Indonesia, PAR bisa disebut juga "Lebih memilih sumber asinkron". Sebelum kita membahas lebih dalam seputar PAR, ada baiknya anda mengetahui terlebih dahulu apa itu Asynchronous / asinkron.

Asynchronous, atau disingkat async merupakan lawan dari Synchronous (sync). Sync memiliki arti sinkron. Dalam dunia PageSpeed, Sync dapat diartikan sebagai resource/script eksternal yang diload bersamaan dengan page.

Dalam artian, ketika anda membuka sebuah web, dan ada sebuah script sync, maka script tersebut dimuat ketika halaman sedang loading. Berbeda dengan async, script dimuat ketika keseluruhan halaman telah selesai dimuat.

Lalu, apa hubungannya dengan Prefer Asynchronous Resources?

Ketika sebuah script contohnya Javascript eksternal diload secara Async, maka loading blog tergolong lebih cepat, dikarenakan biasanya script eksternal itu rata-rata merupakan script besar dan berat.

Nah ketika script tadi diload secara async, maka script tidak akan mengganggu browser untuk memuat halaman blog. Istilahnya isi konten web/blog tersebut muncul duluan, kemudian setelah muncul semua barulah script tadi di load.

Sebenarnya masalah ini mirip-mirip dengan Render-Blocking Javascript pada PageSpeed Insights...

Oleh karenanya, GTmetrix sangat menyarankan anda untuk membuat semua script eksternal anda untuk dimuat secara async, bukan sync, guna mempercepat munculnya isi konten di blog. Untuk yang ingin detailnya dari GTmetrix langsung, silakan lihat disini.

Bagaimana Cara Mengatasi Prefer Asynchronous Resources ini?

Sekarang kembali ke topik awal. Kalau anda sudah membaca baik-baik pengertian Prefer Asynchronous Resources diatas, secara alami anda sudah tau cara mengatasinya, yaitu dengan membuat script eksternal dimuat secara async.

Tetapi masalahnya ada yang tidak paham caranya, bahkan ada beberapa script yang tidak bisa dibuat async, harus dihapus scriptnya. Script ini biasanya saya namakan "Script Siluman Blogger - Plusone.js".

Caranya cukup mudah, sekarang silakan anda cari script eksternal di blog anda. Ada 2 bentuknya, antara lain:

<script type='text/javascript' src='.......' />

dan

<link href='.......' rel='stylesheet' type='text/css'/>

Silakan anda tambahkan atribut async pada tag diatas, sehingga kurang lebih bentuknya menjadi:

<script async='async' type='text/javascript' src='.......' />

dan

<link async='async' href='.......' rel='stylesheet' type='text/css'/>

Simpan, dan cek kembali di GTmetrix. Mudah saja bukan? Iya. Tetapi ini tidak berlaku untuk script siluman yang saya bilang tadi. Script siluman ini hanya berlaku untuk blogger saja ya, selain blogger tidak akan ada. Untuk cara mengatasinya silakan ikuti cara berikut.

Cari kode berikut ini di Edit HTML:

</body>

Setelah ketemu, silakan hapus kode tersebut dan ganti dengan kode:

&lt;textarea readonly disabled style=&#39;display:none&#39;&gt;
&lt;!--</body>--&gt;
&lt;/textarea&gt;
&lt;/body&gt;

Simpan template dan cek kembali skor speednya. Bila anda melakukan cara diatas dengan benar, sudah bisa dipastikan masalah akan kelar. Atau bila ada kesulitan, jangan segan untuk bertanya kepada saya lewat komentar dibawah ini.