Cara Menunda Loading Jvascript

Bagaimana Cara menunda loading javascript?

Benar-benar menunda javascript berarti pemuatan atau parsing javascript itu hanya dimulai setelah isi halaman telah dimuat (Berarti itu tidak akan mempengaruhi PageSpeed ​​atau jalur render kritis).

1. Menggunakan "onload" event kita memanggil sebuah external javascript.
2. External javascript tidak akan loading sebelum konten sudah dimuat.
3. Kemudian External javascript akan berjalan dan mengisi halaman.

Penjelasan

Menunda javascript adalah salah satu masalah di web yang dapat membuat Anda sakit kepala yang mencoba menemukan solusinya.   


Banyak orang mengatakan "hanya menggunakan defer" atau "hanya menggunakan async" atau yang lain mengatakan "hanya menempatkan javascript di bawah halaman" namun tidak satupun dari mereka memecahkan masalah sebenarnya yang memungkinkan  halaman web sepenuhnya memuat dan kemudian (dan kemudian hanya) memuat javascript eksternal. Mereka juga akan membuat masa lalu bagi anda  dengan " defer  loading javascript". Peringatan yang anda dapatkan dari Google speedpage. Solusi ini akan.

Script untuk memanggil file javascript eksternal.  

Kode ini ditempatkan di html sebelum kode </body> untuk menyoroti file javascript eksternal. 
   

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Apa yang bekerja disini? 

Kode ini mengatakan tunggu dokumen selesai memuat kemudian  memuat file javascript "defer.js".

Intruksi sepesifiknya:

1. Copy kode diatas.

2. Paste code ke HTML Anda sebelum  </body> tag (dekat file HTML bagian bawah).

3. Ganti "defer.js" Dengan nama file javascript eksternal milik Anda.

4. Pastikan path ke file Anda dengan benar.
Contoh:
jika Anda hanya menempatkan "defer.js", maka file "defer.js" harus dalam folder yang sama dengan file HTML Anda.

Apa yang dapat Anda gunakan kode ini (dan apa yang tidak bisa) 

Kode ini tidak akan memuat file javascript eksternal secara spesifik hingga dikonten lengkap termuat. Oleh sebab itu, tidak harus menempatkan setiap javascript disana, yang diperlukan untuk memuat halaman dengan benar. Anda harus memisahkan javascript menjadi dua kelompok, satu kelompok js yang perlu memuat dan js yang melakukan hal-hal setelah beban halaman (seperti mencari peristiwa klik). Javascript yang bisa menunggu sampai setelah beban halaman harus masuk  ke dalam satu file eksternal call yang di atas. 
Sebagai contoh: Pada halaman ini file yang digunakan untuk menunda google analystic viglink, dan google manambah lencana tambahan di footer. Tidak ada alasan untuk memuat file-file ini untuk membuka halaman awal karena tidak satupun dari mereka yang di perlukan untuk memuat konten paruh atas. Anda mungkin memiliki jenis yang sama dari apa yang ada pada halaman web anda. Halaman anda itu bagaimana, dan Apakah anda membuat pengguna menunggu untuk memuat halaman web anda sebelum menunjukkan konten?    
. 

Mengapa metode lain tidak bisa bekerja?

Metode membuat inline, menempatkan secript dihalaman bawah, menggunakan "defer" atau menggunakan "async" semua tidak mencapai tujuan dengan membiarkan beban halaman pertama kemudian memuat JS dan mereka pasti tidak bekerja secara universal dari lintas browser.    

Ada apa dengan itu semua?

Itu penting karena Google menilai kecepatan halaman sebagai faktor peringkat dan  karena pengguna ingin halaman web loading cepat. Hal ini penting juga untuk seo mobile Anda. Google mengukur halaman sebuah web dari speedfrom pada saat itu disebut, ketika webpage awalnya dimuat. Berarti kita memprioritaskan untuk sebuah acara tentang kecepatan halaman web ketika diklik. Bahwa penilaian Google pada awal buka halaman anda (dan jangan lupa pengguna menunggu saat membuka awal webpage untuk memuat). Google secara aktif mempromosikan dan merekomendasikan juga memprioritaskan konten paruh atas sehingga mendapatkan sumber (js, css, gambar, dll) dari jalur render kritis yang diusahakan betul. Jika itu membuat bahagia, dan itu membuat google bahagia, mungkin harus melakukanya.   panduan optimasi seluler.          

Point Dari Kunci

Prioritas besar harus ditempatkan pada pemberian konten ke pengguna sesegera mungkin. Kami belum melakukan itu dengan cara kita memperlakukan javascript kami. Seorang pengguna tidak perlu menunggu untuk melihat konten mereka karena beberapa script yang cenderung melakukan sesuatu untuk di bawah konten berlipat-lipat. Tidak peduli seberapa dingin footer Anda, benar-benar ada alasan bagi pengguna yang mungkin tidak pernah meggulir ke bawah untuk footer Anda agar memuat javascript yang membuat footer Anda keren.

Anda bisa menggunakan javascript usage tool untuk mengetes sejauh mana javascript anda bekerja di halaman web.