Cumu fà WordPress lazy load JavaScript per accelerà u rendering di a pagina?

WordPressLazy loading di JavaScript per accelerà i metudi di rendering di a pagina.

Chì ghjè a pruprietà Defer di JavaScript?

Tutti anu probabilmente scontru sta situazione:

Ci sò N scripts in a testa, è quandu i scripts sò caricati, a pagina di rendering hè bluccata, chì hè generalmente in biancu.

Di sicuru, pudemu ghjunghje à questu mettendu u script in u codice fonte in u footer.

Tuttavia, certi ambienti cumplessi di sviluppu ponu rende stu compitu simplice particularmente cumplessu.

À questu puntu pudemu usà a pruprietà Defer, chì hè una pruprietà relativamente rara in JavaScript.

Ùn pudete mai aduprà, ma dopu avè lettu sta introduzione, sò sicuru chì ùn lascià micca.

A so funzione principale hè di lascià u script parse dopu chì a pagina intera hè caricata, invece di analizà nantu à a carica, chì furnisce a velocità di carica di a pagina completa per i scripts chì cuntenenu solu JavaScript attivatu da l'avvenimentu.

Iè, se u tag di script hà un attributu differisce, serà eseguitu dopu l'analisi di a pagina HTML ancu s'ellu si trova in u capu, chì hè simile à mette u script à u fondu di a pagina.

Di sicuru, l'usu di ritardu hè ancu limitatu, di solitu fate attenzione à 2 punti:

1) Ùn chjamate micca u cumandamentu document.write in un bloccu di scrittura di tipu differita;

• Perchè document.write pruducerà effettu di output direttu.

2) Ùn aduprate micca variàbili globali o funzioni in Defer scripts, cumpresi qualsiasi script di esecuzione immediata.

Aghjunghjite l'attributu Defer à u script utilizatu in WordPress

In WordPress, cumu pudemu aghjunghje automaticamente l'attributu Defer à i scripts utilizati da WordPress?

Pudemu aghjunghje u seguente codice à u schedariu functions.php di u tema attuale ▼

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

• U codice sopra solu travaglia, seconducodice JavaScript introduttu da WordPressserà efficace.

Precauzioni

Live Preview Management pò esse viotu:

Sè vo aduprate u codice sopra, quandu avete apertu a gestione di vista previa in tempu reale (Apparizione → Personalizà), pò esse viotu, cusì per piacè aduprate cum'è degne.

Quandu a gestione di vista previa in tempu reale hè necessaria, cummentate u codice sopra, è sguassate u codice cummentatu dopu chì a persunalizazione hè finita.

Esempiu di codice di cumentu PHP:

/*

这里是代码 

*/