Sepertinya Pemblokir Iklan Anda Aktif
Maaf, Sayangnya blog ini tidak bisa hidup tanpa bantuan dari iklan.
Mohon nonaktifkan terlebih dahulu Pemblokir iklan (misal: Adblock) khusus untuk blog ini.
Setelah Anda menonaktifkan AdBlock, silahkan reload halaman ini.
Terima Kasih, semoga anda selalu dimudahkan pada setiap usaha, serta semoga Tuhan menambah kualitas kesehatan anda sekeluarga.

Jabat tangan
FaRo.

Punya hobi blog walking itu menyenangkan, namun berbeda rasanya jika ada blog yang lama loading hanya karena penempatan resource javascript yang salah, salah bukan menurut saya tapi menurut Google PageSpeed insight.

Dalam hasil uji Google PageSpeed insight, Error ini ada pada "Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas". Dimana Javascript dan CSS yang dimaksud adalah konten eksternal seperti jQuery dan pluginnya, sedangkan konten paruh atas menurut Google adalah semua konten yang ada di dalam daerah antara header sampai footer.

Javascript Warning Google PageSpeed

Tidak ada salahnya menggunakan Javascript dan CSS external, karena itu adalah optimasi penggunaan cache browser, dengan pengaturan server yang baik, Javascript dan CSS eksternal yang tersimpan di cache browser akan mempercepat load page jika ada pengunjung yang datang kembali dalam kurun waktu tertentu.

Efek penempatan javascript yang salah akan semakin memperburuk lama sebuah website untuk dimuat. Setelah melakukan survey ke beberapa blog pribadi, saya medapati bahwa sebuah blog tidak akan muncul isinya sebelum beberapa gambar di dalamnya dipanggil (gambar pada background, header posting dan widget), kemudian diperparah lagi dengan javascript synchron yang dipasang sebelum tag </head>, membuat website tetap tidak muncul meski htmlnya selesai diunduh.

Kesalahan ini tidak sepenuhnya kesalahan dari pemilik blog, dikarenakan pembuat template dan tutorial pemasangan widget biasanya menempatkan Javascript sebelum tag </head>, tujuannya tentu adalah membuat blog terlihat menarik dengan javascript yang telah di-render sebelumnya. Meskipun mungkin pengunjung telah lebih dahulu menutup tab browser sebelum itu terjadi.

Kemudian saya coba menelusuri website professional seperti website produk-produk google. yahoo dan w3schools, dari situs tersebut saya mendapati bahwa ketika pertama kali membuka situs, dengan kecepatan koneksi rendah, konten situs terlihat terlebih dahulu, meskipun masih berantakan tetapi tidak membuat pengunjung lama untuk tau isinya, kemudian situs menjadi lebih rapi bahkan sebelum status memuat halaman selesai.

Setelah melihat source halaman situs tersebut, saya mendapati kesamaan yaitu css eksternal dan javascript eksternal diletakkan sebelum tag end </body>, kemudian saya praktekkan di blog ini,hasilnya css eksternal di tag end </body> membuat blog ini tidak rapi, sedangkan menempatkan javascript eksternal sebelum tag end </body> membuat blog ini semakin cepat dalam menampilkan isinya.

Sebenarnya ada solusi lain disamping menempatkan javascript eksternal sebelum tag </body>, yaitu dengan membuat javascript tersebut asynchron, keuntungannya adalah javascript eksternal bisa diletakkan sebelum sebelum tag </head> namun tidak membuat blog lama memunculkan isi, karena sistemnya javascript yang telah di-download, baru akan di-parsing setelah website termuat isinya.

Cara termudah untuk mengetahui kecepatan memuat halaman sebuah website yang akurat bukanlah menggunakan website speed checker online, melainkan menggunakan fitur mode jelajah pribadi yang ada di browser anda, mode jelajah pribadi tidak mempedulikan cache browser, hal ini akan membuat anda merasakan menjadi pengunjung pertama di website anda. Tentu lama memuat halaman website adalah anda sendiri yang menentukan.

Semoga bermanfaat.
Artikel terkait :
Cara Memasukkan Javascript Asynchronous Resources
cara mempercepat load website ala google pagespeed

Post link : http://www.blognafaro.com/2013/12/penempatan-javascript-yang-benar.html

Penempatan Javascript yang Benar Menurut Google PageSpeed

Penempatan Javascript yang Benar Menurut Google PageSpeed
Ringkasan : Punya hobi blog walking itu menyenangkan, namun berbeda rasanya jika ada blog yang lama loading hanya karena penempatan resource javascript yang salah, salah bukan menurut saya tapi menurut Google PageSpeed insight. .
Jumlah Kata : | Dipublikasikan pada Thursday, December 19, 2013

16 comments

susah dan rumit klo bagi saya untuk mempraktekkan, kan lagi blogger pemula yang susah dalam HTML, tapi post bermanfaat kok thanks..

tinggal pindahkan semua script src diatas tag end body heheh

berkunjung siang-siang gan Imam...:)
ditunggu kunjungan baliknya disini ya...n mnta tolong dklik juga adsense nya..masih newbie..:)

http://makalahuntukmu.blogspot.com

thank you gan.. menarik sekali infonya.. mampir ke blog ane juga gan. www.japanindocuteculture.com

makasih mas, izin coba ya...

mas, saya masih pemula dalam buat template. nah tau gk gimana cara membuat template nda ada pesan "Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas" di pagespeed insight milik google

untuk menghilangkan yang itu, mas letakkan css di bagian head, kalo javascript letakkan sebelum tag </body>, karena perenderan paruh atas tu termasuk pada bagian isi artikel dan komentar, jika ada javascript yang nempel di bagian artikel sampai komentar akan dianggap memblokir perenderan.

Mantap. Kunjung balik ke blog saya ya. salam kenal :D

Contohnya dalam gambar dong.
Pas saya lihat, blognafaro.com punya mobile speed 77/100 dan desktop speed 86/100
Luar biasa cepet ya.

Silahkan mampir ke blog saya http://van-d-teach.blogspot.com/

ini artikel bagus dan bbermanfaat sekali... kalau boleh saya beri saran kepada pemilik blog ini tolong di hilangi reload blog otomatisnya karena akan terasa tidak nyaman bagi pengunjung yang membaca artikel ini... maaf dan terimakasih semoga bisa membangun... www.cagkhie.com

Makasih untuk info nya gan, tapi itu untuk tulisan asynchron gimana maksudnya ya gan? saya kurang paham.

 
Top