Différer l'analyse de JavaScript dans WordPress • WPShout

By | février 16, 2021

trouver un expert WordPress

C'est une plainte courante lorsque vous exécutez votre site WordPress via un outil de «score de vitesse de page»: «différer l'analyse de JavaScript» et / ou «supprimer le JavaScript bloquant le rendu». Aujourd'hui, en me basant sur un article que Fred a écrit pour la première fois en 2015, je vais discuter d'un problème pour résoudre ce problème. C'est possible depuis WordPress 4.1, qui a introduit un nouveau filtre, script_loader_tag. Ce filtre nous permet de modifier facilement le balisage HTML de mettre en file d'attentescénario éléments, c'est-à-dire des fichiers JavaScript correctement ajoutés à un site WordPress à l'aide de WordPress wp_enqueue_script fonction.

Avec script_loader_tag, nous pouvons maintenant facilement résoudre un problème qui peut avoir un impact significatif sur la vitesse de la page: beaucoup de JavaScript bloquant le rendu.

Le problème: JavaScript bloquant le rendu

Fichiers JavaScript longs dans votre diriger peut retarder l'affichage du contenu de la page par votre navigateur, car son comportement par défaut est d'abord d'interpréter les fichiers JS eux-mêmes.

JavaScript correctement mis en file d'attente apparaît dans le diriger section de votre document HTML. Sur Internet comme dans la nature, l'essentiel d'un diriger est qu'il est au-dessus d'un corps– et cela signifie quelque chose d'assez sérieux pour la vitesse du site, car JavaScript peut être blocage du rendu.

Le "blocage de rendu" provient du comportement par défaut d'un navigateur Web: il souhaite recevoir et traiter complètement tout ce qui se trouve plus haut dans la page, avant de descendre plus bas.

Cela signifie que de longs fichiers JavaScript dans votre diriger peut en fait retarder l'affichage du contenu de la page dans votre navigateur corps, car son comportement par défaut est d'abord d'interpréter les fichiers JS eux-mêmes. En d'autres termes, JS est blocage la fonction cruciale du navigateur le rendu la page que l'utilisateur peut voir. Le résultat peut être des sites lents et des utilisateurs frustrés.

Pagespeed Insights de Google a signalé ce problème depuis un certain temps:

blocking_js_before "width =" 1024 "height =" 741 "srcset =" http://wpshout.com/ "data-srcset =" https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_before -1024x741.png 1024w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_before-750x543.png 750w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wppload-combdmgdhm.kinstacdcont.com/wppload-combdmgdhm.kinstacdcont.com/wppload-spload /12/blocking_js_before-300x217.png 300w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_before-768x556.png 768w-mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_before-768x556.png 768w-, https://mk0wpshout.png 768w-dhm-dhm.htps /uploads/2015/12/blocking_js_before-30x22.png 30w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_before.png 1098w "tailles =" (largeur max: 1024px) 100vw , 1 024 pixels "/><noscript data-recalc-dims=blocking_js_before "width =" 1024 "height =" 741 "srcset =" https://i0.wp.com/mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_before-1024x741.png?fit=665%2C665&ssl=1 1024w, https: //mk0wpshout.combdhm. com / wp-content / uploads / 2015/12 / blocking_js_before-750x543.png 750w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_before-300x217.png 300w, https: // mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_before-768x556.png 768w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_before-768x556.png 768w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_avant- https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_before.png 1098w "tailles =" (largeur maximale: 1024px) 100vw, 1024px "/></noscript data-recalc-dims=

Cliquez pour agrandir

Cependant, avant 4.1 et script_loader_tag, la seule solution que je connaissais était de déplacer les scripts vers le pied de page du site. Déplacer les scripts vers le pied de page est difficile à faire à la main. Et les plugins que j'ai testés et qui prétendent le faire automatiquement n'ont pas fonctionné comme je l'espérais.

Passons directement à notre réussite:

L'objectif: beaucoup moins de JS bloquant le rendu

Voici ce que nous en sommes avec la solution que nous présenterons ci-dessous:

blocking_js_after "width =" 1024 "height =" 666 "srcset =" http://wpshout.com/ "data-srcset =" https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_after -1024x666.png 1024w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_after-750x488.png 750w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wupload/2015/content-content /12/blocking_js_after-300x195.png 300w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_after-768x499.png 768w-swpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_after-768x499.png 768w-wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_after-768x499.png 768w-d-kd-https://mk0wpshoutcombdmg.com /uploads/2015/12/blocking_js_after-30x20.png 30w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_after-240x155.png 240wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_after-240x155.png 240wpshoutcombdmgd, https://mk0wpshoutcombdacmg.com /wp-content/uploads/2015/12/blocking_js_after.png 1101w "tailles =" (largeur max: 1024px) 100vw, 1024px "/><noscript data-recalc-dims=blocking_js_after "width =" 1024 "height =" 666 "srcset =" https://i0.wp.com/mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_after-1024x666.png?fit=665%2C665&ssl=1 1024w, https://mk0wpshout.combdmgst.combdmg. com / wp-content / uploads / 2015/12 / blocking_js_after-750x488.png 750w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_after-300x195.png 300w, https: // mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_after-768x499.png 768w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/1220_blocking_ngs, 30/30/20_blocking https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/blocking_js_after-240x155.png 240w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploadings/2015/12_blocking_blocking_blocking_block. 1101w "tailles =" (largeur maximale: 1024px) 100vw, 1024px "/></noscript data-recalc-dims=

Cliquez pour agrandir

Désormais, nous n'avons que trois fichiers JavaScript susceptibles de ralentir le rendu d'une page. Les autres sont toujours là, mais ils se chargent en parallèle avec le contenu de la page, plutôt que avant que il.

Le correctif: différer et asynchroniser votre JavaScript

La première chose à comprendre est les alternatives au JS bloquant le rendu: reporter et asynchrone. Nous expliquerons la différence, mais les deux fonctionnent de la même manière: ils permettent au navigateur de charger une ressource JS "lorsque le temps le permet", tout en s'occupant également d'autres choses (comme le rendu des pages). Cela signifie que vous ne peut pas comptez sur la mise en place d'un fichier JavaScript différé ou asynchrone avant le rendu de la page, comme vous le pourriez sans ces attributs, mais l'avantage est que le fichier ne ralentira pas la vitesse à laquelle la page devient visible pour les utilisateurs.

Ce sont des concepts – maintenant pour le code. (Le code complet est disponible sur GitHub.)

1. Obtention de vos poignées de script

Chaque script WordPress correctement mis en file d'attente a un poignée: un «surnom» que le site sait appeler. Nous allons avoir besoin de ces poignées pour tous les scripts, et les obtenir n’est malheureusement pas si simple.

Il est cependant possible:

/ *
* Obtenir des balises de script
* Merci http://wordpress.stackexchange.com/questions/54064/how-do-i-get-the-handle-for-all-enqueued-scripts
* /

add_action ('wp_print_scripts', 'wsds_detect_enqueued_scripts');
function wsds_detect_enqueued_scripts () 
global $ wp_scripts;
foreach ($ wp_scripts-> queue comme $ handle):
echo $ handle. "http://wpshout.com/" ';
endforeach;

Ce code imprime une liste de descripteurs mis en file d'attente, séparés par | , directement dans le diriger de chaque page:

http://wpshout.com/ "width =" 576 "height =" 319 "srcset =" http://wpshout.com/ "data-srcset =" https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/ uploads / 2015/12 / list-of-handles.png 576w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/list-of-handles-300x166.png 300w, https: // mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/list-of-handles-30x17.png 30w "tailles =" (largeur maximale: 576px) 100vw, 576px "/></p data-recalc-dims=

Vous ne le ferez qu'une seule fois, puis utilisez "Afficher la source de la page" pour copier et coller les poignées elles-mêmes.

Une fois que vous avez fait cela, désactivez cette section du code: nous avons nos poignées, alors ne bloquons pas notre diriger avec eux plus. C’est pourquoi cette section est commentée dans le code sur GitHub. Je ne veux pas qu’elle s’exécute à chaque fois!

2. Différer et asynchroniser JavaScript bloquant le rendu

Nous avons constaté que nous devions utiliser reporter et pas asynchrone pour WPShout, je vais donc parcourir le reporter code. La plupart des gros travaux ici proviennent d'un article de Scott Nelle; merci, Scott!

add_filter ('script_loader_tag', 'wsds_defer_scripts', 10, 3);
function wsds_defer_scripts ($ tag, $ handle, $ src) 

// Les handles des scripts mis en file d'attente que nous voulons différer
$ defer_scripts = tableau (
'prismjs',
'admin-bar',
'et_monarch-ouibounce',
'et_monarch-custom-js',
'wpshout-js-cookie-demo',
'biscuit',
'wpshout-no-broken-image',
'au revoir-captcha-public-script',
'devicepx',
'search-box-value',
'page-min-height',
'kamn-js-widget-facile-twitter-feed-widget',
«__ytprefs__»,
«__ytprefsfitvids__»,
'jquery-migrate',
«icegram»,
'disqus',
);

    if (in_array ($ handle, $ defer_scripts)) 
        revenir '». " n";
    
    
    return $ tag;
 

Le add_filter La ligne nous indique que ce code doit s'exécuter à chaque fois qu'un fichier JavaScript mis en file d'attente est sur le point d'être imprimé sur la page en tant que HTML scénario élément. Nous laisser filtrer ce HTML est ce script_loader_tag est pour. (Si vous avez besoin d'une mise à jour sur les filtres et le système de hooks de WordPress en général, commencez ici!)

Le plus gros contrôle dans ce code est de faire une seule chose définissant le $ defer_scripts déployer. Ce tableau répertorie les poignées de tous les éléments que nous voulons différer – les poignées que nous avons trouvées à l'étape 1. (Vos poignées varieront, bien sûr!)

La logique sous la définition du tableau (commençant par if (in_array ( ) recherche l'attribut handle du script actuel dans le tableau que nous venons de définir. Si le handle correspond à un élément du tableau, alors nous modifions le script pour avoir la même source, mais avec une nouvelle propriété: defer = "reporter", ce qui empêchera le script de bloquer le rendu. Avec ce changement apporté, nous revenir le HTML de retour, et nous sommes prêts à partir!

(Et enfin, si la poignée n'est pas trouvée, nous renvoyons simplement la balise d'origine elle-même, inchangée.)

Vous saurez que ce plug-in fonctionne lorsque vous affichez la source de la page et voyez quelque chose comme ça dans le diriger:

deferred_scripts "width =" 1024 "height =" 465 "srcset =" http://wpshout.com/ "data-srcset =" https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/deferred_scripts -1024x465.png 1024w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/deferred_scripts-750x340.png 750w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wuppload-mgdhm.kinstacdn.com/wuppload/2015 /12/deferred_scripts-300x136.png 300w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/deferred_scripts-768x349.png 768w, https://mk0wpshoutcombdcdhm.com/kinstacdmgdhm.kinstac. /uploads/2015/12/deferred_scripts-30x14.png 30w, https://mk0wpshoutcombdmgdhm.kinstacdn.com/wp-content/uploads/2015/12/deferred_scripts.png 1271w "tailles =" (largeur max: 1024px) 100vw , 1 024 pixels "/></p data-recalc-dims=

Quand utiliser Async au lieu de Defer

Tu utilises asynchrone lorsque vous créez un lien direct vers un externe Bibliothèque JavaScript. Ce lien ressemblerait à quelque chose comme: . Remarquez qu'il s'agit d'un lien vers l'URL complète, et le JavaScript sera intégré

mettre en file d'attenteing externe JS est beaucoup moins courant, du moins pour nous, car la plupart de nos JS mis en file d'attente se trouvent dans des thèmes et des plugins qui hébergent leur propre code. Dans tous les cas, le code pour asynchrone est exactement le même que le code pour reporter– mais avec les deux mots échangés. Donc, si vous avez beaucoup de sites hébergés en externe mettre en file d'attented scripts, les obtenir asynchroneed est un processus technique très similaire à celui que nous venons de décrire.

Quels scripts différer et asynchroniser

Vous remarquerez que nous n’avons pas tout reporté – quelques scripts bloquent encore le rendu. Voici des règles générales à ce sujet:

  • Ne faites rien pour jQuery. jQuery (gérer jQuery) est une dépendance clé pour de nombreux autres fichiers JS, et vous voulez le laisser se charger tôt.
  • Tout fichier enveloppé dans un jQuery (document) .ready (fonction () ) l'appel devrait être bien de différer. Ce code dit essentiellement "Attendez que le modèle d'objet de document (DOM) entier se charge", donc courir pour que le fichier JavaScript soit chargé dans la tête ne sert pas à grand-chose.
  • En général, vous pouvez différer les fichiers JavaScript qui reposent sur les interactions de l'utilisateur, comme les clics et les survols de la souris, et les fichiers qui corrigent les détails de mise en page, comme centrer ou masquer un ensemble d'éléments. Encore une fois, ceux-ci dépendent d'une page chargée pour fonctionner de toute façon (c'est pourquoi ils vont presque tous être enveloppés dans jQuery (document) .ready (fonction () ), ou bien ils sont susceptibles de ne pas fonctionner), vous devez donc être sûr de sortir la page au préalable.
  • Il est malheureusement impossible d’utiliser cette méthode pour les fichiers JavaScript qui ont été ajoutés d’une manière autre que la méthode généralement correcte de mettre en file d'attenteles. C'est une autre raison de préférer cette méthode à d'autres méthodes de chargement de scripts qui peuvent sembler fonctionner correctement à première vue.

Vous voulez une solution plus simple? Différer l'analyse JavaScript dans WordPress avec un plugin

En raison de la fréquence à laquelle ce besoin de différer l'analyse JavaScript dans WordPress, vous pouvez trouver des plugins déjà écrits pour le faire. La méthodologie précise devient alors un peu moins importante pour vous. Si vous êtes une personne si pressée (naturellement), je vous soutiens.

Une note rapide pour les gens pressés: votre capacité à différer simplement l'analyse JavaScript avec une simple activation de plugin dépendra en grande partie de la nature de votre configuration WordPress. Si vous avez un site simple avec quelques plugins bien entretenus, je suppose que le simple fait de basculer sur un plugin comme Async JavaScript (du fabricant d'Autoptimize) fonctionnera probablement bien. Mais sachez que ces plugins peuvent provoquer la rupture d'un (basé sur JavaScript) d'une manière subtile que vous pourriez ne pas remarquer pendant un certain temps. Cela est également vrai lorsque vous écrivez et gérez le code dont nous avons discuté ci-dessus, mais vous ferez probablement un test plus approfondi lorsque vous aurez écrit votre code pour différer l'analyse JavaScript que lorsqu'il était aussi facile pour vous que d'activer un brancher.

Donc, dans les deux cas, soyez prudent. Les fabricants de ces plugins ont probablement fait de nombreux tests, mais comme les sites WordPress sont si divers et variés, je testerais pas mal avant de passer à l'un de ces plugins différant JavaScript. Voici les trois que j'ai trouvés dans mes recherches:

  • Le JavaScript Async (lien ci-dessus) est de loin le plus populaire, et par les personnes qui ont créé le célèbre plugin Autoptimize. (Nous exécutons Autoptimize ici sur WPShout)
  • Speed ​​Booster Pack – semble un peu plus complet que le plugin Async JavaScript, et un peu moins populaire
  • WP Deferred JavaScript – celui-ci semble pouvoir être abandonné, mais je l'inclus ici par souci d'exhaustivité

Résumer

À la base, nous avons couvert un moyen très cool et plutôt rapide d'améliorer la vitesse de votre site et la satisfaction des utilisateurs. Le report de l'analyse de JavaScript peut rendre votre site WordPress beaucoup plus rapide sans aucun impact notable sur l'expérience de lecture. J'espère que vous en savez maintenant assez pour différer et asynchroniser vos propres fichiers JavaScript, et merci de votre lecture! J'adorerais entendre les commentaires ou les questions ci-dessous.

Crédit image: Céline Nadeau

[ad_2]