Pengaruh letak javascript terhadap kecepatan loading halaman

Kecepatan loading blog yang diatas rata-rata jelas sangat berpengaruh terhadap pengalaman pengguna. Loading blog yang cepat akan mengurangi tingkat bounce rate secara signifikan, hal ini juga telah disinggung oleh Google sendiri melalui Blog Double Click Publisher bahwa loading blog lebih dari 3 detik memiliki persentase yang lebih besar untuk ditinggalkan pengunjung, yaitu sekitar 53% dari total seluruh pengunjung blog Anda.

Misalkan total pengunjung blog Anda yang seharusnya terhitung masuk berjumlah 1000 pengunjung, namun karena Blog Anda lambat dan lebih dari 3 detik baru bisa terbuka, maka sekitar 530 pengunjung berpotensi "batal masuk" alias tidak jadi masuk.

Artinya hanya 470 pengunjung saja yang terlayani dan bisa mengakses blog Anda. Jika ini yang terjadi, sudah jelas bahwa blog Anda akan mengalami pertumbuhan pengunjung lebih lambat dari yang seharusnya.

Jika Anda pernah membaca tips untuk meningkatkan kecepatan loading halaman di blog ini, cara no #6 ternyata memang terbukti dan bisa diaplikasikan.

Didalam artikel tersebut dijelaskan bahwa meningkatkan kecepatan loading blog bisa dilakukan dengan cara memindahkan javascript eksternal ke dalam halaman template blog. (Buat yang penasaran sama artikelnya Anda bisa membaca di sini : 9 Tips Jitu meningkatkan kecepatan loading blog).


Ya, peletakan javascript didalam halaman dan diluar halaman ternyata cukup berdampak terhadap kecepatan loading blog. Anda bisa mencoba dan melihatnya sendiri dengan melakukan pengetesan kecepatan loading blog menggunakan Pagespeed insight pada kedua halaman berikut ini, Test Sitemap page dan Test Sitemap page2

Awalnya kedua halaman tersebut tujuannya hanya dibuat untuk menjadi perbandingan saat memperbaiki halaman sitemap di blog, namun halaman tersebut ternyata juga bisa dijadikan perbandingan terkait pengaruh letak javascript pada kecepatan loading halaman.

Halaman Test Sitemap page menggunakan file Javascript yang diletakkan diluar template blog ini, yaitu pada situs https://cdn.rawgit.com (file javascript ini disimpannya di situs github), sedangkan untuk halaman Test Sitemap page2 ini file javascriptnya diletakkan langsung didalam halaman tersebut.

Hasil Perbandingan Kecepatan Loading Halaman

Untuk memperkecil ketidak akuratan pengetesan, saya menghapus terlebih dahulu widget iklan di sidebar tepat dibawah label, serta membatasi hanya pada halaman statis (elemen-elemen lain yang tidak diperlukan sengaja saya OFF-kan).

Dengan begitu diharapkan perbedaannya akan semakin jelas. Berikut adalah hasil uji coba melalui Pagespeed Insight diantara kedua halaman tersebut.


Pada halaman Test Sitemap page (javascript diluar - tabel sebelah kiri) memiliki kecepatan loading sebesar 74/100 untuk seluler dan desktop sebesar 89/100. Nilai ini jauh lebih kecil jika dibandingkan dengan halaman Test Sitemap page 2 (javascript didalam - tabel sebelah kanan), yaitu 89/100 untuk seluler dan 95/100 untuk desktop.

Dari kedua halaman tersebut, maka kita akan menemukan perbedaan nilai kecepatan loading halaman sebesar 15 untuk seluler dan 6 untuk desktop.

Sehigga bisa kita simpulkan bahwa halaman yang menggunakan file javascript didalam halaman tersebut memiliki nilai kecepatan yang lebih baik dibandingkan halaman yang file javascriptnya diletakkan di luar halaman.

Penyebab beda nilai kecepatan loading halaman

Jika dilihat dari ringkasan saran dan perbaikan yang harus dilakukan pada halaman hasil di pagespeed insight tersebut, alamat url tempat meletakkan javascript ikut tampil dan menjadi salah satu penyebab terjadinya pemblokiran saat merender halaman.

Pemblokiran ini tidak hanya terjadi pada versi selulernya saja, versi desktopnya pun ternyata juga mengalami hal yang sama. Perhatikan pada gambar yang saya ambil untuk versi selulernya saja seperti dibawah berikut ini (klik gambar untuk memperbesar).


Pada gambar diatas terlihat bahwa link https://cdn.rawgit.com (tempat menyimpan file javascript) menjadi salah satu pemblokir proses rendering halaman, hal ini otomatis berimbas pada waktu pemuatan halaman. Sedangkan pada halaman yang javascriptnya dipasang didalam halaman itu sendiri, hal ini tidaklah terjadi.


Kesimpulan

Dari hasil ringkasan dan saran perbaikan, file javascript yang diletakkan diluar halaman (pada alamat url lain) dianggap memblokir proses rendering halaman, sehingga menjadi penyebab turunnya nilai kecepatan loading halaman.

Jika selama ini Anda masih merasa kesulitan untuk menambah dan meningkatkan kecepatan loading halaman blog, maka saya sarankan untuk mencoba trik yang satu ini yaitu meletakkan Javascript kedalam template blog Anda. Namun dengan catatan bahwa kapasitas file javascript yang akan digunakan tidak terlalu besar dan tidak membebani file template secara keseluruhan.

Demikianlah artikel Pengaruh letak javascript terhadap kecepatan loading halaman ini bisa saya sampaikan, semoga bisa bermanfaat.

Catatan:
Pengetesan ini bersifat subyektif sehingga belum tentu berlaku benar untuk kondisi yang berbeda terkait cara test, waktu, serta alat test yang digunakan.