Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara mengatasi JavaScript atau CSS yang memblokir perenderan


Untuk menghilangkan JavaScript atau CSS yang memblokir perenderan di konten paruh atas sangat mudah, untuk melakukanya kita harus benar-benar jeli dan teliti memahami template blog anda, apabila anda sedang menghadapi hal semacam ini, maka simak baik-baik tutorial cara mengatasi atau menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas blog template anda.

Jikalau anda mempunyai sebuah Template blog yang menghadapi hal semacam ini, sebelumnya anda harus test speed developer Google terlebih dahulu untuk mengetahui sejauh mana anda sudah optimasi dan dimana letak kesalahan template blog anda, maka disitu akan terlihat jelas bagian mana yang harus di benahi dan di perbaiki.
#Solusi jika tidak mau repot silahkan ganti template blog saja dengan template yang baru nih saya ada beberapa Template Mobile Friendly dan Responsive Blogger
Misalnya anda mempunya jquery seperti begini..<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
biasanya berada diatas kode </Head> kedua di HTML template blog anda, dan type dari jquery sendiri berbeda-beda, gunakan jquery type template anda sendiri, setelah anda menemukan kode diatas silahkan copy di notepad dan hapus jquery di atas kode </Head> ke dua tadi.

Selanjutnya cari kode <div class='komentar'> atau <div class='komentar-blogger'> dan pastekan kode berikut sebagai pengganti <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/> di blog anda tadi, letakan kode di bawah ini di bawahnya <div class='komentar'> atau <div class='komentar-blogger'>


<script type='text/javascript'>

       //<![CDATA[

       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}

       //]]>

</script>

</div>

Setelah anda sudah memindahan jquery lalu save template anda, dan silahkan di cek untuk membuka blog anda, umumnya banyak yang menggunakan 'async' type jquery, atau memindahkanya diatas kode </Body> namun cara itu tidak efektif, memang lolos uji tes speed developer Google, namun dampaknya banyak tombol jquery banyak yang tidak berfungsi.

Tergantung masalahnya, kalau hal diatas adalah masalah jquery, kalau masalah CSS dan Blogger js beda lagi.

Apabila font anda berubah menjadi font default atau font awesome anda tidak berfungsi maka silahkan cari font anda atau pindah font anda dari atas </body> ke atas kode </head> kedua template blog anda, itulah cara agar perenderan tidak ketahuan oleh jquery yang bisa memperlambat loading blog anda.

Masalahnya adalah, hal ini hanya akan bekerja hanya dalam postingan saja, dan tidak bekerja saat di homepage, maka solusinya jangan menggunakan menu javascript, gunakan menu CSS atau pure CSS saja, yang ringan dan menu sederhana, agar tidak mempengaruhi loading, juga dapat menguntungkan pengunjung untuk mempermudah mengeklik setiap menu di header blog anda.

Solusi yang paling tepat untuk mempercepat loading adalah dengan tidak terlalu banyak membebani blog dengan javascript, gunakan javasript sedikit mungkin, kalau perlu hapus saja javascript, karena penggunaan javascript terlalu banyak akan membebani loading blog kita, apalagi saat tampilan versi mobile, itu sangat membuat loading menjadi lambat.