Comment différer l'analyse de JavaScript dans WordPress
Publié: 2022-12-02JavaScript est l'un des langages de programmation les plus populaires au monde. La plupart des sites Web l'utilisent pour créer des expériences plus dynamiques pour les visiteurs. Les fonctionnalités essentielles telles que les formulaires de contact et l'analyse de site ne sont que quelques-unes des façons dont JavaScript est mis en pratique au quotidien. Malheureusement, bien qu'il soit très utile, tout ce code a le potentiel de ralentir votre site.
Différer l'analyse de JavaScript (aussi simplement appelé « différer JavaScript ») signifie dire à votre site de charger votre code JavaScript non essentiel en dernier. Ce simple ajustement peut améliorer les temps de chargement de vos pages et les performances globales, en fonction du nombre de scripts utilisés par votre site Web.
Dans cet article, nous expliquerons exactement ce qu'est l'analyse syntaxique et ce qu'implique le report. Nous discuterons également de la façon dont le report de JavaScript peut être bénéfique pour votre site et vous montrerons comment le faire. Enfin, nous terminerons par quelques questions fréquemment posées (FAQ) pour répondre à tous les doutes restants.
Que signifie "différer l'analyse de JavaScript" ?
Lorsque vous visitez un site Web, votre navigateur demande des fichiers à un serveur. Ces fichiers contiennent du HTML, du CSS et du JavaScript que le navigateur doit analyser (interpréter) afin de créer une page Web visuelle et interactive.
Les sites Web exigent souvent que votre navigateur charge des dizaines (voire des centaines) d'éléments et de fichiers pour une seule page. Voici un exemple rapide d'une des pages de Google, afin que vous puissiez voir combien de fichiers il utilise :
Lorsque votre navigateur analyse les fichiers HTML, il s'arrête pour rendre tout CSS qu'il trouve et pour exécuter le code JavaScript. Tant que le navigateur n'aura pas fini d'exécuter ce code, il ne continuera pas à charger le reste de la page.
En pratique, vous ne remarquerez peut-être pas ce délai si votre site est très bien optimisé (s'il se charge très rapidement). Mais le délai est là, et plus votre site utilise de JavaScript, plus il peut être long. Si votre site Web n'est pas optimisé pour les performances, l'analyse de JavaScript peut considérablement ralentir ses temps de chargement.
Différer l'analyse de JavaScript signifie dire à votre navigateur : "Hé, si vous rencontrez ce code JavaScript, ne l'analysez pas tant que vous n'avez pas terminé avec le reste de la page." Du point de vue du visiteur, cela signifie que les éléments visibles de la page se chargeront plus rapidement. Ensuite, le JavaScript finira de s'exécuter en arrière-plan, et personne n'en sera plus avisé (sauf vous et le navigateur).
Quels sont les avantages de différer JavaScript ?
Le principal avantage du report de JavaScript est que les pages se chargeront plus rapidement pour les visiteurs. Les scripts devront toujours être chargés en arrière-plan, mais les différer devrait améliorer votre score LCP (Largest Contentful Paint), qui est l'une des trois mesures Core Web Vital.
Il est important de se rappeler que le temps de chargement des pages est l'un des aspects les plus importants d'une excellente expérience utilisateur. Si un site Web prend trop de temps à charger, vous perdrez généralement un pourcentage de visiteurs. De plus, des temps de chargement lents peuvent donner l'impression que quelque chose ne va pas avec votre site.
Comment différer l'analyse de JavaScript dans WordPress
WordPress offre plus d'une façon d'optimiser votre site Web. Lorsqu'il s'agit de différer JavaScript, vous pouvez utiliser deux méthodes.
La première méthode est la plus simple car elle consiste à utiliser un plugin.
1. Reportez l'analyse JavaScript avec un plugin gratuit
Si vous n'êtes pas à l'aise pour éditer les fichiers de votre site Web et y ajouter du code, le mieux est d'utiliser un plugin. L'un des meilleurs outils que vous pouvez utiliser pour différer le JavaScript non essentiel dans WordPress est Jetpack Boost.
Jetpack Boost est un plugin gratuit que vous pouvez utiliser pour optimiser les performances de votre site WordPress. Il est incroyablement simple à configurer, ce qui en fait un excellent choix pour les débutants.
Une fois que vous avez activé le plugin, vous devrez vous connecter à un compte WordPress.com (vous pouvez utiliser un compte gratuit pour cela).
Lorsque vous êtes prêt, accédez à Jetpack → Boost dans votre tableau de bord WordPress et vous obtiendrez un aperçu rapide de la performance de votre site Web en termes de performances.
Si vous regardez les options ci-dessous, vous verrez un paramètre qui indique Defer Non-Essential JavaScript . Vous pouvez basculer ce paramètre et il différera automatiquement l'analyse de JavaScript sur l'ensemble de votre site Web.
Le plug-in spécifie du JavaScript non essentiel car il n'affecte que les scripts qui ne sont pas critiques pour le site Web.
Une fois ce paramètre activé, assurez-vous de parcourir votre site Web pour vous assurer que tout fonctionne bien. Si vous remarquez quelque chose d'inattendu, désactivez simplement la fonction.
Notez que Jetpack Boost peut également activer le chargement différé et optimiser le CSS de votre site. Cela signifie que le plugin déplacera le CSS critique au début de chaque document HTML afin que le navigateur l'analyse en premier. Ce paramètre est particulièrement important pour améliorer votre score FID (First Input Delay).
2. Différer l'analyse de JavaScript à l'aide de functions.php dossier
La deuxième méthode consiste à éditer le fichier functions.php de votre thème. Le processus n'est pas trop compliqué, mais l'ajout de code à WordPress peut parfois entraîner des effets secondaires inattendus.
Cette méthode est destinée aux utilisateurs expérimentés, car beaucoup de choses peuvent arriver en supprimant un seul fichier ou même en ajoutant accidentellement un espace au mauvais endroit. N'oubliez pas que vous ne voudrez différer que le JavaScript non essentiel pour éviter de nuire à l'expérience utilisateur.
Pour plus de sécurité, nous vous recommandons de sauvegarder entièrement votre site Web avant de modifier des fichiers WordPress. Même si vous avez une sauvegarde récente, créez-en une autre afin d'avoir un point de restauration avant d'apporter des modifications. Si vous avez Jetpack VaultPress Backup, la version la plus récente de votre site sera déjà enregistrée pour vous.
Il existe deux façons de modifier le fichier functions.php . Vous pouvez utiliser l' éditeur de fichiers de thème WordPress, auquel vous pouvez accéder depuis le menu Apparence . Gardez à l'esprit que cette option n'est disponible que si vous n'utilisez pas un thème de bloc prenant en charge l'édition complète du site (FSE).
Une fois que vous accédez à l'éditeur, sélectionnez votre thème actif dans le menu déroulant à droite et recherchez le fichier functions.php dans la liste.
Vous pouvez utiliser l'éditeur pour ajouter ou supprimer du code de n'importe quel fichier de thème. Néanmoins, nous vous déconseillons de modifier tout code existant à moins que vous ne compreniez son objectif.
L'ajout de code à functions.php devrait être sûr tant qu'il provient d'une source fiable. L'extrait de code suivant configurera votre site Web pour différer l'analyse de JavaScript :
function defer_js( $url ) { if ( is_user_logged_in() ) return $url; 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_js', 11 );Ce code reportera automatiquement tout le JavaScript sur votre site, mais il ne touchera pas aux scripts jQuery. Cependant, cela ne fonctionnera pas si vous êtes connecté pour éviter les problèmes de chargement incorrect du tableau de bord.
Ajoutez ce script à la fin du fichier functions.php afin qu'il n'interfère avec aucun autre code à l'intérieur. Cliquez sur Mettre à jour le fichier en bas de la page, et c'est tout !
Si vous n'avez pas accès à l'éditeur de fichiers de thème WordPress mais que vous êtes à l'aise avec le code sur un serveur, vous pouvez modifier functions.php en vous connectant à votre site Web via le protocole de transfert de fichiers (FTP). Vous aurez besoin d'utiliser un client FTP comme FileZilla pour ce faire. Rappelez-vous, assurez-vous de faire une sauvegarde complète du site avant de faire quoi que ce soit.
Une fois connecté au serveur de votre site Web, vous devrez trouver le dossier racine de WordPress. Il s'agit du dossier qui contient tous les fichiers de votre site. Il est généralement nommé www, public_html ou le nom de votre site.
Ouvrez ce dossier et accédez à wp-content/themes . Il devrait y avoir plusieurs dossiers, un pour chaque thème installé sur votre site. Identifiez le dossier de votre thème actif et ouvrez-le. Le fichier functions.php devrait être juste à l'intérieur.
Faites un clic droit sur ce fichier et recherchez une option qui dit quelque chose comme Modifier (cela variera en fonction du client FTP que vous utilisez). Cette option ouvrira le fichier en utilisant votre éditeur de texte par défaut. À partir de là, vous pouvez ajouter l'extrait de code que nous avons partagé précédemment, puis enregistrer les modifications dans le fichier.
Les mêmes règles s'appliquent lors de l'édition de fichiers WordPress via FTP. Ne modifiez aucun code si vous n'êtes pas sûr de ce qu'il fait et méfiez-vous de l'ajout d'extraits de code à moins que vous ne fassiez confiance à leur source.
Vous pouvez toujours restaurer votre site WordPress à l'aide de la sauvegarde récente si vous rencontrez des erreurs après avoir modifié le fichier functions.php . Jetpack VaultPress Backup est une option fantastique dans ces cas car il offre une fonctionnalité de restauration en un clic même si votre site est complètement indisponible.
Foire aux questions sur le report de JavaScript
Si vous avez encore des questions sur le fonctionnement du report de JavaScript, cette section y répondra. Commençons par parler des effets secondaires potentiels du report des scripts.
Différer JavaScript peut-il casser votre site ?
Oui, selon les plugins et le thème que vous utilisez, il est possible que le report de JavaScript casse certains éléments de votre site. Et, si vous utilisez la méthode manuelle, une erreur dans votre code pourrait entraîner l'arrêt complet de votre site.
C'est pourquoi il est plus sûr d'utiliser un outil comme Jetpack Boost pour s'occuper de cette tâche. Bien qu'il soit toujours possible que le report de JavaScript cause un problème, vous pouvez facilement désactiver entièrement la fonctionnalité ou le plug-in.
Différer l'analyse de JavaScript revient-il à "supprimer JavaScript qui bloque le rendu" ?
Si vous utilisez des services de mesure des performances de sites Web tels que PageSpeed Insights ou GTMetrix, vous remarquerez peut-être qu'ils recommandent également d'éliminer le JavaScript bloquant le rendu de votre site Web. En raison du langage, il peut être facile de confondre cette suggestion d'optimisation avec l'analyse différée de JavaScript.
JavaScript bloquant le rendu fait référence à tout code qui empêche votre site de s'afficher. Dans de nombreux cas, la meilleure solution consiste à éliminer ce code s'il ne remplit pas un objectif précis. S'il a une fonction, vous pouvez le différer à la place.
Déterminer quels scripts sont nécessaires et lesquels ne le sont pas dépendra de votre jugement. Mais des services comme GTMetrix peuvent vous aider à identifier le JavaScript inutilisé sur votre site Web.
Tous les scripts appartenant à cette catégorie doivent pouvoir être supprimés en toute sécurité. Pour les autres scripts, vous pouvez soit utiliser des plugins (comme Jetpack Boost) soit modifier manuellement le fichier functions.php pour les différer.
Puis-je supprimer JavaScript en toute sécurité au lieu de le différer ?
Cela dépend des scripts auxquels vous faites référence. Il n'est pas rare que les sites Web WordPress accumulent du code inutilisé au fur et à mesure de leur croissance. Cela se produit lorsque vous installez et désactivez des plugins, essayez des services tiers et arrêtez de les utiliser.
Laisser ce JavaScript « orphelin » sur votre site Web peut parfois créer un risque pour la sécurité. De plus, cela peut avoir un impact sur les performances de votre site Web car les navigateurs peuvent encore avoir besoin de l'analyser.
Si vous consultez la question précédente, nous vous montrons comment utiliser GTMetrix pour identifier JavaScript sur votre site Web que vous pouvez supprimer en toute sécurité.
Différer JavaScript améliore-t-il les performances de la page ?
Différer JavaScript devrait accélérer le chargement des pages de votre site Web. La rapidité dépendra du nombre de scripts que vous reportez et de la qualité de l'optimisation de votre site Web.
Si vous avez déjà un site Web rapide et que vous avez pris des mesures pour l'optimiser, comme la suppression des scripts inutilisés, le report de JavaScript peut ne pas avoir d'impact significatif. Pourtant, chaque élément d'optimisation compte en ce qui concerne les performances de la page.
Que puis-je faire d'autre pour améliorer la vitesse de chargement de mes pages ?
Il existe de nombreuses façons d'améliorer la vitesse de chargement des pages d'un site Web. Pour un impact maximal, voici les optimisations que nous suggérons de mettre en œuvre :
- Envisagez d'utiliser un fournisseur d'hébergement WordPress géré.
- Mettre en place un réseau de diffusion de contenu (CDN).
- Améliorez Core Web Vitals dans WordPress.
- Minifier le CSS.
- Activez le chargement paresseux dans WordPress.
L'optimisation des performances de votre site Web peut prendre un certain temps, mais les plugins WordPress comme Jetpack et Jetpack Boost rendent le processus beaucoup plus facile et plus rapide.
N'oubliez pas que tout effort que vous ferez pour améliorer la vitesse de chargement de vos pages sera plus que payant au fil du temps. Si vous parvenez à maintenir votre site Web en parfait état de fonctionnement, vos visiteurs auront une bien meilleure expérience.
Améliorez les performances de votre site Web dès aujourd'hui
Vous pouvez apporter de nombreuses modifications à votre site Web pour améliorer ses performances. Si vous utilisez plusieurs scripts et plugins tiers sur votre site, il y a probablement beaucoup de code JavaScript exécuté en arrière-plan. Ce code est important, mais il peut empêcher le reste de votre site Web de se charger aussi rapidement que possible.
Différer l'analyse de JavaScript dans WordPress est plus facile que vous ne le pensez et peut avoir un impact significatif sur les performances de votre site Web. Voici les façons dont vous pouvez différer l'analyse JavaScript :
- Utilisez un plugin comme Jetpack Boost.
- Reportez JavaScript à l'aide du fichier functions.php .
Jetpack propose plusieurs plugins pour améliorer les performances de votre site WordPress. Jetpack Boost n'est que l'un d'entre eux. Si vous utilisez le plugin Jetpack, vous avez également accès à un CDN gratuit qui peut considérablement améliorer les vitesses de chargement de votre site. Envisagez de commencer avec Jetpack dès aujourd'hui !