Mengatasi Render-Blocking Javascript Dari Jquery

Mengatasi Render-Blocking Javascript Dari Jquery

Bola Hero Gawai

Mengatasi Render-Blocking Javascript Dari Jquery

Render-Blocking Javascript Dari Jquery
Sebelumnya saya mengacuhkan hal ini ketika tahu bahwa Render-Blocking Javascript Dari Jquery perlu diperbaiki ketika blog dicek di PageSpeed. Karena saya pikir saya sudah memasang Jquery ini dengan benar. Namun kelamaan kepikiran juga bagaimana caranya untuk mengatasi Render-Blocking Javascript Dari Jquery ini. Mungkin karena saya takut salah dalam mengatasinya sehingga keberanian untuk mencoba mengatasinya menjadi hilang.

Akhirnya saya mencoba mengatasi ketakutan saya ini dan mencoba menerjemahkan isi halaman dari panduan Google untuk mengatasi Render-Blocking Javascript dengan alamat berikut: https://developers.google.com/speed/docs/insights/BlockingJS

Di situ saya menemukan petunjuk untuk menggunakan atribut HTML async pada Jquery-nya. Sebelumnya Jquery saya simpan di edit HTML sebagai berikut:


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

Kemudian saya mencoba menambahkan atribut HTML async menjadi seperti berikut:


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

Kemudian saya mengujinya pada halaman postingan blog untuk memastikan semua elemen blog berjalan seperti sebelumnya. Dan hasilnya halaman postingan tidak mengalami kendala apa pun, berjalan seperti sebelumnya. Namun ketika saya mencoba pada halaman depan blog, javascript pada post untuk mengatur gambar thumbnailnya agar naik dan turun ketika dihover menjadi tidak berjalan, namun saya biarkan terlebih dahulu. Kemudian saya cek blog di PageSpeed untuk memastikan apakah Render-Blocking Javascript dari Jquery ini sudah teratasi atau belum. Dan hasilnya cukup menakjubkan, seperti pada gambar di bawah ini.

Page speed Kompi Ajaib 1
Render-Blocking Javascript Dari Jquery sebelum diatasi.

Page speed Kompi Ajaib 2
Lihat skornya setelah Render-Blocking Javascript Dari Jquery diatasi.

Dengan mengatasi satu hal tersebut, skor speed blognya naik dengan menakjubkan. Tentunya ini menjadi hal yang cukup bagus untuk blog Kompi Ajaib sendiri. Namun permasalahan masih tersisa di homepage blog, untuk mengatasi javascript yang mengatur thumbnail untuk naik turun ketika dihover, saya akhirnya menggunakan CSS untuk mengatur naik turun thumbnail ketika dihover dan menghapus javascriptnya itung-itung untuk merampingkan size blog juga.

Bagaimana dengan blog Anda? Jika mengalami hal yang sama seperti Kompi Ajaib yaitu Render-Blocking Javascript dari Jquery, coba saja pengalaman saya ini siapa tahu bisa berhasil juga pada blog Anda.

Untuk Render-Blocking Javascript itu sendiri jika diartikan itu adalah javascript tersebut menyebabkan loading pada halaman blog ketika diakses baik melalui handphone, ipad, atau desktop. Loading itu sendiri disebabkan karena browser harus mendownload terlebih dahulu javascriptnya sebelum halaman berhasil dimuat.

Tertunya hal ini akan berakibat kurang baik di mata search engine khususnya Google. Jika kita peduli dengan peringkat blog di serp, tentunya hal ini harus diatasi karena Google akan menyingkirkan blog atau web dari serp yang memiliki loading lambat atau blog yang menyebabkan pengunjungnya harus menunggu waktu yang lama untuk membuka suatu halaman sebagaimana yang ditunjukan di PageSpeed seperti gambar di atas tadi.

Update:
Setelah saya baca beberapa argument di beberapa forum, ternyata asynchronous pada jquery library ini tidak baik karena jelas akan mengganggu element blog yang menggunakan jquery. Untuk saat ini belum ada solusi yang terbaik untuk mengatasi render-blocking js dari jquery ini.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

63 Comments Add Comment

ajib,,! ni code dari kemarin saya cari-cari, eee la kok nongol di kompiajaib. iji comot mas...!

BTW, skornya top bisa sampai diatas 90

Balas

Silahkan dicoba mas, mudah2an bisa berhasil juga :D

Balas

ternyata gitu ya Mas ngatasinya. tak coba dulu Mas, biar blog saya lebih baik lagi dari sebelumnya..hehehe

Balas

Silahkan dicoba aja bli, siapa thu bisa berhasil juga seperti Kompi Ajaib :D

Balas

saya ijin belajar ya mas biar ngerti, hehehe :D

Balas

nah ini nih yang bikin saya bingung hehe.. ternyata pake kode async yah, untung aja bukan pangset wkwk :D

Balas

Silahkan mbak Indri, semoga bisa dipahami :)

Balas

Eta mah asin loba teuing uyah jadi pangset kang wkwkwkwk :ng

Balas

masih agak bingung memahami....
baiknya javascripnya dihapus atau diapakan ya bang ady biar blog bisa SEO Friendly

Balas

Sebenarnya design template modern tidak bisa lepas dengan javascript, dan sebagian besar javascript ini dibantu kinerjanya dengan JQuery. Dengan ini tampilan blog menjadi semakin aktraktif dan enak dipandang mata. Namun kita perlu ingat, sebaiknya gunakan javascript yang betul-betul diperlukan blog agar blog memiliki loading yang ramah terhadap pengunjung, karena jika terlalu banyak javascript apalagi yg benar-benar tidak diperlukan, ini akan menyebabkan loading blog menjadi berat.

Balas

Bisa menambah pundi-pundi SEO nih.. sikat!! :ng

Balas

Di cobiah hela Kang laporannya menyusul :)

Balas

Ini bisa membuat blog semakin bagus apa gimana nih Kang
Saya baca nya belum seksama, komen dulu nanti komen lagi

Balas

wah akhir nya ada yang seperti ini..
langsung saya pasang :D

Balas

Di IE, blog saya jequerinya tidak berfungsi Kang :)

Balas

Silahkan dicoba aja mas :D

Balas

Begitulah ie mas, susah kompromi hehehe :D

Balas

Jika bisa diatasi tentunya ini akan berdampak baik untuk blog kang :)

Balas

Silahkan mas, mudah2an bisa sukses :)

Balas

Sementara saya pakai dulu Kang siapa tau nanti ada solusinya he...

Balas

kang kompi kalo modifikasi lebar halaman statik bagaimana? kaya halaman statik kompiajaib....

Balas

wah thanks ya mas :D
walau ga ngerti :p wkwkw

mampir balik ya :) http://nandarious.com :)

Balas

Menggunakan tag conditional untuk halaman statis mas dan harus tahu persis elemen-elemen blog yang akan disesuaikan atau dihilangkan. Sebagai contoh saya berikan tag conditional halaman statis Kompi Ajaib

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#outer-wrapper{margin-top:-4px;}
#sidebar-wrapper,#sidebar1-wrapper,#sidebar2-wrapper,#sidebar3-wrapper, #comments{display:none}
.post h1,.post h2{background:#666;text-align:center;color:#eee;padding:10px 0;text-shadow:none;height:35px}
.post h1 a, .post h1 a:visited, .post h1 strong,.post h2 a, .post h2 a:visited, .post h2 strong{display:block;text-decoration:none;color:#eee}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#ef7f67}
.post{margin:0 auto;padding:0;background:#fff}
.post-body{margin:0 auto;padding:10px 20px}
#outer-wrapper,#main-wrapper{width:100%;}
</style>
</b:if>


Display:none adalah elemen-elemen blog yang dihilangkan.

Balas

Siip mas :D
Wah pindah ke WP selfhost nih... keren mas :-bd

Balas

Dicoba dulu aahhh..... :-d

Balas

Akhirnya... pagespeed insight :) >>>
memang benar kang, dulu saya pake "async" pernah dapet skor 98 :) wew... tp sekarang dah ganti template
masalahnya pemakaian itu belum cross browser, sebagian browser blm ngerti :D... jd dampaknya beberapa fitur tdk bekerja...
Sip infonya, mudah-mudahan lebih maju kang

Balas

Silahkan mas :D

Balas

Memang benar kang, pada beberapa browser seperti ie ada beberapa fitur yang tidak berjalan, namun over all tidak mengganggu tampilan blog saya, karena memang ie sedikit sudah diatur biar kompak sama yg lain hehehehe :p
Makasih atas do'anya hehehe :D

Balas

betul kang, berarti script di render terakhir dengan asynchronous ini... kl di blog saya sudah terapkan di social share... mantaps lah pokonamah :D

Balas

Hehehehe asa aya nu nyaliwuri yeuh wkwkkwkw :ng

Balas

sumuhun da abdimah jurig... :ng

Balas

Lalu Bagaimana Cara Mengatasi Render-Blocking Css mas...?

Balas

gaya PP na .. meni serem kalem kitu

Balas

mantappss :-bd saya baru tau malah hehehe :D
haturtengkyu kang

Balas

waduh... saya nyimak saja dulu ya mas.. belum paham saya mas .? hehehe

Balas

Gaya anak muda cenah kang :ng

Balas

Harus dibuat inline mas artinya harus dibuka css-nya dan simpan di edit html seperti biasa.
Biasanya kebanyakan penyebabnya dari css font, silahkan buka css fontnya dan simpan di atas skin. Jika dibuka css font akan seperti di bawah ini sebagai contoh:
@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
src: local('Oxygen'), local('Oxygen-Regular'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v3/RzoNiRR1p2Mqyyz2RwqSMw.woff) format('woff');
}

Balas

Sama-sama mas :D

Balas

Silahkan mas semoga bisa dimengerti :D

Balas

berarti kita harus host file woff dari font tersebut dan menuliskannya secara manual melalui tag skin atau style ya mas...?

Balas

Betul mas, sebenarnya pakai host yang sudah ada juga ga apa2, tapi mau di host sendiri juga bisa.

Balas

Saya lihat punya mas Adhy Next dan Prev yang diganti judul Artikel masih bisa jalan, saat saya mencoba menggunakan async dipemanggilan jQuery kok malah jadi tidak muncul yah mas malah menjadi 'Older Post' dan 'Newer Post'? =( Terkadang Threaded Hack Comment juga depthnya tidak bekerja, semua komentar terlihat lurus.

Balas

Coba semua javascript selain Jquery library pindahkan ke atas kode </body>

Balas

Whoah! :-bd Jadi mas Adhy, harus sering berguru ini. =)D

Balas

By the way kok bisa gitu yah mas? Kenapa setelah dipindah ke atas </body> jadi jalan. Nyari di Google bingung kata kuncinya. :D

Balas

Thanks pro , nice post

Balas

"Use asynchronous versions of the following scripts:
https://apis.google.com/js/plusone.js
https://apis.google.com/js/plusone.js"

How fix it, please help me, thanks.

Balas

I think your problem like this comment http://www.kompiajaib.com/2014/02/optimasi-sosial-media-untuk-loading-blog.html?showComment=1391666467148#c2144457372475691199

Balas

saya pernah membaca tentang penggunaan async ini mas tapi saya belum berani menggunakannya karena di template blog masih ada beberapa javascript yg belum fix dan mungkin bisa bentrok dg penggunaan async tersebut,, makasih atas infonya mas Adhy...

Balas

Betul mbak Ana dengan kadang ada javascript yang tidak jalan, atau coba dulu semua javascript selain Jquery library pindahkan ke atas kode </body> kemudian jquery nya coba pakai async

Balas

PErubahannya besar amat kang. Jadi pengen nyoba nih

Balas

lalu kalau untuk font dengan tips yang mas katakan,
lalu cara untuk menghadapi font face yang tidak bekerja firefox itu bagaimana mas...?

terdengar kabar sih cara memperbaiki font face yang tidak bekerja tersebut harus disimpan dalam host cssnya.
Jadi bingung...?

Balas

kang saya m tanya.
alamat ngecek kayak screenshot di atas itu apa ya kang..?

Balas

PageSpeed Insight bung :)

Balas

Silahkan sist :) namun kadang-kadang beberapa elemen lainnya yg memakai jquey tidak jalan.

Balas

Ok..
terima kasih tengkyu :D

Balas
This comment has been removed by the author.

emm.. @@, try & error lg nih.. makasih kang tutorialnya :-d ,.. langsung praktek... ;)

Balas

Berhasil berhasil Horaay.

Matur suwun kang ^_^

Balas

waduh.... sampai skrg juga blum ada mas Adhy Suryadi cara untuk mengatasi masalah ini slain cara diatas ya ?

Balas

Apakah semua javascript yang terdeteksi di pagesped itu kita render semua Om?
Terima Kasih

Balas

itu blog arlina kok bisa ijo semua speednya tanpa pke async heran :3

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×