Votre hébergeur WordPress peut être très rapide, mais ce n’est pas toujours une baguette magique pour les extensions et les thèmes horriblement codés ou non optimisés. On voit ça tout le temps ici à Kinsta. Parfois, même une seul mauvaise extension ou morceau de code peut être le pire ennemi de votre site, et tout faire ralentir. C’est pourquoi nous surveillons constamment les sites de nos clients avec le suivi de New Relic et nous avons même une liste d’extensions interdites. Aujourd’hui, nous allons partager avec vous quelques extensions de performance WordPress pratiques et moins connues qui peuvent vous aider à dépanner et accélérer votre site.

8 plugins de performance WordPress en 2019

Cela peut sembler ironique de corriger une extension ou un script avec une autre extension. Ce n’est peut-être pas la meilleure façon de résoudre un problème. Mais pour ceux qui ne sont pas des développeurs WordPress, dans de nombreux cas, c’est peut-être ce à quoi vous devrez recourir. Il n’existe pas d’extension ou de développeur parfait, et donc parfois avoir quelques astuces dans votre manche pour les faire fonctionner mieux et plus rapidement peut s’avérer très utile. Beaucoup de ces extensions listées ci-dessous ne sont pas aussi populaires, certaines n’ayant que quelques milliers d’installations, mais elles méritent certainement une reconnaissance supplémentaire, avec leurs développeurs.

Parfois, les meilleures extensions sont celles de développeurs individuels qui ne font que résoudre un problème. Cliquez pour Tweet

Et n’oubliez pas que l’ajout d’extensions supplémentaires n’est pas nécessairement mauvais, à condition qu’elles soient légères et développées correctement. Nous avons vu de nombreux sites avec plus de 60 extensions qui se chargent facilement en moins d’une seconde. Il s’agit de choisir les bonnes et de les optimiser.

1. Query Monitor

La première extension WordPress de performance que nous recommandons de découvrir est Query Monitor, une extension gratuite de débogage et de développement. Vous pouvez l’utiliser pour identifier et déboguer les requêtes lentes des bases de données, les appels AJAX, les requêtes REST API, et bien plus encore. De plus, l’extension rapporte les détails du site tels que les dépendances de script, les hooks WordPress qui se déclenchent pendant la génération de pages, les détails de l’environnement d’hébergement, les balises de requête conditionnelles rencontrées par la page courante, et beaucoup plus.

Extension Query Monitor

Extension Query Monitor

L’extension a été développée par John Blackbourn, un committer du noyau WordPress qui est actuellement développeur chez Human Made et qui était auparavant employé par WordPress.com VIP. Au moment d’écrire ces lignes, il y a actuellement plus de 20 000 installations actives avec un classement 5 étoiles sur 5. Vous pouvez le télécharger à partir du référentiel WordPress ou en le recherchant dans votre tableau de bord WordPress sous Extension > Ajouter.

Vous pouvez l’utiliser pour toutes sortes de choses. Les développeurs vont adorer cette extension car vous pouvez affiner chaque requête qui se produit sur une page. Si vous êtes développeur, vous pouvez même voir si l’extension rend la requête la plus efficace possible. Et ce n’est pas seulement pour l’interface publique, vous pouvez aussi l’utiliser pour résoudre les problèmes de performance dans votre tableau de bord WordPress.

Requêtes

Requêtes

Voici un exemple de tableau de bord WordPress d’un site plus grand. On voit tout de suite que l’extension Pretty Link est la plus lourde.

Requêtes par composant

Requêtes par composant

Vous pouvez consulter notre tutoriel complet et détaillé sur la façon d’utiliser Query Monitor, ainsi que d’autres scénarios d’utilisation.

2. Complete Analytics Optimisation Suite (CAOS)

La deuxième extension que nous vous recommandons de consulter est Complete Analyitcs Optimization Suite, gratuite, créée et développée par Daan van den Bergh. Cette extension vous permet d’héberger Google Analytics localement sur votre site WordPress.

Extension Complete Analytics Optimization Suite

Extension Complete Analytics Optimization Suite

Il a actuellement plus de 10.000 installations actives avec une note de 5 étoiles sur 5. Vous pouvez télécharger Complete Analytics Optimization Suite à partir du référentiel WordPress ou en le recherchant sous Extensions > Ajouter dans votre tableau de bord WordPress. L’extension vous permet d’héberger votre fichier JavaScript Google Analytics (analytics.js) localement et de le mettre à jour en utilisant wp_cron(). D’autres fonctionnalités incluent la possibilité d’anonymiser facilement l’adresse IP de vos visiteurs, de définir un taux de rebond ajusté, et l’emplacement du script (en-tête ou pied de page).

Certains avantages de l’hébergement local de votre script d’analyse sont que vous réduisez vos requêtes HTTP externes vers Google de 2 à 1 et que vous avez maintenant le contrôle total sur la mise en cache du fichier. Vous pouvez également vous débarrasser de cet ennuyeux avertissement de mise en cache du navigateur à effet de levier, ironiquement causé par le propre script de Google.

Tirer parti de l'avertissement de mise en cache du navigateur

Tirer parti de l’avertissement de mise en cache du navigateur

Installez simplement l’extension, saisissez votre identifiant de suivi Google Analytics, et l’extension ajoute le code de suivi nécessaire pour Google Analytics à votre site WordPress, télécharge et enregistre le fichier analytics.js sur votre serveur et le maintient à jour en utilisant un script planifié dans wp_cron(). Nous recommandons également de le régler pour qu’il se charge dans le pied de page. Remarque : Cette extension ne fonctionne pas avec les autres extensions WordPress de Google Analytics et n’est pas supporté ou recommandé par Google.

Réglages d'analyse locaux

Réglages d’analyse locaux

3. Disqus Conditional Load

Si vous utilisez Disqus, il est très important que vous chargiez paresseusement les commentaires Disqus. Si vous ne le faites pas, Disqus peut être un réel obstacle à la vitesse de chargement de votre site. Pourquoi ? Parce que par défaut, il doit charger tous les avatars, et tous les scripts supplémentaires qu’ils incluent maintenant en raison des changements apportés aux publicités Disqus. Nous vous recommandons donc de consulter l’extension gratuite Disqus Conditional Load de Joel James.

Extension Disqus conditional load

Extension Disqus conditional load

Ce plugin a actuellement plus de 10 000 installations actives avec un classement de 4.8 sur 5 étoiles. Vous pouvez télécharger Disqus Conditional Load à partir du référentiel WordPress ou en le recherchant sous Extension > Ajouter dans votre tableau de bord WordPress. Vous devrez désactiver l’extension officielle Disqus avant d’activer celle-ci. En plus de charger paresseusement toutes les images (avatars), elle vous permet également de désactiver le script de comptage si vous ne l’utilisez pas. Donc un appel JavaScript en moins sur votre site WordPress.

Nous avons fait quelques tests rapides pour que vous puissiez voir la différence. Dans notre exemple, nous avons un article de blog avec 35 commentaires à son sujet. Nous l’avons d’abord testé avec l’extension officielle Disqus, puis avec l’extension Disqus Conditional Load.

Sans le plugin Disqus Conditional Load

Nous avons d’abord fait 5 tests dans Pingdom et avons pris la moyenne. Comme vous pouvez le constater, le temps de chargement total a été de 917 ms avec 113 requêtes.

Test de vitesse avec l’extension Disqus conditional load

Test de vitesse avec l’extension Disqus conditional load

Avec le plugin Disqus Conditional Load

Nous sommes ensuite passés à l’extension Disqus Conditional Load et avons de nouveau effectué 5 tests dans Pingdom. Comme vous pouvez le constater, notre temps de chargement est tombé à 685ms et nous n’avons maintenant que 88 requêtes ! Une différence majeure avec un petit échange d’extension gratuite. Pour les grands sites de nouvelles utilisant Disqus, cela pourrait faire des merveilles.

Test de vitesse avec l’extension Disqus conditional load

Test de vitesse avec l’extension Disqus conditional load

4. Lazy Load for Comments

Peut-être n’êtes-vous pas du tout fan de Disqus. Il a certainement ses avantages et ses inconvénients. Si vous préférez utiliser les commentaires WordPress natifs, cela a aussi un problème similaire. Par défaut, il charge tous les gravatars sur chaque page. La possibilité de charger paresseusement les commentaires n’est pas intégrée dans le noyau WordPress. Cependant, une grande solution légère et gratuite que nous recommandons est l’extension Lazy Load for Comments. Elle est également développée par James Joel.

Extension Lazy load for comments

Extension Lazy load for comments

Il s’agit d’une extension plus récente, qui ne compte actuellement que 100 installations actives avec un classement de 5 étoiles sur 5. Vous pouvez télécharger Lazy Load for Comments à partir du référentiel WordPress ou en le recherchant sous Extensions > Ajouter plugins dans votre tableau de bord WordPress.

Elle est très simple à configurer. Il suffit de l’installer et sous les réglages de discussion, il y a deux options. Par défaut, il est réglé sur « Au défilement », ce qui est probablement ce que la plupart des gens préfèrent. Vous pouvez aussi le régler sur « Au clic » qui créera un bouton sur lequel les visiteurs pourront cliquer avant le chargement des commentaires.

Options de Lazy Load Comments

Options de Lazy Load Comments

Nous avons fait quelques tests rapides pour que vous puissiez voir la différence. Dans notre exemple, nous utilisons à nouveau le même article de blog avec 35 commentaires à son sujet. Nous l’avons d’abord testé avec les commentaires natifs, puis avec l’extension Lazy Load for Comments.

Commentaires natifs

Nous avons d’abord fait 5 tests dans Pingdom et avons pris la moyenne. Comme vous pouvez le constater, le temps de chargement total a été de 827ms avec 106 requêtes.

Test de vitesse avec commentaires WordPress natifs

Test de vitesse avec commentaires WordPress natifs

Plugin Lazy Load for Comments

Nous sommes ensuite passés à l’extension Lazy Load for Comments et avons de nouveau effectué 5 tests dans Pingdom. Comme vous pouvez le constater, notre temps de chargement est tombé à 685ms et nous n’avons maintenant que 87 requêtes ! C’est génial. Un si petit ajustement aux commentaires natifs et c’est instantanément beaucoup plus rapide.

Test de vitesse avec commentaires chargés paresseusement

Test de vitesse avec commentaires chargés paresseusement

N’oubliez pas de consulter notre article sur d’autres façons d’accélérer les commentaires WordPress.

5. Query Strings Remover

Une autre petite extension sympa est l’extension gratuite Query Strings Remover. Vos fichiers CSS et JavaScript ont généralement la version du fichier à la fin de leur URL, comme domain.com/style.css?ver=4.6. Ces chaînes sont connues sous le nom de chaînes de requête. Certains serveurs et serveurs proxy sont incapables de mettre en cache les chaînes de requête, même si un cache-control:publicheader est présent. Ainsi, en les supprimant, vous pouvez parfois améliorer votre mise en cache. Cela corrigera également l’avertissement que vous voyez dans Pingdom et GTmetrix appelé « Remove query strings from static resources ».

Extension Query Strings Remover

Extension Query Strings Remover

Au moment d’écrire ces lignes, l’extension a plus de 7 000 installations actives avec une note de 4,4 sur 5. Vous pouvez télécharger Query Strings Remover à partir du référentiel WordPress ou en le recherchant dans votre tableau de bord WordPress sous Extensions > Ajouter. Ce qu’il y a de bien, c’est qu’il n’y a pas de configuration nécessaire. Il suffit de l’installer et c’est bon. Assurez-vous de vider votre cache après l’installation pour voir les changements. Vous pouvez voir un avant et un après ci-dessous.

Avec les chaînes de requête (avant le plugin)

Exemple de chaîne de requête

Exemple de chaîne de requête

Sans les chaînes de requête (après le plugin)

Exemple sans chaîne de requête

Exemple sans chaîne de requête

Vous pouvez également consulter notre article détaillé sur la façon de supprimer les chaînes de requête des ressources statiques sans l’utilisation d’une extension. Il est également important de noter que si vous utilisez un fournisseur CDN ou un hébergeur plus récent, certains sont capables de mettre en cache les chaînes de requête, ce qui signifie que vous n’aurez peut-être pas besoin de l’extension ci-dessus. Cloudflare et KeyCDN, par exemple, peuvent mettre en cache des chaînes de requête.

6. Disable Emojis

Quand ils ont sorti WordPress 4.2, ils ont ajouté la prise en charge des émojis dans le noyau pour les anciens navigateurs. Le gros problème est qu’il génère une requête HTTP supplémentaire sur votre site WordPress pour charger le fichier wp-emoji-release.min.js. Et ça se charge sur chaque page. Bien que ce fichier ne fasse que 10,5 Ko, les choses comme celles-ci s’accumulent avec le temps. Et pour la plupart des entreprises, elles n’utiliseront jamais d’émojis. La grande nouvelle est qu’il existe une extension gratuite appelée Disable Emojis, développée par Ryan Hellyer.

Extension Disable Emojis

Extension Disable Emojis

Cette extension est super légère, seulement 9 Ko pour être exact. Au moment d’écrire ces lignes, il y a actuellement plus de 40 000 installations actives avec un classement 5 étoiles sur 5. Vous pouvez le télécharger à partir du référentiel WordPress ou en le recherchant dans votre tableau de bord WordPress sous Extensions > Ajouter. Les émoticônes et emojis fonctionneront toujours dans les navigateurs qui ont un support intégré pour eux. Cette extension supprime simplement le fichier JavaScript supplémentaire qui est utilisé pour ajouter le support des emojis dans les anciens navigateurs. Il n’y a rien à configurer, il suffit d’installer, d’activer et le fichier JavaScript supplémentaire sera supprimé.

Voici un exemple du script qu’il désactivera sur votre site WordPress.

wp-emoji-release.min.js

wp-emoji-release.min.js

Vous pouvez également consulter notre tutoriel pour savoir comment désactiver les Emojis sans l’utilisation d’une extension.

7. Disable Embeds

Nous avons ensuite des embeds. Quand ils ont sorti WordPress 4.4, ils ont fusionné la fonction oEmbed dans le noyau. Vous l’avez probablement déjà vu ou utilisé. Cela permet aux utilisateurs d’intégrer des vidéos YouTube, des tweets et de nombreuses autres ressources sur leurs sites simplement en collant une URL, que WordPress convertit automatiquement en embed et fournit un aperçu en direct dans l’éditeur visuel.

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités

WordPress est un consommateur oEmbed depuis longtemps, mais avec la mise à jour, WordPress est devenu un fournisseur oEmbed. Cette fonction est utile pour beaucoup de gens, et vous voudrez peut-être la garder activée. Cependant, cela signifie qu’elle génère également une requête HTTP supplémentaire sur votre site WordPress pour charger le fichier wp-embed.min.js. Et ça se charge sur chaque page. Bien que ce fichier ne fasse que 1,7 Ko, les choses comme celles-ci s’accumulent avec le temps. La demande elle-même est parfois plus importante que la taille du téléchargement de contenu.

wp-embed.min.js

wp-embed.min.js

Heureusement, il existe une extension gratuite appelée Disable Embeds, développée par Pascal Birchler qui est en fait l’un des principaux contributeurs à WordPress.

Extension Disable embeds

Extension Disable embeds

Cette extension est super légère, seulement 3 KB pour être exact. Au moment d’écrire ces lignes, il y a actuellement plus de 10 000 installations actives avec une note de 4,8 sur 5 étoiles. Vous pouvez le télécharger à partir du référentiel WordPress ou en le recherchant dans votre tableau de bord WordPress sous Extension > Ajouter. Il n’y a rien à configurer, il suffit d’installer, d’activer et le fichier JavaScript supplémentaire sera supprimé. Comprend ce qui suit :

  • Empêche les autres d’intégrer votre site.
  • Vous empêche d’intégrer d’autres sites qui ne sont pas sur la liste blanche.
  • Désactive le chargement du fichier JavaScript sur votre site WordPress.

Vous pouvez toujours intégrer des choses à partir de YouTube et Twitter en utilisant leurs scripts iframe intégrés. Vous pouvez également consulter notre tutoriel sur la façon de désactiver les embeds sans l’utilisation d’une extension.

8. Perfmatters

Il y a aussi une nouvelle extension appelée perfmatters, qui vous permet de combiner trois des extensions mentionnées ci-dessus. Cela facilite grandement la gestion et la mise à jour. L’extension perfmatters est en fait développée par un des membres de l’équipe Kinsta !

Extension WordPress perfmatters

Extension WordPress perfmatters

Il s’agit d’une extension payante qui vous permet d’implémenter facilement de nombreuses optimisations de performances web en un seul clic. Vous trouverez ci-dessous quelques-unes des nombreuses optimisations que vous pouvez faire :

  • Désactiver les Emojis
  • Désactiver les intégrations
  • Supprimer les chaînes de requête
  • Supprimer jQuery Migrate
  • Désactiver et/ou limiter les révisions d’article
  • Modifier l’intervalle d’enregistrement automatique
  • Désactiver les pingbacks et les trackbacks
  • Désactiver XML-RPC
  • Supprimer la balise du générateur WordPress
  • Supprimer les liens de flux RSS
  • Désactiver l’API WordPress Heartbeat
  • Pré-extraction DNS
  • Désactiver les scripts et les styles de WooCommerce
  • Désactiver les fragments de panier WooCommerce (AJAX)

Beaucoup de ces optimisations aident à réduire les requêtes HTTP sur votre site et à réduire le gonflement de la base de données. Il est important de noter qu’elle ne supprime aucun fichier de votre site, elle les désactive simplement avec des hooks WordPress. C’est tout à fait sûr.

Réglages de perfmatters

Réglages de perfmatters

Et l’une des fonctionnalités les plus puissantes incluses est le gestionnaire de script. Cela vous permet de charger CSS et JS conditionnellement en fonction de la page que vous visitez. C’est une extension simple et légère qui permet de se débarrasser des fichiers CSS et JS inutiles enregistrés par les thèmes et les extensions. Même si vous utilisez HTTP/2, vous pouvez toujours retirer une partie du temps de chargement de vos pages.

Juste comme exemple rapide de la fonctionnalité du gestionnaire de script, nous avons lancé notre site de développement et installé les extensions suivantes, qui sont typiques de celles que vous pouvez trouver sur le site ou le blog d’un client :

  • Contact Form 7
  • Disqus Comment System
  • Q2W3 Fixed Widget
  • Social Warfare
  • Table of Contents Plus
  • TablePress

Avant le plugin Perfmatters

Nous avons ensuite effectué 5 tests dans Pingdom et pris la moyenne. Comme vous pouvez le constater, la taille totale de notre page est de 264,4 ko, notre temps de chargement est de 469 ms, et nous avons un total de 24 requêtes

Test de vitesse avant l’extension perfmatters

Test de vitesse avant l’extension perfmatters

Configurer le plugin Perfmatters

Nous avons ensuite configuré l’extension perfmatters. Pour ce faire, il vous suffit de naviguer sur une page de votre site, dans ce cas la page d’accueil, et de cliquer sur « Script Manager » dans votre barre d’administration WordPress.

perfmatters dans la barre d’administration

perfmatters dans la barre d’administration

Un des plus gros problèmes avec beaucoup d’extensions WordPress est qu’ils chargent leurs scripts sur tout votre site. Même les extensions populaires tels que Contact Form 7 le font. Pour la majorité des gens, ils n’ont vraiment besoin que de scripts pour le chargement de Contact Form 7 sur leur page de contact. Il en va de même pour les extensions comme Social Warfare et Disqus. Social Warfare fournit des boutons de réseaux sociaux, que vous ne voulez vraiment charger que sur vos articles de blog. Et pour Disqus, c’est pareil. Avec perfmatters vous pouvez les configurer pour les charger sur certaines pages, certains articles, les désactiver complètement, etc. A peu près n’importe quelle configuration.

Dans cet exemple, nous désactivons les 12 scripts suivants de notre page d’accueil, car ils ne sont pas nécessaires. Votre page d’accueil est après tout l’une des pages les plus importantes de votre site, et celle que les visiteurs voient généralement en premier. perfmatters vous permet de désactiver les scripts d’un simple clic sur un bouton.

/wp-content/themes/twentyseventeen/assets/js/html5.js
/wp-content/plugins/contact-form-7/includes/css/styles.css
/wp-content/plugins/table-of-contents-plus/screen.min.css
/wp-content/plugins/social-warfare/css/style.min.css
/wp-content/plugins/tablepress/css/default.min.css
/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js
/wp-content/plugins/contact-form-7/includes/js/scripts.js
/wp-content/plugins/table-of-contents-plus/front.min.js
/wp-content/plugins/social-warfare/js/script.min.js
/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js
/wp-content/plugins/disqus-comment-system/media/js/count.js
/wp-includes/js/wp-embed.min.js
Désactiver les scripts avec l’extension perfmatters

Désactiver les scripts avec l’extension perfmatters

Après l’extension perfmatters

Nous avons ensuite effectué à nouveau 5 tests dans Pingdom et avons pris la moyenne. Comme vous pouvez le constater, la taille totale de notre page est maintenant de 231,7 ko, notre temps de chargement est de 424 ms, et nous avons un total de 12 requêtes. Nous avons littéralement réduit de moitié le nombre total de nos requêtes avec cette extension ! Et il n’y a pas de concaténation, ce qui signifie que c’est tout à fait conforme aux meilleures pratiques pour de meilleures performances HTTP/2. Il utilise des hooks WordPress natifs, ce qui devrait être fait.

Test de vitesse après l’extension perfmatters

Test de vitesse après l’extension perfmatters

Bien sûr, ce n’est qu’un exemple sur un petit site. Sur des sites beaucoup plus grands, vous pouvez désactiver certains scripts WooCommerce qui ne sont pas nécessaires, les scripts EDD, toutes sortes de choses. Vous vous rendez probablement compte à quel point c’est puissant. Généralement, si quelque chose n’est pas utilisé ou nécessaire, il est préférable de ne pas le charger pour l’utilisateur. Ceci garantit les meilleurs temps de chargement possibles. Et pour ceux d’entre vous qui n’utilisent pas encore les serveurs supportés HTTP/2, vous verrez des gains de vitesse encore plus importants avec cette extension. Une autre alternative gratuite que vous pouvez essayer, qui est très similaire, est l’extension Plugin Organizer.

Ressources supplémentaires sur l’accélération de WordPress

En plus de tous les excellents plugins de performance mentionnés ci-dessus, voici quelques ressources supplémentaires pour vous aider à accélérer davantage votre site.

Résumé

Comme vous pouvez le voir, beaucoup de ces extensions de performance WordPress ci-dessus ne sont que de petits ajustements. Mais si vous commencez à mettre en œuvre tout cela, ils peuvent certainement s’ajouter à un site plus rapide. Nous recommandons fortement l’extension perfmatters et aussi de vérifier vos commentaires WordPress pour vous assurer que vous les chargez de la manière la plus efficace. Avons-nous manqué d’autres extensions performantes ? Si oui, faites-le nous savoir ci-dessous. (Nous n’avons pas inclus P3 Profiler dans cet article parce qu’il a montré des problèmes de performance)

13
Partages