Demandez à votre site WordPress d’avoir un Outil de test de performance juste pour obtenir une instruction pour déplacer l’analyse JavaScript dans WordPress?

La mise en œuvre de ce changement peut avoir un impact positif sur les temps de chargement de votre site Web, en particulier pour les visiteurs mobiles. Cependant, l’avertissement peut être un peu difficile à comprendre. Nous allons donc expliquer exactement ce que signifie reporter l’analyse JavaScript et comment vous pouvez implémenter ce changement sur votre site Web WordPress.

Voici ce que vous apprendrez dans cet article:

Si vous souhaitez simplement accéder directement au didacticiel, vous pouvez cliquer sur le dernier lien de la liste ci-dessus.

Vous souhaitez jeter un œil à ceci Version vidéo?

Que signifie déplacer l’analyse JavaScript dans WordPress?

Si vous avez déjà parcouru votre site WordPress Google PageSpeed ​​Insights, GTmetrix ou d’autres outils de test de vitesse de page, vous avez probablement rencontré une suggestion pour différer l’analyse de JavaScript.

Mais qu’est-ce que cela veut vraiment dire? Et pourquoi est-ce un aspect important de la performance?

En gros, quand quelqu’un visite le vôtre Site WordPressLe serveur de votre site Web fournit le contenu HTML de votre site Web au navigateur de ce visiteur.

Le navigateur du visiteur se lancera alors en haut et parcourra le code pour rendre votre site. Si JavaScript se déplace de haut en bas, le reste de la page ne sera pas rendu tant que le fichier JavaScript ne pourra pas être récupéré et analysé.

Ceci est fait pour chaque script trouvé, ce qui peut avoir un impact négatif sur les temps de chargement de votre site Web car le visiteur doit regarder un écran vide pendant que son navigateur télécharge et analyse tout le JavaScript.

Si un script spécifique n’est pas requis pour les fonctionnalités de base de votre site (Au moins lorsque la page se charge pour la première fois), Vous ne voulez pas que cela empêche le chargement de parties plus importantes de votre site Web, c’est pourquoi Outils de test de vitesse de page Dites toujours de reporter l’analyse de JavaScript.

Alors, qu’est-ce que cela signifie de reporter l’analyse JavaScript?

Essentiellement, votre site Web indique aux navigateurs des visiteurs d’attendre pour télécharger et / ou analyser JavaScript. après ça Le contenu principal de votre site Web est déjà entièrement chargé. À ce stade, les visiteurs peuvent déjà voir et interagir avec votre page, de sorte que les temps d’attente pour le téléchargement et l’analyse de JavaScript ne sont plus aussi négatifs.

Par Accélérez les temps de chargement de votre contenuVous rendez Google heureux et créez une expérience meilleure et plus rapide pour vos visiteurs.

Voici comment savoir si vous devez reporter l’analyse de JavaScript

Pour tester si votre site WordPress doit différer l’analyse de JavaScript, vous pouvez boucler votre site GTmetrix.

GTmetrix vous donne une note et répertorie également certains scripts qui doivent être mis en attente:

Déplacer l'analyse des tests JavaScript vers GTmetrix

Déplacer l’analyse des tests JavaScript vers GTmetrix

Les différentes méthodes pour différer l’analyse de JavaScript

Il existe plusieurs façons de différer l’analyse de JavaScript. Il y a d’abord deux attributs que vous pouvez ajouter à vos scripts:

  1. Asynchrone
  2. Bouge toi

Avec les deux attributs, les navigateurs des visiteurs peuvent télécharger JavaScript sans arrêter l’analyse HTML. La différence, cependant, est que si asynchrone Au lieu de suspendre l’analyse HTML pour récupérer le script (comme le ferait le comportement par défaut), il met simplement en pause l’analyseur HTML pour exécuter le script dès qu’il est récupéré.

Avec bouge toiLes navigateurs des visiteurs continuent de télécharger les scripts pendant qu’ils analysent le code HTML. Cependant, vous attendez la fin de l’analyse HTML avant d’analyser le script.

Ce graphique de Growing with the Web fait un excellent travail pour expliquer la différence:

Graphique expliquant Async vs Defer

Graphique expliquant Async vs Defer

Une autre option recommandée par Patrick Sexton de Varvy utilise un script pour appeler un fichier JavaScript externe uniquement après le chargement de la page initiale. Cela signifie que les navigateurs des visiteurs ne téléchargeront ni n’exécuteront JavaScript tant que la page n’aura pas été chargée initialement.

Une autre approche que vous verrez est de simplement déplacer votre JavaScript vers le bas de la page. Cependant, cette méthode n’est pas une bonne solution car même si votre page est visible plus tôt, les navigateurs des visiteurs continueront à afficher la page comme chargée jusqu’à ce que tous les scripts soient terminés. Cela pourrait empêcher certains visiteurs d’interagir avec votre page car ils pensent que le contenu n’est pas entièrement chargé.

Comment déplacer l’analyse JavaScript dans WordPress (4 méthodes)

Pour déplacer l’analyse JavaScript dans WordPress, vous pouvez choisir trois itinéraires principaux:

  • Brancher – Il existe d’excellents plugins WordPress gratuits et premium pour supprimer l’analyse JavaScript. Nous allons vous montrer comment faire cela avec deux plugins populaires.
  • Méthode Varvy – Si vous êtes un expert en technologie, vous pouvez modifier le code de votre site directement en utilisant l’extrait de code de Varvy.
  • Fichier Functions.php – Vous pouvez ajouter un extrait de code au fichier functions.php de votre enfant pour déplacer automatiquement les scripts.

Vous pouvez cliquer ci-dessus pour passer directement à votre méthode préférée ou lire toutes les techniques pour trouver celle qui vous convient le mieux.

1. Plugin JavaScript Async gratuit

JavaScript asynchrone est un plugin WordPress gratuit créé par Frank Goossens, du même type que le populaire Optimiser le plugin automatiquement.

Il vous offre un moyen simple de différer l’analyse JavaScript de manière asynchrone ou différée.

Pour commencer, vous pouvez installer et activer le plugin gratuit depuis WordPress.org. Ensuite aller à Paramètres → JavaScript asynchrone pour configurer le plugin.

Ci-dessus, vous pouvez activer la fonctionnalité du plugin et choisir entre asynchrone et retardé. Remarquer:

  • Asynchrone télécharge du JavaScript pendant que le HTML est encore en cours d’analyse mais ensuite mis en pause l’analyse HTML pour exécuter le JavaScript.
  • Bouge toi Télécharge le JavaScript pendant que le HTML est encore en cours d’analyse et attend la fin de l’analyse HTML.
Utilisation du plugin Async JavaScript

Utilisation du plugin Async JavaScript

Ci-dessous, vous pouvez également choisir comment gérer jQuery. De nombreux thèmes et plugins dépendent fortement de jQuery. Donc, si vous essayez de reporter l’analyse des scripts jQuery, cela peut casser certaines des fonctionnalités de base de votre site. L’approche la plus sûre consiste à exclure jQuery, mais vous pouvez essayer de le déplacer. Assurez-vous simplement de tester votre site Web à fond.

Ci-dessous, vous pouvez également inclure ou exclure manuellement certains scripts, y compris une fonctionnalité utile et facile à utiliser qui vous permet de sélectionner des thèmes ou des plugins spécifiques qui sont actifs sur votre site:

Règles d'inclusion-exclusion JavaScript asynchrones

Règles d’inclusion-exclusion JavaScript asynchrones

2. Utilisez le plugin WP Rocket

Alors que nous ne permettons pas à la plupart d’entre eux Plugins de mise en cache chez Kinsta nous Autoriser le plugin WP Rocket car il a une intégration intégrée avec laquelle il est bon de jouer Mise en cache Kinstas au niveau du serveur.

En plus d’un certain nombre d’autres techniques de réglage des performances, WP Rocket peut vous aider à déplacer l’analyse JavaScript à travers le monde. Optimisation des fichiers Onglet du tableau de bord WP Rocket. rechercher Charger JavaScript retardé Option dans le Fichiers JavaScript Section.

Nous avons utilisé nos connaissances en matière de gestion efficace de sites Web à grande échelle et l’avons transformé en un livre électronique et un cours vidéo. Cliquez sur Ici pour télécharger le guide 2020 de la gestion de plus de 40 sites WordPress!

Comme le plugin Async JavaScript, WP Rocket vous permet également d’exclure jQuery pour éviter les problèmes avec le contenu de votre site Web:

Comment différer l'analyse de JavaScript à l'aide de WP Rocket

Comment différer l’analyse de JavaScript à l’aide de WP Rocket

3. Utilisez la méthode recommandée par Varvy (code)

Nous avons mentionné précédemment que Patrick Sexton de Varvy recommande d’utiliser un extrait de code en attente de téléchargement de JavaScript et de l’exécuter jusqu’à ce que votre site Web ait complètement chargé sa première page.

Vous pouvez implémenter cette méthode en modifiant l’extrait de code fourni par Varvy et en exécutant le script juste avant la fermeture -Ajoutez une balise à votre sujet.

Voici le code depuis Varvy::

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://kinsta.com/blog/defer-parsing-of-javascript/defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Assurez-vous de remplacer « defer.js » par le nom / chemin du fichier JavaScript que vous souhaitez déplacer. Ensuite, vous pouvez l’utiliser crochet wp_footer pour coller le code dans le fichier functions.php de votre enfant.

En utilisant cette approche, vous incluriez le code de Varvy quelque chose comme ceci:

/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

4. Déplacez JavaScript sur le fichier functions.php

Enfin, vous pouvez également ajouter l’attribut defer à vos fichiers JavaScript sans avoir besoin d’un plugin en ajoutant l’extrait de code suivant à votre fichier functions.php:

function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

Essentiellement, cet extrait de code indique à WordPress d’ajouter l’attribut defer à tous les fichiers JavaScript à l’exception de jQuery.

C’est rapide et facile, mais ne vous donne pas le contrôle granulaire que quelque chose comme le plugin Async JavaScript fait.

Recevez-vous le message * Analyse de Javascript Warning * move? Ne vous inquiétez pas … corrigez-le maintenant en utilisant ces 4 méthodes! 🚀⏳Cliquez ici pour tweeter

Résumé

Abandonner l’analyse de JavaScript sur votre site WordPress est une considération de performance importante.

Une fois que vous avez utilisé l’une des méthodes ci-dessus pour déplacer l’analyse JavaScript dans WordPress, nous vous recommandons de faire deux choses:

  1. Testez votre site Web pour vous assurer que si certains scripts sont reportés, la clé ne se trouve pas au-dessus du contenu du dossier. Encore une fois, cela peut souvent être le cas avec jQuery, c’est pourquoi vous pouvez utiliser de nombreux outils pour exclure jQuery.js. Cependant, cela peut également être le cas avec d’autres scripts.
  2. Relancez votre site via GTmetrix pour vous assurer que votre site diffère autant de scripts que possible (si vous excluez jQuery, vous risquez de ne pas obtenir un score parfait – votre score devrait cependant être meilleur).

Avez-vous des questions sur la façon de déplacer l’analyse JavaScript dans WordPress? Demandez dans les commentaires!


Si vous avez apprécié cet article, vous allez adorer la plateforme d’hébergement WordPress de Kinsta. Chargez votre site Web et bénéficiez de l’assistance 24/7 de notre équipe WordPress expérimentée. Notre infrastructure optimisée par Google Cloud est axée sur la mise à l’échelle automatique, les performances et la sécurité. Laissez la différence Kinsta vous montrer! Découvrez nos plans





Source link

Recent Posts