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 l’outil Kinsta APM 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.
7 plugins de performance WordPress
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.
- Query Monitor
- Complete Analytics Optimization Suite
- Disqus Conditional Load
- Lazy Load for Comments
- Disable Emojis
- Disable Embeds
- perfmatters
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 WordPress 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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
N’oubliez pas de consulter notre article sur d’autres façons d’accélérer les commentaires WordPress.
5. 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.
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.
Vous pouvez également consulter notre tutoriel pour savoir comment désactiver les Emojis sans l’utilisation d’une extension.
6. 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. Si vous avez intégré Facebook dans votre site, découvrez comment la nouvelle mise à jour de Facebook peut l’affecter et comment vous pouvez y remédier.
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.
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.
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.
7. 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 !
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.
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
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.
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
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.
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.
- 19 conseils pour accélérer WordPress
- Un guide pour débutants sur l’optimisation de la vitesse du 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.
Vous n’avez pas du tout besoin de commentaires ? Alors vous pouvez simplement désactiver les commentaires dans WordPress.
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)
Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.
Laisser un commentaire