Cara Mengatasi Render-Blocking JavaScript dan CSS di Blogger

Cara Mengatasi Render-Blocking JavaScript dan CSS di Blogger - Render-Blocking dapat memperlambat loading halaman web Anda, yang berdampak buruk karena banyak alasan. Kecepatan situs berperan dalam banyak aspek penting situs web atau blog, termasuk kegunaan umum dan Pengoptimalan Mesin pencarian (SEO). Bila situs loadingnya lambat, maka cenderung kehilangan pengunjung, dan cenderung tidak mendapat peringkat tinggi dalam hasil mesin pencarian.

 

Tentu saja, kecepatan situs bukan hanya dipengaruhi oleh Render-Blocking JavaScript dan CSS. Karena itu, ini adalah faktor yang dapat membuat perbedaan yang signifikan dalam waktu loading. Ingatlah bahwa setiap elemen di halaman web membutuhkan byte, semakin besar maka menghasilkan waktu loading yang lebih lama. Semakin sedikit dan ringan Script yang dimiliki situs Anda, semakin baik. Bagaimanapun, Anda tidak ingin membiarkan situs yang lambat berdampak negatif pada blog atau web.

 

Apa Itu Render-Blocking JavaScript dan CSS?

Saat situs web dimuat di browser, ia mengirimkan panggilan ke setiap Script dalam antrian. Biasanya, antrian tersebut harus dikosongkan sebelum situs web terlihat di browser. Antrean skrip yang dapat menghentikan loading situs web sepenuhnya adalah file JavaScript dan CSS yang memblokir perenderan.

Jika antrean Script sangat panjang, diperlukan beberapa saat sebelum pengunjung dapat mengakses situs Anda. Seringkali, banyak dari Script ini tidak diperlukan untuk langsung melihat situs web, dan dapat dengan mudah menunggu untuk dijalankan hingga situs itu sendiri sepenuhnya dimuat.

Dengan kata lain, jenis skrip ini memperlambat loading halaman web, yang kemungkinan besar bukanlah kebutuhan mendesak untuk ditampilkan bagi pengguna.
 

Cara Menghilangkan Render-Blocking JavaScript dan CSS

Sebelum Anda dapat menghilangkan skrip yang memblokir perenderan, Anda perlu mengidentifikasi skrip mana yang menyebabkan masalah. Gunakanlah Google's PageSpeed ​​Insights. Cukup masukkan URL dibawah, dan Google akan memberi tahu Anda dengan tepat script mana yang memperlambat halaman Anda:  

https://developers.google.com/speed/pagespeed/insights/

Biasanya, permasalahan berada pada script Javascript dan CSS eksternal, atau yang berasal dari luar, seperti jquery

Bila dalam template blog kita temukan kode JavaScript dari jQuery seperti dibawah ini :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">

Maka, script tersebut berasal dari ajax.googleapis.com dengan script jquery, elemen inilah yang bisa menyebabkan  permasalahan Render-Blocking JavaScript dan CSS di Blogger.

Maka Cara Mengatasi Render-Blocking JavaScript dan CSS di Blogger, kita cukup menambahkan atribut async pada kode tersebut. Async adalah kependekan dari "asynchronous". Lebih mudah untuk memahami asinkron jika Anda terlebih dahulu memahami apa yang dimaksud dengan "sinkron", kebalikannya.Cara penulisannya seperti dibawah ini:

<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">

 

Dengan menambah atribut asynchronous atau async pada jquery maka render blocking javascript akan teratasi, jadi setiap pernyataan dalam kode dieksekusi satu demi satu. Ini berarti setiap pernyataan harus menunggu pernyataan sebelumnya selesai dieksekusi. Demikian Cara Mengatasi Render-Blocking JavaScript dan CSS di Blogger, semoga manfaat.