6 façons faciles de réduire le temps d'exécution JavaScript dans WordPress

Rien ne frustre plus les visiteurs du site Web qu'une page de chargement lent. Il y a de nombreuses raisons à cela et l'un d'eux est un temps d'exécution JavaScript excessif.

Lorsque JavaScript prend trop de temps à traiter, il retarde tout, faisant des charges de page lentes, une mauvaise expérience utilisateur et même de blesser votre classement SEO.

Mais ne vous inquiétez pas. L'optimisation de JavaScript ne doit pas être compliquée.

Dans ce guide, nous vous guiderons à travers des moyens faciles et efficaces de réduire le temps d'exécution JavaScript dans WordPress.

Que vous soyez un débutant ou un utilisateur avancé WordPress, ces moyens faciles aideront à accélérer votre site, à améliorer les vitaux du Web de base et à augmenter vos performances de référencement.

Plongeons-nous!

Quel est le temps d'exécution JavaScript?

Le temps d'exécution JavaScript fait référence au temps nécessaire à un navigateur Web pour traiter et exécuter le code JavaScript sur une page Web.

Chaque fois qu'un utilisateur charge un site, le navigateur doit analyser, compiler et exécuter des scripts JavaScript. Si ces scripts sont trop complexes, non optimisés ou bloquant le rendu, ils peuvent ralentir les performances de la page, conduisant à des temps de chargement plus élevés et à une mauvaise expérience utilisateur.

Quel est l'impact du temps d'exécution JavaScript sur les performances?

Voici une ventilation de la façon dont le temps d'exécution JavaScript affecte les performances:

1. Bloquer le fil principal

Pensez à un tunnel étroit où une seule voiture peut passer à la fois. La circulation se déplace en douceur tant qu'aucun véhicule persiste trop longtemps à l'intérieur.

Les navigateurs fonctionnent de la même manière - ils comptent sur un seul thread principal pour gérer les tâches comme le chargement du contenu, le rendu des pages et le traitement des interactions utilisateur.

Lorsque JavaScript s'exécute, il est prioritaire sur ce fil. S'il faut trop de temps pour s'exécuter, c'est comme un camion bloquant dans le tunnel, en tenant toutes les autres voitures. Ce retard empêche le navigateur de gérer d'autres tâches, provoquant des charges de page lents et des interactions insensibles.

2. Rendu retardé

Lorsque vous visitez un site Web, vous vous attendez à ce que le contenu apparaisse rapidement à l'écran. Ce processus, connu sous le nom de «peindre» le contenu, assure une expérience utilisateur fluide.

Cependant, lorsque l'exécution de JavaScript prend trop de temps, il retarde ce rendu initial, laissant les utilisateurs à regarder un écran vide, ce qui provoque une mauvaise expérience utilisateur.

3. Premier retard d'entrée (FID)

Il suit le temps qu'il faut pour que le site Web réponde à la première interaction d'un utilisateur, comme cliquer sur un bouton. Un FID retardé se traduit par une expérience lente pour les utilisateurs, ce qui est frustrant.

L'augmentation du temps d'exécution JavaScript a un impact direct sur le premier retard d'entrée (FID). Lorsque JavaScript est surchargé, le site Web n'est pas en mesure de répondre immédiatement à la saisie des utilisateurs, ce qui l'a fait paraître sans réponse et à fournir une mauvaise expérience utilisateur.

4. Consommation de mémoire

Le code JavaScript, comme tout autre programme, nécessite une mémoire pour s'exécuter. Un code complexe ou mal optimisé peut manger une quantité importante de mémoire.

En conséquence, cela peut ralentir le navigateur et potentiellement provoquer des collisions, en particulier sur les appareils mobiles avec peu de mémoire.

5. Affecte négativement le référencement

Les moteurs de recherche comme Google utilisent la vitesse de la page lors du classement des résultats de recherche.

L'exécution lente JavaScript peut réduire les performances de la page et affecter le classement du site dans les résultats de recherche.

En bref, l'exécution de JavaScript retardée ralentit le rendu, augmente FID et peut même surcharger le navigateur. Tout cela s'ajoute à une terrible expérience utilisateur, ce qui pourrait amener les visiteurs à abandonner votre site Web.

Comment mesurer le temps d'exécution JavaScript?

Pour optimiser le temps d'exécution JavaScript, vous devez d'abord le mesurer avec précision. Heureusement, plusieurs outils et techniques sont disponibles pour surveiller les performances JavaScript et identifier les problèmes qui affectent la vitesse de votre site WordPress.

Mesurer le temps d'exécution JS avec des informations sur pages

Google PageSpeed ​​Insights est un outil gratuit de Google qui mesure la vitesse de la page Web et fournit des idées d'optimisation.

Voici comment l'utiliser pour mesurer le temps d'exécution JavaScript:

Visitez le site Web de Pagespeed Insights ou utilisez l'extension PageSpeed ​​Insights Chrome.

Ici, entrez l'URL du site Web que vous souhaitez analyser et cliquez sur le bouton «Analyser».

PageSpeed ​​Insights fournira un rapport contenant un certain nombre d'indicateurs de performance, y compris le temps d'exécution JavaScript.

Si vous obtenez un avertissement sur le temps d'exécution JavaScript réduit, suivez les suggestions.

Mesurer le temps d'exécution JS avec GTMetrix

GTMetrix est un autre outil commun pour mesurer les performances de la page Web, qui inclut le temps d'exécution JavaScript.

Accédez au site Web de GTmetrix, entrez l'URL de la page Web, puis cliquez sur l'option Test Now.

Après un certain temps, GTMetrix générera un rapport complet avec des mesures de performances, y compris le temps d'exécution JavaScript.

Vous pouvez utiliser ces informations de GTMetrix pour optimiser votre code JavaScript et améliorer les performances globales de la page Web.

Comment réduire le temps d'exécution JavaScript

Voici quelques moyens faciles de réduire le temps d'exécution JavaScript, de rendre votre site Web plus rapidement et d'améliorer l'expérience utilisateur.

1. Évitez le thème / plugins gonflé

L'une des raisons les plus courantes de l'exécution lente JavaScript dans WordPress est les thèmes gonflés et les plugins excessifs.

Bien que les thèmes et les plugins riches en fonctionnalités puissent sembler attrayants, ils ont souvent le prix des performances.

Chaque script, animation ou fonction supplémentaire ajoute au temps de chargement de votre site Web, conduisant à une exécution plus lente, à une utilisation plus élevée du processeur et à une mauvaise expérience utilisateur.

Pourquoi les thèmes et les plugins gonflés sont un problème?

• Exécution excessive de code: les thèmes lourds et les plugins mal codés nécessitent plus de ressources, augmentant le temps d'exécution JavaScript.
• Demandes HTTP supplémentaires: certains thèmes et plugins chargent des CSS, JavaScript et des polices supplémentaires, même si vous ne les utilisez pas.
• Charge accrue du serveur: trop de plugins actifs peuvent ralentir le temps de réponse de votre serveur, un impact sur le référencement et l'expérience utilisateur.

Comment choisir des alternatives légères?

• Utilisez des thèmes optimisés par les performances: respectez les thèmes minimaux rapides comme GeneratePress, Astra ou Kadence qui priorisent la vitesse.
• Audit vos plugins: examinez régulièrement les plugins et désactivez ceux qui ne sont plus nécessaires. Si un plugin a beaucoup de JavaScript, essayez d'utiliser une alternative légère.
• Utilisez uniquement ce dont vous avez besoin: Évitez d'installer plusieurs plugins pour des fonctions similaires. Au lieu de cela, optez pour des solutions tout-en-un qui minimisent la surcharge de script.
• Limitez les scripts externes: évitez d'utiliser des thèmes et des plugins qui contiennent des scripts, des polices ou des codes de suivi tiers inutiles.

En gardant votre configuration WordPress optimisée, vous rédurez le temps d'exécution JavaScript, accélérerez votre site WordPress et améliorerez à la fois le classement SEO et l'expérience utilisateur.

2. Retarder JS et supprimer JS inutilisé

Vous devez retarder les fichiers JS afin qu'ils ne puissent pas être chargés avant l'interaction de l'utilisateur. Cela signifie que le navigateur n'exécutera aucun script JS à moins que l'utilisateur ne clique sur un bouton ou ne défile pas dans le contenu d'une page.

La plupart des plugins d'optimisation comme FlyingPress, WP Rocket, Perfmatters, Flying Scripts, etc., le font. Cependant, chacun le fait différemment, alors lisez la documentation du plugin sur la façon d'ajouter des fichiers (par nom de fichier, mot-clé ou automatique, comme avec WP Rocket).

Par exemple, si vous utilisez le plugin WP Rocket, vous pouvez profiter de sa fonction d'exécution JavaScript de retard.

Accédez simplement à l'onglet Optimisation des fichiers et cochez l'option d'exécution JavaScript de retard . Le plugin retardera automatiquement le chargement des fichiers JS jusqu'à l'interaction de l'utilisateur.

Ou, si vous utilisez des perfmatters, accédez simplement aux paramètres du plugin perfmatters . Cliquez sur le menu JavaScript , puis basculez sur le retard JavaScript dans la section de retard .

De plus, vous devez supprimer tous les fichiers JS inutilisés. En d'autres termes, tous les scripts JS qui ne sont pas nécessaires ou n'apparaissent pas dans le contenu ci-dessus de la page ne doivent être chargés qu'après afficher la page.

Il permet au navigateur de ne rendre que le matériel nécessaire plutôt que d'être embourbé par des fichiers JS inutiles.

3. Déférer JS

Un autre moyen efficace de réduire le temps d'exécution JS consiste à retarder les fichiers JS.

En reportant JavaScript sur votre site Web WordPress, le navigateur ne le chargera que lorsque la page sera rendue.

Vous pouvez différer les fichiers JS manuellement et avec l'aide de plugins.

Si vous souhaitez utiliser l'attribut de différence manuellement, vous devez d'abord identifier les scripts JS pour différer avant d'ajouter l'attribut de différence.

Voici un exemple d'attribut de différence:

Si vous préférez utiliser un plugin, vous pouvez choisir parmi WP Rocket, Autoptimize, FlyingPress, Asset Cleanup, etc.

Par exemple, comme Delay JS, WP Rocket propose également la fonction différée JavaScript de charge.

Dans l'onglet Optimisation de fichiers , vous pouvez charger JavaScript différé et empêcher tout fichier JS spécifique d'être différé. En quelques clics seulement, vous serez en mesure d'implémenter une technique importante d'optimisation des performances Web!

4. Minify JS

L'un des moyens les plus faciles mais les plus efficaces de réduire le temps d'exécution de JavaScript dans WordPress est la minification.

Minification JavaScript signifie supprimer des caractères inutiles - tels que les espaces blancs, les ruptures de ligne et les commentaires - sans affecter sa fonctionnalité. Le résultat? Tailles de fichiers plus petites, téléchargements plus rapides et vitesse améliorée de la page.

Il existe plusieurs outils de minification JavaScript disponibles qui vous aideront à faire le travail.

Pour une approche sans tracas, utilisez un plugin comme Autoptimize, WP Rocket, Fast Velocity Minify, FlyingPress, etc.

Installez simplement votre plugin préféré, activez la minification JavaScript et laissez l'outil faire le travail.

5. Déchargez JavaScript sur des pages spécifiques

Tous les scripts ne doivent pas s'exécuter sur chaque page de votre site WordPress. Si c'est le cas, il peut augmenter le temps d'exécution, ralentir les performances et avoir un impact négatif sur l'expérience utilisateur.

Par exemple:

• Chargement de script de formulaire de contact sur chaque page, même quand il n'y a pas de formulaire.
• Script WooCommerce fonctionnant sur un article de blog qui n'en a pas besoin.
• Le script de curseur apparaît sur des pages de texte qui n'ont pas de curseurs.

Chaque script inutile augmente la charge de travail d'exécution JavaScript, ralentissant le rendu de la page.

L'une des solutions les plus simples à ce problème est de désactiver les scripts inutiles sur des pages où elles ne sont pas nécessaires.

Des plugins comme le nettoyage des actifs ou les perfmatters vous permettent de désactiver JavaScript par page, type de message ou catégorie sans modifier le code.

Ou, si vous êtes à l'aise avec le code, utilisez wp_dequeue_script () dans votre fichier functions.php pour empêcher les scripts inutiles de se charger.

function remove_unnecessary_js() { if (!is_page('contact')) { wp_dequeue_script('contact-form-script'); } } add_action('wp_enqueue_scripts', 'remove_unnecessary_js');

6. HOST Javascript tiers local localement

Les polices, les scripts d'analyse et les codes de suivi sont quelques-uns des fichiers JavaScript tiers qui sont souvent chargés à partir de sources externes. Bien que ces scripts fournissent des fonctionnalités utiles, elles peuvent considérablement augmenter le temps d'exécution JavaScript en raison des demandes externes retardées, de la latence du réseau et des temps de réponse du serveur.

En hébergeant localement les fichiers JavaScript tiers, vous pouvez améliorer les temps de chargement, réduire la dépendance aux serveurs externes et augmenter les performances globales du site.

Pour héberger localement JavaScript tiers, visitez le site du fournisseur tiers et téléchargez le fichier JavaScript dont vous avez besoin (par exemple, google Fonts, recaptcha ou scripts d'analyse).

Maintenant, utilisez FTP pour stocker le fichier dans votre répertoire / wp-content / uploads / ou / wp-includes / js / .

Ensuite, modifiez les fonctions de votre thème.PHP ou ENQUEUe le script dans wp_enqueue_script () pour pointer la version locale au lieu de l'URL externe.

function load_local_script() { wp_enqueue_script('local-js', get_template_directory_uri() . '/js/script-name.js', array(), null, true); } add_action('wp_enqueue_scripts', 'load_local_script');

Utilisez des plugins comme WP Rocket ou Autoptimize pour minimiser et mettre en cache les fichiers JavaScript hébergés localement pour une exécution plus rapide.

Commencez à réduire le temps d'exécution JS aujourd'hui

Un site WordPress lent peut frustrer les visiteurs et nuire à votre classement SEO. L'un des principaux coupables? Temps d'exécution JavaScript excessif. Lorsque JavaScript prend trop de temps à traiter, il bloque le thread principal, les retards de rendu, augmente le premier retard d'entrée (FID) et affecte négativement les performances.

Ce guide vous montrera des moyens faciles de réduire le temps d'exécution JavaScript dans WordPress, vous permettant d'améliorer la vitesse du site et l'expérience utilisateur. Les stratégies clés comprennent:

• Éviter les thèmes et les plugins gonflés pour éviter l'exécution de code inutile.
• Retarder et supprimer JavaScript inutile pour empêcher les scripts non essentiels de ralentir vos pages.
• Déférer l'exécution JavaScript pour permettre au navigateur de hiérarchiser d'abord le contenu critique.
• Miniition des fichiers JavaScript pour réduire la taille du fichier et accélérer l'exécution.
• Déchargement JavaScript inutilisé à partir de pages spécifiques pour éliminer les scripts inutiles.
• Hôtez localement JavaScript tiers pour éliminer les retards causés par les demandes de serveur externes.

En mettant en œuvre ces techniques d'optimisation JavaScript, vous obtiendrez des vitaux Web de base améliorés, une vitesse de haute page et une expérience utilisateur transparente pour vos visiteurs.

Pour en savoir plus, consultez ces autres ressources utiles:

• 10 meilleurs plugins de cache WordPress (options gratuites et premium)
• Comment réparer facilement la mise en cache du navigateur à effet de levier dans WordPress
• WP Rocket Review: Cela vaut-il vraiment la peine de payer?
• Les perfmatters en valent-ils la peine? Revue approfondie
• Nitropack Review: meilleur outil de vitesse ou référencement du chapeau noir?

Enfin, suivez-nous sur Facebook et X (anciennement Twitter) pour rester à jour sur les derniers articles liés à WordPress et aux blogs.