Cara Defer loading Javascript

Ketika datang untuk mengoptimalkan kecepatan halaman, sebagai aturan umum Anda harus bertujuan untuk menghapus semua Javascript halaman web Anda tidak secara eksplisit perlu memuat . Ketika Anda membutuhkannya untuk aspek tertentu yang dapat diganti dengan CSS (seperti efek visual), Anda harus mencoba mengganti efek atau fungsi yang dibantu Javascript dengan CSS.

Cara Defer loading Javascript

Tunda pemuatan javascript

Saat menunda pemuatan Javascript, pada dasarnya Anda memberi tahu browser untuk memuat Javascript setelah halaman web (DOM) selesai dimuat. Hal ini memungkinkan browser memuat bagian visual terpenting dari laman web Anda terlebih dahulu sehingga tampilan awal cepat dari konten paruh atas dapat ditampilkan, yang dapat ditentukan oleh jalur rendering penting Anda . Menunda skrip dengan cara ini membuat halaman dimuat lebih cepat tetapi tanpa rata-rata pengguna bahkan menyadari beberapa Javascript dimuat setelah DOM dimuat. Anda dapat melakukan hal yang sama dengan gambar , yang juga direkomendasikan.

Temukan Javascript yang tidak diperlukan untuk tampilan awal

Banyak Javascript, misalnya Javascript yang digunakan untuk fungsi interaktif pengguna atau visual, dapat dimuat setelah DOM dimuat dan masih menjalankan fungsinya. Anda sebenarnya tidak perlu memuat Javascript ini untuk memuat tampilan awal halaman. Namun, halaman web Anda dapat memuat beberapa Javascript yang sedang diperlukan untuk memuat tampilan konten awal halaman. Cari tahu Javascript mana yang tidak diperlukan halaman web Anda untuk tampilan paruh atas awal dan salin dan tempel semuanya dalam satu file Javascript (.js ).

File Javascript mana yang harus saya tunda memuat?

Anda harus menunda memuat semua file Javascript yang memblokir render. Untuk melihat file mana yang memblokir perenderan, Anda dapat menjalankan situs web Anda melalui uji kecepatan situs web giftofspeed.com.

Cara yang disarankan untuk menunda pemuatan Javascript

Cara termudah, dan paling direkomendasikan adalah menggunakan cuplikan skrip penangguhan HTML sederhana ini untuk memanggil file Javascript:

<script defer="defer" src="yourscript.js"></script>

Ganti yourscript.js dengan file .js yang Anda buat pada langkah sebelum ini dan tempatkan cuplikan di atas di footer HTML. Dengan menggunakan cuplikan di atas pada halaman web Anda, Anda memberi tahu browser untuk memuat file yourdeferscripts.js setelah halaman web Anda selesai dimuat.

Cara lain

Tambahkan kode kecil berikut ke bagian bawah halaman web Anda tepat di atas tag penutup </body> dan ganti yourscript.js dengan file Javascript Anda:

<script type="text/javascript">
function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "yourscript.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>

Uji Situs Web Anda

Pertama-tama kunjungi situs web Anda di browser untuk memastikan situs web Anda tidak terpengaruh secara negatif oleh penundaan pemuatan Javascript. Juga, ketika menunda pemuatan Javascript menyebabkan disfungsi atau kesalahan pada situs web Anda, tentu saja Anda harus segera membalikkan perubahan Anda. Jika semua terlihat dan berfungsi dengan baik, coba uji kinerja situs web untuk memeriksa apakah ada file JS di situs web Anda yang tidak dimuat dengan benar.

Jika Anda menemukan file Javascript apa pun yang terdaftar di bawah peringatan "Hapus atau ganti sumber yang memblokir render", itu berarti file ini tidak sedang ditangguhkan atau dimuat secara asinkron.

See Also :