Par cons\u00e9quent, une section de commentaires occup\u00e9e peut ajouter une charge importante au serveur Web, augmenter la taille globale de la page, augmenter le nombre de requ\u00eates HTTP requises et ajouter des ressources JavaScript suppl\u00e9mentaires auxquelles les navigateurs peuvent \u00eatre confront\u00e9s. Que vous utilisiez des commentaires WordPress natifs ou que vous ayez branch\u00e9 un syst\u00e8me de commentaires<\/a> tiers tel que Disqus ou Facebook Comments, les commentaires peuvent ralentir la vitesse de votre site Web, et vous devriez en faire une priorit\u00e9 pour optimiser la performance de la section commentaires de votre site. D’ailleurs, si vous avez des probl\u00e8mes avec le spam de commentaires, assurez-vous de lire notre guide d\u00e9taill\u00e9 sur le sujet Comment arr\u00eater le spam de commentaire WordPress<\/a>.<\/p>\n Si vous trouvez que la section commentaires ralentit la vitesse de chargement de vos articles de blog les plus populaires, il y a quelques choses que vous pouvez faire :<\/p>\n Examinons chaque strat\u00e9gie ind\u00e9pendamment afin que vous puissiez d\u00e9terminer quelle est la meilleure pour votre site.<\/p>\n Il y a deux choses que vous pouvez faire pour acc\u00e9l\u00e9rer les pages Web qui ont \u00e9t\u00e9 charg\u00e9es avec une montagne de commentaires WordPress natifs : limiter le nombre de commentaires qui se chargent initialement et utiliser des avatars h\u00e9berg\u00e9s localement. Examinons chaque option \u00e0 tour de r\u00f4le.<\/p>\n Par d\u00e9faut, WordPress est configur\u00e9 pour charger tous vos commentaires avec la page initiale. Cependant, charger des dizaines, voire des centaines de commentaires, chacun incluant un avatar unique, peut vraiment gonfler votre page et cr\u00e9er de nombreuses requ\u00eates HTTP suppl\u00e9mentaires.<\/p>\n Vous pouvez r\u00e9duire le nombre de commentaires charg\u00e9s au chargement initial de la page tr\u00e8s facilement.<\/p>\n Apr\u00e8s avoir suivi ces \u00e9tapes, le nombre de commentaires que vous avez sp\u00e9cifi\u00e9 s’affichera au chargement initial de la page.<\/p>\n WordPress a un support int\u00e9gr\u00e9 pour Gravatar<\/a>. Cela signifie que tout utilisateur ayant un compte Gravatar verra son image personnalis\u00e9e ajout\u00e9e en tant qu’avatar lorsqu’il commente sur un blog en utilisant le syst\u00e8me de commentaires WordPress natif. Cela ajoute un joli \u00e9l\u00e9ment personnalis\u00e9 \u00e0 la section commentaires, mais \u00e0 un co\u00fbt consid\u00e9rable. Lorsque les commentaires WordPress sont charg\u00e9s, chaque Gravatar unique n\u00e9cessite une requ\u00eate HTTP. Ainsi, si une page est charg\u00e9e avec les commentaires de 50 commentateurs diff\u00e9rents, 50 requ\u00eates HTTP seront n\u00e9cessaires pour t\u00e9l\u00e9charger tous ces Gravatars. Comme vous pouvez l’imaginer, cela peut avoir un impact consid\u00e9rable<\/a> sur la vitesse de la page.<\/p>\n Si vous d\u00e9cidez que les Gravatars ne valent pas les requ\u00eates HTTP ajout\u00e9es, vous avez deux options. Tout d’abord, vous pouvez d\u00e9sactiver compl\u00e8tement les avatars en allant dans Param\u00e8tres > Discussion<\/strong>, en trouvant la section Avatars, et en d\u00e9cochant la case Afficher les avatars<\/strong>.<\/p>\n Si vous ne voulez pas prendre une mesure aussi drastique, une autre option est de passer aux avatars h\u00e9berg\u00e9s localement. Pour ce faire, installez le plugin WP User Avatar<\/a>.\u00a0Une fois l’installation termin\u00e9e, allez dans Avatars > Param\u00e8tres<\/strong> et cochez la case D\u00e9sactiver Gravatar et utilisez uniquement les avatars locaux<\/strong>. Si vous n’aimez pas l’avatar par d\u00e9faut inclus avec WP User Avatar, il y a une image d’utilisateur propre dans ce tutoriel sur l’utilisation des avatars h\u00e9berg\u00e9s localement<\/a> que vous pouvez t\u00e9l\u00e9charger et utiliser comme avatar par d\u00e9faut.<\/p>\n Gardez \u00e0 l’esprit qu’apr\u00e8s ce changement, tous les commentaires seront affich\u00e9s avec l’avatar par d\u00e9faut, sauf si les utilisateurs s’enregistrent sur votre site et t\u00e9l\u00e9chargent un avatar personnalis\u00e9.<\/p>\n Votre derni\u00e8re option est de charger vos Gravatars sur votre propre CDN<\/a>. C’est l’approche que nous adoptons sur le blog de Kinsta. \ud83e\udd13<\/p>\n Il y a diverses raisons pour lesquelles vous pourriez \u00eatre int\u00e9ress\u00e9 \u00e0 passer sur un syst\u00e8me de commentaires tiers. D’abord, il y a la charge du serveur \u00e0 laquelle il faut penser. La cr\u00e9ation et le chargement des commentaires est un processus qui exige beaucoup de ressources. Si la section des commentaires de votre blog est tr\u00e8s occup\u00e9e, alors le transfert de ce travail \u00e0 un syst\u00e8me de commentaires d’un tiers enl\u00e8vera cette charge du serveur de votre site.<\/p>\n De plus, les syst\u00e8mes tiers offrent une meilleure exp\u00e9rience utilisateur<\/a> que le syst\u00e8me de commentaires WordPress natif. Ils peuvent \u00e9galement encourager plus de visiteurs \u00e0 commenter puisque les visiteurs qui ont d\u00e9j\u00e0 un compte avec le syst\u00e8me tiers peuvent commenter imm\u00e9diatement sans avoir \u00e0 s’inscrire ou \u00e0 fournir des d\u00e9tails sur votre site.<\/p>\n Dans certains cas, tous ces avantages se concr\u00e9tisent. Cependant, ce n’est pas universellement vrai.<\/p>\n Tout le monde n’aime pas les syst\u00e8mes de commentaires tiers<\/a> et d’autres s’inqui\u00e8tent des donn\u00e9es<\/a> recueillies en arri\u00e8re plan. De plus, l’id\u00e9e que les syst\u00e8mes de commentaires tiers sont plus rapides<\/a> que les commentaires WordPress natifs semble bonne en th\u00e9orie, mais les choses ne se passent g\u00e9n\u00e9ralement pas comme \u00e7a dans la r\u00e9alit\u00e9.<\/p>\n Si vous d\u00e9cidez d’utiliser un syst\u00e8me de commentaires d’un tiers, faites-le parce que vous aimez l’exp\u00e9rience d’utiliser ce syst\u00e8me particulier et parce que vous \u00eates convaincu que les visiteurs de votre site vont l’aimer autant que vous. Ne vous fiez pas aux commentaires d\u2019un tiers pour obtenir une am\u00e9lioration per\u00e7ue de l\u2019affichage qui pourrait \u00eatre plus th\u00e9orique que r\u00e9aliste. Si vous faites le saut vers un syst\u00e8me tiers, n’oubliez pas d’envisager la mise en \u0153uvre de la strat\u00e9gie suivante : le chargement en lazy load.<\/p>\n Que vous utilisiez des commentaires WordPress natifs ou un syst\u00e8me tiers, le chargement en lazy load des commentaires est une technique qui va presque certainement acc\u00e9l\u00e9rer le temps de chargement de votre page. Les syst\u00e8mes de commentaires qui sont charg\u00e9s en lazy load sont supprim\u00e9s du rendu de la page initiale et charg\u00e9s soit par JavaScript lorsque le visiteur atteint un certain point dans la page ou en cliquant sur un bouton qui dit quelque chose comme \u00ab\u00a0Voir les commentaires\u00a0\u00bb.<\/p>\n Si l’impl\u00e9mentation d’un chargement en lazy load semble un peu technique \u00e0 impl\u00e9menter, c’est parce que c’est le cas. Heureusement, vous n’avez pas \u00e0 le d\u00e9couvrir. Il y a des plugins que vous pouvez utiliser pour charger le syst\u00e8me de commentaires que vous avez choisi en lazy load.<\/p>\n La possibilit\u00e9 de charger en lazy load les commentaires n’est pas int\u00e9gr\u00e9e dans le noyau WordPress. Cependant, une grande solution l\u00e9g\u00e8re et gratuite que nous recommandons est le plugin Lazy Load for Comments<\/a>.<\/p>\n Le plugin est disponible dans le r\u00e9pertoire des plugins WordPress. Vous pouvez donc l’installer directement depuis la zone d’administration de WordPress. Ceci r\u00e9duira le nombre de requ\u00eates HTTP en chargeant en lazy load tous les gravatars WordPress. Il est tr\u00e8s simple \u00e0 configurer. Il suffit de l’installer et sous les param\u00e8tres de discussion, il y a deux options. Par d\u00e9faut, il est r\u00e9gl\u00e9 sur \u00ab\u00a0On Scroll\u00a0\u00bb, ce qui est probablement ce que la plupart des gens pr\u00e9f\u00e8rent. Vous pouvez aussi le r\u00e9gler sur \u00ab\u00a0On Click\u00a0\u00bb qui cr\u00e9era un bouton sur lequel les visiteurs pourront cliquer avant le chargement des commentaires.<\/p>\n Une autre option pour charger en lazy load les commentaires natifs est d’utiliser le plugin wpDiscuz.<\/a><\/p>\n Une autre option pour charger en lazy load les commentaires natifs est d’utiliser le plugin wpDiscuz<\/a>.<\/p>\n Maintenant, lorsque vous visitez une page avec plus de dix commentaires, seuls les dix premiers commentaires seront charg\u00e9s. Les commentaires suppl\u00e9mentaires se chargeront automatiquement d\u00e8s que vous atteindrez le bas de la section des commentaires.<\/p>\n Si vous utilisez Disqus, il est tr\u00e8s important que vous chargiez en lazy load les commentaires Disqus. Si vous ne le faites pas, Disqus peut \u00eatre un r\u00e9el obstacle \u00e0 la vitesse de chargement de votre site. Cependant, le chargement en lazyload des commentaires Disqus peut acc\u00e9l\u00e9rer votre site<\/a> par rapport aux commentaires WordPress natifs.<\/p>\n Disqus Conditional Load<\/a> est un plugin gratuit que vous pouvez utiliser pour charger disqus en lazy load sur votre site. Si vous n’avez jamais utilis\u00e9 Disqus auparavant, vous devrez d’abord ouvrir un compte et ajouter un nouveau site \u00e0 Disqus<\/a>. Une fois que vous avez configur\u00e9 votre site Disqus, installez Disqus Conditional Load en allant dans Extensions > Ajouter<\/strong>, en recherchant \u00ab\u00a0Disqus Conditional Load\u00a0\u00bb, et en s\u00e9lectionnant Installer maintenant<\/strong>.<\/p>\n Une fois l’installation termin\u00e9e, allez dans Commentaires > Disqus<\/strong> et s\u00e9lectionnez Mettre \u00e0 niveau<\/strong> pour configurer votre base de donn\u00e9es afin qu’elle fonctionne avec disqus. Sur l’\u00e9cran suivant, connectez-vous \u00e0 Disqus en utilisant votre nom d’utilisateur et votre mot de passe Disqus. Dans l’\u00e9cran suivant, s\u00e9lectionnez le site Disqus que vous avez ajout\u00e9 quelques minutes auparavant et cliquez sur le boutonSuivant<\/strong>. Apr\u00e8s avoir termin\u00e9 cette derni\u00e8re \u00e9tape, Disqus sera install\u00e9 sur votre site et configur\u00e9 pour se charger en lazy load lorsque les lecteurs acc\u00e8dent \u00e0 la section commentaires de votre blog.<\/p>\n Nous utilisons en fait ce plugin sur le blog de Kinsta et nous le recommandons fortement. En plus de charger en lazy load toutes les images (avatars), il vous permet \u00e9galement de d\u00e9sactiver le script de comptage si vous ne l’utilisez pas. Donc un appel JavaScript en moins sur votre site WordPress.<\/p>\n Le m\u00eame d\u00e9veloppeur du plugin Disqus Conditional Load mentionn\u00e9 ci-dessus a \u00e9galement cr\u00e9\u00e9 un plugin gratuit pour charger en lazy load les commentaires Facebook sur votre site WordPress. Les scripts de Facebook sont connus pour enliser un site Web, m\u00eame si les scripts sont charg\u00e9s de mani\u00e8re asynchrone.<\/p>\n\n
Strat\u00e9gies de correction des commentaires \u00e0 chargement lent<\/h2>\n
\n
Optimisation des commentaires WordPress natifs<\/h2>\n
Limiter le nombre de commentaires affich\u00e9s<\/h3>\n
\n
![\"Param\u00e8tres](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/08\/parametres-des-commentaires.png\" "\\"Comment")
Utiliser des avatars h\u00e9berg\u00e9s localement ou sur votre CDN<\/h3>\n
Utiliser un syst\u00e8me de commentaires tiers<\/h2>\n
Commentaires en Lazy load<\/h2>\n
Commentaires natifs de WordPress en Lazyload<\/h3>\n
![\"Plugin](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/08\/plugin-wordpress-lazy-load-for-comments.png\" "\\"Lazy")
<\/a>![\"Sur](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/08\/sur-defilement-ou-sur-clic.png\" "\\"On")
![\"wpdiscuz](\"https:\/\/kinsta.com\/wp-content\/uploads\/2016\/08\/wpdiscuz-wordpress-plugin.jpg\" "\\"wpDiscuz")
<\/a>\n
Lazy Load pour Disqus<\/h3>\n
![\"Plugin](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/08\/plugin-disqus-conditional-load.jpg\" "\\"Disqus")
<\/a>Lazy Load pour Facebook Comments<\/h3>\n
![\"Plugin](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/08\/plugin-lazy-load-facebook-comments.jpg\" "\\"Lazy")
<\/a>