Хуудасны дүрслэлийг хурдасгахын тулд WordPress-ийг JavaScript-г хэрхэн залхуу болгох вэ?

WordPressХуудсыг дүрслэх аргуудыг хурдасгахын тулд JavaScript-г залхуу ачаалж байна.

JavaScript-ийн хойшлуулах шинж чанар гэж юу вэ?

Хүн бүр ийм нөхцөл байдалтай тулгарсан байх:

Толгойд N скрипт байдаг бөгөөд скриптүүдийг ачаалах үед хуудасны дүрслэлийг хаадаг бөгөөд энэ нь ихэвчлэн хоосон байдаг.

Мэдээжийн хэрэг, бид эх кодын скриптийг хөл хэсэгт оруулснаар үүнийг даван туулж чадна.

Гэсэн хэдий ч зарим нарийн төвөгтэй хөгжүүлэлтийн орчин нь энэхүү энгийн ажлыг онцгой төвөгтэй болгож чаддаг.

Энэ үед бид JavaScript-д харьцангуй ховор байдаг Defer шинж чанарыг ашиглаж болно.

Та үүнийг хэзээ ч ашиглахгүй байж магадгүй, гэхдээ энэ танилцуулгыг уншсаны дараа та үүнийг орхихгүй гэдэгт би итгэлтэй байна.

Үүний гол үүрэг нь скриптийг ачаалах үед задлахын оронд хуудсыг бүхэлд нь ачаалсны дараа задлан шинжлэх боломжийг олгох явдал бөгөөд энэ нь зөвхөн үйл явдлаар өдөөгдсөн JavaScript агуулсан скриптүүдийн бүтэн хуудсыг ачаалах хурдыг өгдөг.

Тиймээ, хэрэв скриптийн шошго нь хойшлуулах шинж чанартай бол HTML хуудсыг толгойд нь байрлуулсан ч гэсэн задлан шинжилсний дараа хийгдэх бөгөөд энэ нь скриптийг хуудасны доод талд байрлуулахтай адил юм.

Мэдээжийн хэрэг, саатал ашиглах нь бас хязгаарлагдмал, ихэвчлэн 2 зүйлд анхаарлаа хандуулаарай.

1) Deferred defer төрлийн скрипт блок дотор document.write командыг дуудаж болохгүй;

• Учир нь document.write нь шууд гаралтын эффект үүсгэх болно.

2) Хойшлуулах скрипт, түүний дотор шууд гүйцэтгэх скриптүүдэд глобал хувьсагч эсвэл функцийг бүү ашиглаарай.

WordPress-д ашигласан скрипт дээр Defer шинж чанарыг нэмнэ үү

WordPress дээр бид WordPress-ийн ашигладаг скриптүүдэд Defer шинж чанарыг хэрхэн автоматаар нэмэх вэ?

Бид дараах кодыг одоогийн сэдвийн functions.php файлд нэмж болно ▼

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";
};

• Дээрх код нь зөвхөн дагуу ажилладагWordPress-ээс нэвтрүүлсэн JavaScript кодүр дүнтэй байх болно.

Урьдчилан сэргийлэх арга хэмжээ

Урьдчилан үзэх шууд удирдлагын удирдлага нь хоосон харагдах болно:

Хэрэв та дээрх кодыг ашиглавал бодит цагийн урьдчилан харах удирдлагыг (Гадаад байдал → Тохируулах) нээхэд энэ нь хоосон харагдах тул зохих ёсоор ашиглана уу.

Бодит цагийн урьдчилан харах менежмент шаардлагатай үед дээрх кодыг тайлбарлаж, тохируулж дууссаны дараа тайлбар хийсэн кодыг устгана уу.

PHP тайлбар кодын жишээ:

/*

这里是代码 

*/