Teknik Cara Mendefer Parsing Javascript 100% Ampuh

54
Cara Melakukan Defer Parsing Javascript 100% Ampuh
BAGIKAN

Citizen6.NetCara Melakukan Defer Parsing Javascript 100% Ampuh. Javascript merupakan salah satu elemen penting dalam suatu situs. Semua situs pasti memiliki kode Javascript didalamnya. Jika PHP menghandle dari sisi server (Server Side Scripting), maka Javascript akan menghandle dari sisi client (Client Side Scripting).

Salah satu “efek samping” penggunaan Javascript yang besar adalah turunnya kecepatan loading / rendering halaman. Ini menjadi sebuah masalah bagi seorang webmaster yang ingin agar situsnya ramah bagi pengunjung. Berdasarkan survei, pengunjung lebih memilih situs yang memiliki waktu pemuatan halaman yang sedikit karena jika halman terlalu berat, mereka akan lebih dahulu merasa bosan dan pergi.

Nah, jika kalian pernah melakukan tes Page Speed atau kecepatan loading situs kalian misal di Gtmetrix atau Google PageSpeed, kalian mungkin pernah melihat laporan yang menyarankan kalian untuk melakukan “Defer Parsing Javascript” seperti gambar di bawah ini.

Hasil tes Page Speed GTMetrix
Hasil tes Page Speed GTMetrix

Dari gambar diatas kita bisa melihat bahwa ada beberapa Javascript eksternal yang perlu didefer parsing. Dan jika kita melakukan defer parsing, maka page size akan berkurang 534 Kb!. Javascript ini yang memblokir perenderan situs kita sehingga membuatnya berat karena browser client harus memparsing Javascript terlebih dahulu sebelum menampilkan dokumen.

Baca Juga :
Belajar Struktur Artikel Yang SEO Friendly

Mungkin sudah banyak tutorial di internet yang membahas cara melakukan defer parsing javascript, tetapi rata-rata hanya menyuruh kita membuat Javascript eksternal menjadi Asyncronous. Dan tentu saja hasilnya tidak begitu signifikan.

Maka dari itu kami akan memberikan teknik defer parsing javascript yang telah kami uji dan terbukti ampuh. Berikut langkah-langkahnya

Langkah-langkah melakukan defer parsing javascript

1. Tes situs kalian di situs GTMetrix atau Google Pagespeed agar kita mengetahui javascript mana saja yang perlu didefer (contoh: gambar diatas)

2. Masuk ke situs https://varvy.com/tools/js/ untuk mengecek total Javascript di situs kalian.

3. Selanjutnya kalian harus bisa memilah diantara Javascript tersebut mana yang PENTING dan mana yang TIDAK TERLALU PENTING. Penting disini maksudnya adalah Javascript tersebut benar-benar dibutuhkan oleh template / fungsi lain untuk bekerja saat situs dimuat. Sedangkan “Tidak Terlalu Penting” maksudnya Javascript tersebut adalah untuk fungsi tambahan saja, misal Javascript eksternal Twitter Widget / Google Adsense.

4. Yang wajib kalian defer adalah Javascript yang masuk dalam kategori “Tidak Terlalu Penting” tadi

5. Jika normalnya javascript eksternal dipanggil melalui elemen

maka kali ini kita akan memanggilnya melalui metode lain. Kode ini dapat digunakan untuk mendefer lebih dari 1 javascript eksternal, jadi misalnya kalian memiliki 5 link javascript eksternal, kalian bisa memasukkan semuanya di script ini cukup tambahkan baris loadScript(“URL SCRIPT.js”); saja
Berikut kode lengkapnya.

Ubah URL SCRIPT.js dengan link javascript eksternal dari situs kalian misal javascript eksternal milik Google Adsense. Cara kerja script diatas adalah, melakukan pemanggilan javascript eksternal HANYA ketika halaman SELESAI DIMUAT. Jadi ketika halaman sedang dalam proses pemuatan, javascript eksternal tersebut tidak mengganggu (memblokir) perenderan situs yang menyebabkan situs berat.

Hasil Defer Parsing Javascript

Itu adalah teknik defer parsing Javascript eksternal, lalu bagaimana dengan Javascript internal (Inline Javascript) ?

Untuk melakukan defer parsing javascript internal atau yang bahasa kerennya Inline Javascript, kita bisa menggunakan attribut defer. Tapi attribut defer ini hanya support di browser tertentu saja.

cara penggunaannya seperti biasa

Nah demikian teknik cara melakukan defer parsing javascript yang 100% berhasil. Cara ini sudah kami terapkan disitus ini dan hasilnya adalah page speed situs ini mengalami peningkatan dan page size pun juga menurun signifikan.

6 KOMENTAR

    • Untuk wordpress bisa di bagian head bisa juga di body, yang terpenting yang didefer bukan javascript tema karena bisa mengacaukan tema saat dimuat

  1. Kalau di blogger, kenapa ya jquery kalau di defer menyebabkan masalah komentar menjadi rata/tidak work? Jadi selain didefer sama async apa ya solusinya? Trims sebelumnya.

    • halo gan, tidak semua javascript bisa di optimasi dengan teknik defer, diantara javascript yang ada pada suatu website ada yang memang digunakan oleh website untuk dapat bekerja dengan baik dan javascript yang masuk kategori ini sangat tidak disarankan untuk di defer karena berefek pada kinerja website 🙂

BAGAIMANA PENDAPATMU?