{"id":237749,"date":"2022-04-07T12:27:00","date_gmt":"2022-04-07T09:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=237749"},"modified":"2022-05-16T10:57:28","modified_gmt":"2022-05-16T07:57:28","slug":"comment-differer-javascript-avec-wordpress-pour-des-temps-de-chargement-plus-rapides","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-differer-javascript-avec-wordpress-pour-des-temps-de-chargement-plus-rapides\/","title":{"rendered":"Comment diff\u00e9rer Javascript avec WordPress pour des temps de chargement plus rapides"},"content":{"rendered":"

Vous souhaitez diff\u00e9rer Javascript sur votre site ?<\/p>\n

Si vous n’\u00eates pas un d\u00e9veloppeur vous-m\u00eame, cela peut sembler une t\u00e2che insurmontable.<\/p>\n

Diff\u00e9rer Javascript n’est pas difficile si vous avez cr\u00e9\u00e9 le site \u00e0 partir de z\u00e9ro, mais avec WordPress, vous avez probablement un th\u00e8me et 6 \u00e0 10 plugins chargeant tous leurs propres fichiers Javascript.<\/p>\n

Trouver les \u00ab\u00a0crochets\u00a0\u00bb dont vous avez besoin pour changer la fa\u00e7on dont chaque fichier JS est charg\u00e9 prendrait une \u00e9ternit\u00e9\u00a0!<\/p>\n

Heureusement, il existe un moyen beaucoup plus simple.<\/p>\n

Tout ce dont vous avez besoin est le bon outil.<\/p>\n

Pourquoi devriez-vous diff\u00e9rer les fichiers JS<\/h2>\n

Assurons-nous que nous sommes sur la m\u00eame longueur d’onde.<\/p>\n

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\u00e8tement charg\u00e9s.<\/p>\n

Si vous diff\u00e9rez 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\u00eame temps, mais il ne s’ex\u00e9cutera pas tant que le document HTML n’est pas compl\u00e8tement charg\u00e9.<\/p>\n

En d’autres termes, si vous diff\u00e9rez vos fichiers Javascript, le document HTML se chargera plus t\u00f4t ce qui signifie que votre site sera visible plus t\u00f4t. Cela permet \u00e0 votre site d’appara\u00eetre plus rapidement pour les visiteurs, ce qui est finalement ce qui compte le plus.<\/p>\n

Cela \u00e9tant dit, passons \u00e0 la m\u00e9thode incroyablement simple disponible pour diff\u00e9rer Javascript sur votre site.<\/p>\n

Comment diff\u00e9rer les fichiers Javascript<\/h2>\n

Plut\u00f4t que d’essayer de rechercher et de diff\u00e9rer manuellement les scripts, vous pouvez utiliser un plugin pour le faire automatiquement pour vous.<\/p>\n

Il y a deux m\u00e9thodes diff\u00e9rentes que je recommande.<\/p>\n

Diff\u00e9rer avec Async Javascript<\/h3>\n

Tout d’abord, il y a le plugin Javascript Async<\/a> gratuit et facile \u00e0 utiliser .<\/p>\n

\"Comment<\/a><\/p>\n

Simple et populaire, Async Javascript est un choix solide pour diff\u00e9rer les scripts JS.<\/p>\n

Lorsque vous installez ce plugin de performance, vous trouverez le nouveau menu de param\u00e8tres suivant ajout\u00e9 \u00e0 votre site\u00a0:<\/p>\n

\"Comment<\/a><\/p>\n

Si vous souhaitez que les choses soient op\u00e9rationnelles rapidement, vous pouvez asynchrone ou diff\u00e9rer tous vos fichiers Javascript \u00e0 la fois avec l’un de ces param\u00e8tres\u00a0:<\/p>\n

\"Comment<\/a><\/p>\n

Vous pouvez appliquer la m\u00e9thode de chargement diff\u00e9r\u00e9 \u00e0 tous les fichiers, assurez-vous de vider votre cache, puis testez soigneusement votre site. Il est possible que certaines fonctionnalit\u00e9s de votre site ne fonctionnent pas, comme le menu mobile ou les barres de recherche interactives.<\/p>\n

Si vous remarquez qu’une fonctionnalit\u00e9 de votre site ne fonctionne plus, passez \u00e0 l’une des versions qui excluent jQuery et cela r\u00e9soudra probablement tous les probl\u00e8mes.<\/p>\n

Sinon, vous pouvez ajouter manuellement des scripts \u00e0 async ou \u00e0 diff\u00e9rer, ce qui vous permet de tester soigneusement un fichier \u00e0 la fois.<\/p>\n

\"Comment<\/a><\/p>\n

La seule chose avec cette approche est que vous aurez besoin d’avoir des connaissances techniques afin de trouver les descripteurs de script n\u00e9cessaires pour identifier les fichiers qui doivent \u00eatre diff\u00e9r\u00e9s.<\/p>\n

Dans l’ensemble, Async Javascript est un excellent plugin et il est gratuit !<\/p>\n

Si vous voulez un plugin de performance tout aussi simple mais plus robuste, continuez \u00e0 lire.<\/p>\n

Comment diff\u00e9rer JS avec WP Rocket<\/h3>\n

Le plugin que j’utilise sur competitionthemes.com et que je recommande pour la plupart des optimisations de performances est WP Rocket<\/a>.<\/p>\n

\"Comment<\/a><\/p>\n

WP Rocket fournit une interface simple pleine de fonctionnalit\u00e9s d’optimisation des performances. Vous pouvez basculer un commutateur pour r\u00e9duire et concat\u00e9ner des fichiers, activer la mise en cache avanc\u00e9e, les images \u00e0 chargement<\/a> diff\u00e9r\u00e9, etc.<\/p>\n

Bien que ce plugin soit complexe sous le capot, le panneau de configuration ne n\u00e9cessite aucune connaissance technique. Cela vaut \u00e9galement pour le report des fichiers Javascript.<\/p>\n

Dans le tableau de bord WP Rocket, vous trouverez une section Optimisation des fichiers.<\/p>\n

\"Comment<\/a><\/p>\n

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\u00e8me case \u00e0 cocher appara\u00eetra avec un param\u00e8tre "Mode sans \u00e9chec" automatiquement activ\u00e9 \u00e9galement.<\/p>\n

\"Comment<\/a><\/p>\n

Comme je l’ai d\u00e9j\u00e0 mentionn\u00e9, le report de jQuery entra\u00eene tr\u00e8s souvent des fonctionnalit\u00e9s cass\u00e9es sur votre site. Bien que vous puissiez essayer de d\u00e9sactiver le mode sans \u00e9chec, vous ne devriez probablement pas le faire.<\/p>\n

Et c’est tout ce qu’il y a vraiment \u00e0 faire! Cochez simplement une seule case et vos fichiers Javascript seront diff\u00e9r\u00e9s.<\/p>\n

Si vous souhaitez explorer d’autres options de performances, vous pouvez visiter WP Rocket ici<\/a> ou consulter notre didacticiel WP Rocket<\/a>.<\/p>\n

Javascript diff\u00e9r\u00e9<\/h2>\n

Avec vos fichiers Javascript diff\u00e9r\u00e9s, le document HTML de votre site se chargera plus t\u00f4t et fera appara\u00eetre votre site beaucoup plus rapidement.<\/p>\n

Pour la plupart des sites WordPress, il s’agit d’un gain de performances facile et significatif. Mieux encore, il ne n\u00e9cessite aucune connaissance technique pour s’appliquer \u00e0 votre site.<\/p>\n

Si vous avez encore des questions sur la fa\u00e7on de diff\u00e9rer Javascript avec WordPress, laissez un commentaire ci-dessous.<\/p>\n

Source d’enregistrement: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Trouvez deux m\u00e9thodes simples pour diff\u00e9rer Javascript sur votre site WordPress. Chaque page se chargera plus rapidement apr\u00e8s quelques minutes de configuration.<\/p>\n","protected":false},"author":1,"featured_media":257628,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[581],"tags":[844],"class_list":["post-237749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accelerer-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/237749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=237749"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/237749\/revisions"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=237749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=237749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=237749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}