Memindahkan Javascript Ke Footer

Terlalu banyak memasang Javascript di blog akan berdampak kepada kecepatan loading blog. Ketika diakses, peforma blog akan mengalami penurunan. Saya sempat bingung memilih template (theme) di WordPress, sebab rata-rata didalamnya terdapat banyak sekali Javascript dan jQuery.

Kalau kita aktifkan themenya dan tes kecepatan di PageSpeed Insight, nanti pasti mengalami Prioritize Visible Content.Itu terjadi dikarenakan pada saat blog diakses, konten blog tidak dimuat duluan. Yang dimuat duluan ialah Javascript dan jQuery.

Seharusnya, pada saat pengunjung mengunjungi blog kita yang tampil pertama yaitu isi konten. Google sangat memperhatikan hal ini loh. Lalu bagaimana solusi atas permasalahan tersebut? Ada 2 buah solusi sebenarnya.

Solusi pertama, menambahkan atribut Async pada semua script yang terdapat pada blog kita. Dan solusi kedua, yaitu memindahkan semua Javascript ke bagian Footer. Simak juga, Menghentikan Layanan CloudFlare Sementara

Dua solusi tersebut sama-sama ampuh dalam mengatasi Prioritize Visible Content. Mengapa kita harus memindahkan Javascript ke bagian footer? Begini ilustrasinya, sebuah blog memiliki 3 komponen dasar, yaitu Header, Body, dan Footer. Biasanya sebelum sebuah halaman muncul yang dimuat terlebih dahulu, yaitu bagian Header.

Setelah itu baru Body, dan terakhir baru Footer. Body berisi isi konten kita. Kalau javascript bertumpuk di Header, maka perlu waktu agar Header dapat tampil sempurna. Inilah yang bisa membuat tampilan blog kita kadang lama diakses, dan kontennya nggak tampil-tampil. Makanya, kita perlu memindahkan Javascript yang ada di Header ke Footer.

Bagaimana caranya? Caranya sangat mudah sekali, yaitu dengan menggunakan plugin Scripts To Footer. Dengan plugin ini kita dapat memindahkan Javascript yang terdapat di blog ke Footer dengan otomatis. Berikut caranya:

1. Pertama, instal plugin Scripts To Footer:
   
   
2. Setelah itu masuk ke bagian Pengaturan, pilih Scripts To Footer
3. Jangan centang apapun, cukup centang dibagian Keep jQuery in the Header:
   
   
4. Lalu kemudian klik Save Changes

Setelah itu coba tes kecepatan blog anda di GT Metrix dan PageSpeed Insight. Pasti akan menampilkan hasil yang berbeda dibanding sebelumnya. Lihat juga, Mengatasi Masalah Kebergunaan Seluler

Bagikan Ke