Comment rendre WordPress lazy load JavaScript pour accélérer le rendu des pages ?

Outils de gestionChargement paresseux de JavaScript pour accélérer les méthodes de rendu des pages.

Qu'est-ce que la propriété Defer de JavaScript ?

Tout le monde a probablement rencontré cette situation :

Il y a N scripts dans la tête, et lorsque le script est chargé, il bloque le rendu de la page, qui est généralement vide.

Bien sûr, nous pouvons contourner ce problème en plaçant le script du code source dans le pied de page.

Cependant, certains environnements de développement complexes peuvent rendre cette tâche simple particulièrement compliquée.

À ce stade, nous pouvons utiliser la propriété Defer, qui est une propriété relativement rare en JavaScript.

Vous ne l'utiliserez peut-être jamais, mais après avoir lu cette introduction, je suis sûr que vous ne le quitterez plus.

Sa fonction principale est de laisser le script analyser après le chargement de la page entière, au lieu de l'analyser au chargement, ce qui fournit une vitesse de chargement complète de la page pour les scripts qui ne contiennent que du JavaScript déclenché par des événements.

Oui, si la balise de script a un attribut defer, elle sera exécutée après l'analyse de la page HTML même si elle est placée dans la tête, ce qui revient à placer le script en bas de la page.

Bien sûr, l'utilisation du délai est également limitée, faites généralement attention à 2 points :

1) N'appelez pas la commande document.write dans un bloc de script de type report différé ;

• Parce que document.write produira un effet de sortie direct.

2) N'utilisez pas de variables ou de fonctions globales dans les scripts Defer, y compris les scripts d'exécution immédiate.

Ajoutez l'attribut Defer au script utilisé dans WordPress

Dans WordPress, comment ajouter automatiquement l'attribut Defer aux scripts utilisés par WordPress ?

Nous pouvons ajouter le code suivant au fichier functions.php du thème actuel ▼

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

• Le code ci-dessus ne fonctionne que, selonCode JavaScript introduit par WordPresssera efficace.

注意 事项

La gestion de l'aperçu en direct peut s'afficher vide :

Si vous utilisez le code ci-dessus, lorsque vous ouvrez la gestion de l'aperçu en temps réel (Apparence → Personnaliser), il peut s'afficher en blanc, veuillez donc l'utiliser de manière appropriée.

Lorsque la gestion de l'aperçu en temps réel est requise, commentez le code ci-dessus et supprimez le code commenté une fois la personnalisation terminée.

Exemple de code de commentaire PHP :

/*

这里是代码 

*/