...
Actualités WEB et WordPress, thèmes, plugins. Ici, nous partageons des conseils et les meilleures solutions de sites Web.

Comment différer Javascript avec WordPress pour des temps de chargement plus rapides

99

Vous souhaitez différer Javascript sur votre site ?

Si vous n’êtes pas un développeur vous-même, cela peut sembler une tâche insurmontable.

Différer Javascript n’est pas difficile si vous avez créé le site à partir de zéro, mais avec WordPress, vous avez probablement un thème et 6 à 10 plugins chargeant tous leurs propres fichiers Javascript.

Trouver les « crochets » dont vous avez besoin pour changer la façon dont chaque fichier JS est chargé prendrait une éternité !

Heureusement, il existe un moyen beaucoup plus simple.

Tout ce dont vous avez besoin est le bon outil.

Pourquoi devriez-vous différer les fichiers JS

Assurons-nous que nous sommes sur la même longueur d’onde.

Les navigateurs chargent normalement les fichiers Javascript avant d’essayer de rendre votre site. Cela signifie que les visiteurs ne pourront pas voir votre site tant que tous les fichiers Javascript (et CSS) ne seront pas complètement chargés.

Si vous différez un fichier Javascript, le document HTML peut se charger avant la fin du chargement du fichier Javascript. Le fichier JS peut se charger en même temps, mais il ne s’exécutera pas tant que le document HTML n’est pas complètement chargé.

En d’autres termes, si vous différez vos fichiers Javascript, le document HTML se chargera plus tôt ce qui signifie que votre site sera visible plus tôt. Cela permet à votre site d’apparaître plus rapidement pour les visiteurs, ce qui est finalement ce qui compte le plus.

Cela étant dit, passons à la méthode incroyablement simple disponible pour différer Javascript sur votre site.

Comment différer les fichiers Javascript

Plutôt que d’essayer de rechercher et de différer manuellement les scripts, vous pouvez utiliser un plugin pour le faire automatiquement pour vous.

Il y a deux méthodes différentes que je recommande.

Différer avec Async Javascript

Tout d’abord, il y a le plugin Javascript Async gratuit et facile à utiliser .

Comment différer Javascript avec WordPress pour des temps de chargement plus rapides

Simple et populaire, Async Javascript est un choix solide pour différer les scripts JS.

Lorsque vous installez ce plugin de performance, vous trouverez le nouveau menu de paramètres suivant ajouté à votre site :

Comment différer Javascript avec WordPress pour des temps de chargement plus rapides

Si vous souhaitez que les choses soient opérationnelles rapidement, vous pouvez asynchrone ou différer tous vos fichiers Javascript à la fois avec l’un de ces paramètres :

Comment différer Javascript avec WordPress pour des temps de chargement plus rapides

Vous pouvez appliquer la méthode de chargement différé à tous les fichiers, assurez-vous de vider votre cache, puis testez soigneusement votre site. Il est possible que certaines fonctionnalités de votre site ne fonctionnent pas, comme le menu mobile ou les barres de recherche interactives.

Si vous remarquez qu’une fonctionnalité de votre site ne fonctionne plus, passez à l’une des versions qui excluent jQuery et cela résoudra probablement tous les problèmes.

Sinon, vous pouvez ajouter manuellement des scripts à async ou à différer, ce qui vous permet de tester soigneusement un fichier à la fois.

Comment différer Javascript avec WordPress pour des temps de chargement plus rapides

La seule chose avec cette approche est que vous aurez besoin d’avoir des connaissances techniques afin de trouver les descripteurs de script nécessaires pour identifier les fichiers qui doivent être différés.

Dans l’ensemble, Async Javascript est un excellent plugin et il est gratuit !

Si vous voulez un plugin de performance tout aussi simple mais plus robuste, continuez à lire.

Comment différer JS avec WP Rocket

Le plugin que j’utilise sur competitionthemes.com et que je recommande pour la plupart des optimisations de performances est WP Rocket.

Comment différer Javascript avec WordPress pour des temps de chargement plus rapides

WP Rocket fournit une interface simple pleine de fonctionnalités d’optimisation des performances. Vous pouvez basculer un commutateur pour réduire et concaténer des fichiers, activer la mise en cache avancée, les images à chargement différé, etc.

Bien que ce plugin soit complexe sous le capot, le panneau de configuration ne nécessite aucune connaissance technique. Cela vaut également pour le report des fichiers Javascript.

Dans le tableau de bord WP Rocket, vous trouverez une section Optimisation des fichiers.

Comment différer Javascript avec WordPress pour des temps de chargement plus rapides

Il y a beaucoup d’excellents outils d’optimisation ici, et la fonction de report JS se trouve au bas de la page. Si vous activez le report, une deuxième case à cocher apparaîtra avec un paramètre "Mode sans échec" automatiquement activé également.

Comment différer Javascript avec WordPress pour des temps de chargement plus rapides

Comme je l’ai déjà mentionné, le report de jQuery entraîne très souvent des fonctionnalités cassées sur votre site. Bien que vous puissiez essayer de désactiver le mode sans échec, vous ne devriez probablement pas le faire.

Et c’est tout ce qu’il y a vraiment à faire! Cochez simplement une seule case et vos fichiers Javascript seront différés.

Si vous souhaitez explorer d’autres options de performances, vous pouvez visiter WP Rocket ici ou consulter notre didacticiel WP Rocket.

Javascript différé

Avec vos fichiers Javascript différés, le document HTML de votre site se chargera plus tôt et fera apparaître votre site beaucoup plus rapidement.

Pour la plupart des sites WordPress, il s’agit d’un gain de performances facile et significatif. Mieux encore, il ne nécessite aucune connaissance technique pour s’appliquer à votre site.

Si vous avez encore des questions sur la façon de différer Javascript avec WordPress, laissez un commentaire ci-dessous.

Source d’enregistrement: www.competethemes.com

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails