Bagaimana cara membuat WordPress lazy load JavaScript untuk mempercepat rendering halaman?

WordPressPemuatan JavaScript yang lambat untuk mempercepat metode rendering halaman.

Apa itu properti Defer JavaScript?

Setiap orang mungkin pernah mengalami situasi ini:

Ada N skrip di kepala, dan ketika skrip dimuat, rendering halaman diblokir, yang biasanya kosong.

Tentu saja, kita bisa menyiasatinya dengan meletakkan skrip di kode sumber di footer.

Namun, beberapa lingkungan pengembangan yang kompleks dapat membuat tugas sederhana ini menjadi sangat kompleks.

Pada titik ini kita dapat menggunakan properti Defer, yang merupakan properti yang relatif langka di JavaScript.

Anda mungkin tidak pernah menggunakannya, tetapi setelah membaca pengantar ini, saya yakin Anda tidak akan meninggalkannya.

Fungsi utamanya adalah membiarkan skrip diurai setelah seluruh halaman dimuat, alih-alih menguraikannya saat dimuat, yang memberikan kecepatan pemuatan halaman penuh untuk skrip yang hanya berisi JavaScript yang dipicu peristiwa.

Ya, jika tag skrip memiliki atribut defer, itu akan dieksekusi setelah mem-parsing halaman HTML meskipun ditempatkan di kepala, yang mirip dengan meletakkan skrip di bagian bawah halaman.

Tentu saja, penggunaan delay juga terbatas, biasanya memperhatikan 2 poin:

1) Jangan panggil perintah document.write dalam blok skrip tipe penangguhan yang ditangguhkan;

• Karena document.write akan menghasilkan efek output langsung.

2) Jangan gunakan variabel atau fungsi global dalam skrip Tunda, termasuk skrip eksekusi langsung apa pun.

Tambahkan atribut Defer ke skrip yang digunakan di WordPress

Di WordPress, bagaimana kita bisa menambahkan atribut Defer secara otomatis ke skrip yang digunakan oleh WordPress?

Kita dapat menambahkan kode berikut ke file functions.php tema saat ini

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• Kode di atas hanya berfungsi, menurutKode JavaScript diperkenalkan oleh WordPressakan efektif.

注意 事项

Manajemen Pratinjau Langsung mungkin menampilkan kosong:

Jika Anda menggunakan kode di atas, saat Anda membuka manajemen pratinjau waktu-nyata (Tampilan → Kustomisasi), itu mungkin ditampilkan kosong, jadi silakan gunakan sebagaimana mestinya.

Ketika manajemen pratinjau waktu nyata diperlukan, komentari kode di atas, dan hapus kode yang dikomentari setelah penyesuaian selesai.

Contoh kode komentar PHP:

/*

这里是代码 

*/