MasGugu -- Sangat penting bagi para blogger untuk mengetahui cara meletakkan/ penempatan javascript yang benar menurut Google PageSpeed Insight untuk mempercepat kinerja blog anda. Meletakkan javascript yang kurang tepat pada blog bisa menyebabkan loading blog anda menjadi lama/ lambat. Mengapa harus Google PageSpeed Insight yang menjadi patokan dalam hal ini?
Sebelum melangkah jauh, ada baiknya anda pahami dulu apa itu Google PageSpeed Insight. Pengertian Google PageSpeed Insight adalah sebuah tools developers dari Google untuk mengetahui kinerja blog (cepat atau lambat) dan menampilkan masalah-masalah yang harus diperbaiki pada blog anda. Dengan tools ini, anda bisa mengetahui script apa saja yang membuat blog anda menjadi berat sehingga memerlukan proses loading yang lama.
Berdasarkan pada hasil uji Google PageSpeed insight, biasanya kebanyakan yang sering ditemukan adalah Error yang muncul pemberitahuan seperti ini "Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas". Maksudnya, Javascript dan CSS tersebut adalah konten eksternal seperti jQuery dan plugin. Apa itu konten paruh atas? Konten paruh atas menurut Google adalah semua konten yang ada di dalam daerah antara Header sampai Footer.
Cara yang kurang tepat meletakkan javascript akan semakin memperburuk blog anda karena website/ blog anda akan lama dimuat (proses loading lambat). 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 HTML telah selesai dimuat.
Kesalahan ini tidak sepenuhnya kesalahan dari sang 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.
Berdasarkan penelusuran website professional seperti Google dan Yahoo, 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, terdapat sebuah kesamaan yaitu css eksternal dan javascript eksternal diletakkan sebelum tag end </body>, kemudian setelah dipraktekkan di blog, hasilnya css eksternal di tag end </body> membuat blog menjadi tidak rapi, sedangkan menempatkan javascript eksternal sebelum tag end </body> membuat blog justru menjadi semakin cepat dalam menampilkan isi kontennya.
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 kontennya, karena sistemnya javascript yang telah di-und0h terlebih dulu, baru akan di-parsing setelah website termuat isi kontennya.
Bagaimana cara mengetahui kecepatan loading blog anda? Cara termudah untuk mengetahui kecepatan memuat halaman sebuah website/ blog yang akurat adalah 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. Hal ini akan membuat anda lebih mempertimbangkan (kecepatan atau keindahan website/ blog anda). Kini anda sendiri yang menentukannya.
Sebuah website terkemuka dalam menguji kecepatan blog (Gtmetrix.com) menyatakan bahwa, “Jika sebuah halaman tidak tampil isinya dalam waktu kurang dari 4 detik maka kemungkinan besar pengunjung akan menutup halaman dan mencari referensi lain”. Tentunya hal ini akan mempengaruhi jumlah pengunjung pada website/ blog anda. Oleh karena itu dibuatlah sebuah Javascript Asynchronous Resources agar javascript dijalankan secara paralel dengan halaman website/ blog anda. Async tag adalah sebuah tag baru di HTML 5, secara sederhana penggunaannya sebagai berikut:
<script src="script.js" type="text/javascript" async></script> Atau
<script src="script.js" type="text/javascript" async="async"></script>
Namun, karena tag tersebut baru di HTML 5, beberapa browser lama tidak mendukung, maka Google PageSpeed Insight menyarankan untuk menggunakan script dom element, penggunaannya sebagai berikut:
Silahkan anda ganti tulisan warna merah dengan url javascript anda, kemudian script tersebut sebaiknya diletakkan sebelum tag end head </head> atau tag end body </body>. CATATAN: Asynchronous tag maupun script hanya untuk javascript eksternal saja.
Coba anda perhatikan screenshot di atas, sebelum dipasang script di atas, terlihat beberapa masalah yang muncul sehingga kecepatan blog terhalangi dan berubah warna menjadi kuning. Prinsipnya sama seperti lampu merah dijalanan, ketika berwarna kuning tentu jalannya harus pelan. Begitu juga sebuah blog, loadingnya akan lambat.
Setelah diletakkan script di atas, kemudian dicek lagi kecepatannya kini menjadi bertambah. Artinya script di atas sangat manjur untuk digunakan sehingga hasilnya sangat maksimal sekali. Tadinya berwarna kuning sekarang sudah menjadi hijau, boleh ngebut dong,,, cekidot...tapi tetap waspada ya, siapa tau ada yang nyebrang dijalan.
Cukup sampai disini dulu postingan tentang Cara Meletakkan JavaScript yang Benar Menurut Google PageSpeed Insight untuk mengoptimasi blog anda agar lebih optimal. Semoga Artikel ini bermanfaat, terimakasih…(Blognafaro)