Cara Mengatasi 'Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas' pada page speed Google

Cara Mengatasi 'Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas' pada page speed Google. Ketika kita mengecek kecepatan blog/website di page speed tool google, sering kali hasilnya tidak memuaskan. Contohnya blog ini yang saya cek di page speed google ternyata pada tampilan mobile hanya mendapatkan nilai 71 tapi pada tampilan desktop/komputer memiliki nilai yang lumayan tinggi yaitu 86.

Berikut screen shoot nya :

Pada tampilan mobile

Pada tampilan dekstop

dari permasalahan diatas saya ingin memperbaiki masalah utama pada tampilan mobile yaitu "Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas".

1. Apa pengertian atau maksud dari pernyataan Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas ?

Menurut eksperimen saya maksud dari pernyataan tersebut adalah menghilangkan tampilan drop down menu blog pada tampilan mobile, mungkin google menyatakan jika menu pada blog tampilan mobile diaktifkan maka akan memakan waktu loading. oleh karena nya saya akan membahas kode html untuk menghapus aturan ini agar nilai pada tampilan mobile bisa tinggi (hijau).

Menu drop down pada blog diatas masih bisa di lihat

2. Cara memperbaiki  pernyataan Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas.

a. Cek URL blog di page speed google

b. Pilih yang akan di perbaiki, misalnya pada tampilan seluler

c. cari kode yang bermasalah, dibawah ini contoh kode html yang bermasalah

 Kode html yang bermasalah adalah :

• http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
• d. Cari kode yang bermasalah di template blogger
• e. Masuk blogger.com > Pilih Template > edit template 
• f. Cari (CTRL+F)  http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js  Pada html template.
• g. Maka seperti dibawah ini kode html lengkapnya :

<!--[if IE]><script src='//html5shiv.googlecode.com/svn/trunk/html5.js' type='text/javascript'></script><![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

<script type='text/javascript'>

//<![CDATA[

h. Tambahkan kode async='async' setelah kode <sript atau sebelum kode src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

Contohnya :

<!--[if IE]><script src='//html5shiv.googlecode.com/svn/trunk/html5.js' type='text/javascript'></script><![endif]-->
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[

i. Simpan hasilnya, dan cek kembali di page speed google

Nilainya menjadi 93 setelah perbaikan

Catatan : Namun perlu diketahui, dengan perbaikan ini menu drop down pada tampilan mobile tidak dapat di klik atau dilihat !

Demikianlah Cara Mengatasi 'Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas' pada page speed Google, semoga membantu artikel ini :D