Quand il s’agit des performances de WordPress, nous avons beaucoup à dire sur les plugins. Chaque plugin ajoute du code PHP qui doit être exécuté, inclut généralement des scripts et des styles, et peut même exécuter des requêtes supplémentaires dans la base de données. Cela signifie que des plugins inutiles peuvent affecter la vitesse de la page et peuvent avoir un impact négatif sur l’expérience utilisateur et le classement des pages.
Par exemple, considérez un plugin qui construit et affiche des formulaires personnalisés sur les pages d’accueil, comme le Contact Form 7. Typiquement, vous n’auriez besoin que d’un seul formulaire sur une seule page, mais idéalement, vous pouvez intégrer un formulaire sur n’importe quelle page en utilisant le shortcode du plugin. Pour cette raison, Contact Form 7 charge les scripts et les styles sur chaque page de votre site Web.
Mais voulez-vous vraiment exécuter le code du plugin et inclure des scripts et des styles sur chaque page de votre site WordPress ?
Dans cet article, je vais vous montrer comment éviter que des plugins inutiles ne se chargent sur des articles/pages spécifiques, afin que vous puissiez installer des plugins supplémentaires (pas trop quand même), et que votre site WordPress continue à se charger rapidement. Pour accomplir cette tâche, nous allons désactiver les plugins WordPress par programmation sur des articles et pages spécifiques. Il s’agit d’un processus en quatre étapes :
- Choisissez les plugins les plus populaires qui correspondent à vos besoins, et comparez leurs fonctionnalités et effets sur la vitesse de la page.
- Listez et filtrez par programmation les plugins avant le chargement des pages.
- Filtrez et désactivez par programmation les plugins inutiles avec un mu-plugin.
- Filtrez et désactivez les plugins inutiles à l’aide d’un plugin.
- Suivez les performancez du site.
Allons-y.
Trois règles générales à suivre lors du choix d’un plugin
Les règles générales suivantes peuvent être utiles lors du choix d’un plugin :
- N’installez que des plugins bien codés provenant de développeurs de confiance : considérez les installations actives, l’évaluation des utilisateurs, le support client, la fréquence des mises à jour et toute information utile provenant de la communauté WordPress.
- Préférez les plugins évolutifs : comparez des plugins similaires en termes de performances, en utilisant des outils de développement de navigateur et/ou des services en ligne comme Google Pagespeed Insights, Pingdom, et GTmetrix pour évaluer l’impact de chaque plugin sur le temps de chargement des pages.
- N’installez pas de plugins inutiles : cela devrait être évident, mais il est important de mentionner que vous ne devriez jamais installer un plugin dont vous n’avez pas vraiment besoin pour des raisons de sécurité et de performances. Aussi, assurez-vous de revoir vos plugins de temps en temps et de désinstaller ceux dont vous n’avez plus besoin et que vous n’utilisez plus.
Un exemple concret
Contact Form 7 est un excellent plugin qui construit et affiche des formulaires sous WordPress. Il fournit un exemple parfait pour nos besoins, car il inclut les fichiers suivants sur chaque page, même si la page ne contient pas de formulaire :
- style.css
- scripts.js
Un plugin peut ralentir votre site web, mais nous pouvons forcer WordPress à désactiver sélectivement les plugins selon l’URL de la requête. Si vous êtes un développeur, lisez la section suivante où nous apprendrons à gérer les plugins par programmation et à construire un mu-plugin qui filtre les plugins inutiles. Si vous n’êtes pas développeur, n’hésitez pas à passer à la section dédiée aux plugins qui permettent de filtrer et organiser les plugins.
Comment obtenir une liste de tous les plugins actifs programmatiquement
Tout d’abord, vous pouvez obtenir une liste de tous les plugins actifs sur votre site WordPress avec un simple extrait de code PHP. Vous pouvez ajouter le code suivant soit dans un plugin personnalisé, soit dans l’éditeur d’un plugin WordPress gratuit comme Code Snippets. Si vous décidez d’opter pour votre plugin personnalisé, n’oubliez pas d’ajouter l’en-tête du plugin comme indiqué ci-dessous.
Chaque plugin actif est stocké dans la table wp_options
où options_name
est active_plugins
. Nous pouvons donc extraire la liste de ces plugins avec un simple appel get_option
. Voici le code :
<?php
/**
* @package active-plugins
* @version 1.0
*
* Plugin Name: Active Plugins
* Plugin URI: http://wordpress.org/extend/plugins/#
* Description: This is a development plugin
* Author: Your Name
* Version: 1.0
* Author URI: https://example.com/
*/
add_shortcode( 'activeplugins', function(){
$active_plugins = get_option( 'active_plugins' );
$plugins = "";
if( count( $active_plugins ) > 0 ){
$plugins = "<ul>";
foreach ( $active_plugins as $plugin ) {
$plugins .= "<li>" . $plugin . "</li>";
}
$plugins .= "</ul>";
}
return $plugins;
});
Changez les détails du plugin, puis enregistrez le fichier active-plugins.php
et chargez-le dans votre dossier /wp-content/plugins/
. Créez un nouvel article de blog et ajoutez le shortcode [activeplugins]
. Il devrait maintenant afficher une liste de tous les plugins actifs.
Cela étant fait, nous pouvons aller plus loin et ajouter ou supprimer des plugins par programmation en tirant parti du filtre option_active_plugins
. Ce filtre appartient au groupe de filtres option_$option_name qui permet de filtrer n’importe quelle option après sa récupération dans la base de données. Puisque tous les plugins actifs sont stockés dans la table wp_options
où option_value
est active_plugins
, le filtre option_active_plugins
permet d’activer ou de désactiver les plugins par programmation.
Ainsi, nous pouvons activer un plugin par programmation. Disons, par exemple, que vous voulez activer le plugin ACF. Voici le code :
add_filter( 'option_active_plugins', function( $plugins ){
$myplugin = "advanced-custom-fields/acf.php";
if( !in_array( $myplugin, $plugins ) ){
$plugins[] = $myplugin;
}
return $plugins;
} );
Dans cet exemple, nous supposons que le plugin a été installé et n’a pas encore été activé.
Le code ci-dessus ajoute simplement le plugin à la liste des plugins actifs sur chaque page de notre site. Pas très utile, mais vous avez compris.
De plus, le plugin devrait se charger avant tout autre plugin, sinon, notre code ne pourrait pas fonctionner comme prévu. Afin de prioriser notre chargement de plugin, nous devons ajouter notre script dans un plugin Must-use.
Comment construire un Must-Use plugin pour désactiver les plugins par programmation
Nous allons construire un Must use plugin, qui est un plugin résidant dans un sous-dossier /wp-content
spécifique, et s’exécute avant tout plugin habituel.
Malheureusement, dans cette situation, nous ne sommes pas autorisés à utiliser des balises conditionnelles, car les balises conditionnelles de requête ne fonctionnent pas avant que la requête ne soit lancée. Avant cela, elles retournent toujours faux. Nous devons donc vérifier nos conditions autrement, par exemple en analysant l’URI de la requête et en vérifiant le chemin URL correspondant.
Ajoutez le code suivant au fichier active-plugins.php
puis déplacez-le vers /wp-content/mu-plugins
:
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugin = "contact-form-7/wp-contact-form-7.php";
$k = array_search( $myplugin, $plugins );
if( false !== $k && false === $is_contact_page ){
unset( $plugins[$k] );
}
return $plugins;
} );
}
Plongeons dans ce code :
- parse_url retourne le chemin de l’URL demandée.
- strpos trouve la position de la première occurrence de
'/wp-admin/'
, et retournefalse
si la chaîne n’est pas trouvée. La variable$is_admin
stocke la valeur retournée. - Cette condition empêche l’exécution du filtre dans le panneau d’administration, ce qui nous permet d’accéder en toute sécurité aux pages de paramètres du plugin. Si la requête URI ne contient pas
'/wp-admin/'
, alors nous invoquons le filtreoption_active_plugins
. - Enfin, si le plugin courant n’est pas dans le tableau des plugins actifs, et que l’URI de la page courante ne contient pas
/contact/
, alors nous retirons le plugin de$plugins
.
Sauvegardez maintenant votre plugin et chargez-le dans votre répertoire /wp-content/mu-plugins/
folder. Effacez le cache et ajoutez le shortcode [activeplugins]
à plusieurs pages. Il ne doit apparaître dans la liste que sur la page /contact/
.
Nous pouvons alors désinstaller un tableau de plugins à la fois avec juste un peu de PHP supplémentaire.
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugins = array(
"contact-form-7/wp-contact-form-7.php",
"code-snippets/code-snippets.php",
"query-monitor/query-monitor.php",
"autoptimize/autoptimize.php"
);
if( false === $is_contact_page ){
$plugins = array_diff( $plugins, $myplugins );
}
return $plugins;
} );
}
Dans cet exemple, nous avons d’abord défini un tableau de plugins à supprimer, puis nous les supprimons avec array_diff. Cette fonction « compare array1 avec un ou plusieurs autres array et retourne les valeurs de array1 qui ne sont présentes dans aucun des autres array (tableaux) ».
Vous pouvez télécharger le code complet de ce plugin depuis Gist.
Vous pouvez maintenant télécharger le plugin dans le dossier mu-plugins et inspecter n’importe quelle page de votre site web. Le mu-plugin peut être hautement personnalisé en ajoutant plus de conditions et en vérifiant plus d’URIs, mais chaque condition doit être ajoutée manuellement au code, et à long terme, ce simple mu-plugin pourrait être difficile à maintenir.
Pour cette raison, vous pouvez consulter les plugins suivants.
Plugins qui filtrent les plugins
Comme alternative, nous pouvons regarder un certain nombre de bons plugins qui nous permettent d’ajouter des filtres qui peuvent être gérés depuis le panneau d’administration de WordPress.
Plugin Load Filter
Plugin Load Filter est une option gratuite pour les utilisateurs de WordPress qui ont besoin de filtrer les plugins sous plusieurs conditions.
Actuellement, il supporte les fonctionnalités suivantes :
- Formats de posts
- Types de posts personnalisés
- Modules Jetpack
- WP Embed content card
- Filtre URL pour Expert (REST API / Heartbeat / AJAX / AMP / etc)
Une fois qu’un filtre a été activé, l’utilisateur admin peut spécifier où il doit être appliqué dans le site, comme le montre l’image ci-dessous.
Plugin Organizer
Plugin Organizer est un plugin populaire avec plus de 10 000 installations actives et une impressionnant note de 5 étoiles sur 5. Il s’agit d’un plugin plus complet permettant aux administrateurs du site de :
- Désactiver sélectivement les plugins par type de post et URL de requête
- Désactiver sélectivement les plugins par rôle utilisateur
- Créer des groupes de plugins
- Modifier l’ordre de chargement du plugin
- Caractéristiques supplémentaires
La page d’options globales du plugins offre une fonction par glisser-déposer qui permet à l’administrateur de désactiver globalement les plugins, empêchant WordPress d’exécuter un ou plusieurs plugins n’importe où dans le site, à moins que cela ne soit spécifié différemment pour des articles ou pages uniques. La même fonction est disponible pour les pages de recherche et les types de posts.
Le plugin ajoute une metabox dans l’écran de post-édition pour permettre à l’administrateur d’écraser les paramètres globaux et de type de post. Cette fonction peut également être activée pour les types de posts, en cochant l’élément correspondant dans l’écran Paramètres généraux. Une grande caractéristique est le message de débogage du Plugin Organizer, qui fournit à l’administrateur du site des informations utiles sur les plugins affectant chaque page du site.
Plus d’informations peuvent être trouvées dans leur documentation.
Plugin Perfmatters
Une approche partiellement différente vient du plugin Perfmatters. C’est une alternative premium qui permet à l’administrateur du site de charger sélectivement les ressources de thème et de plugin selon l’URL ou le type de post personnalisé. C’est un excellent outil pour l’optimisation des plugins et des thèmes. En fait, il a été développé par un membre de l’équipe de Kinsta !
Le plugin possède une fonctionnalité appelée Script Manager, où tout est regroupé par nom de plugin ou de thème. Il est donc très facile de désactiver un plugin entier à la fois, ou des fichiers CSS et JavaScript individuels en son sein.
Vous pouvez même désactiver les scripts avec regex. Ceci est particulièrement utile pour les sites qui ont une structure URL plus complexe en place ou des pages générées dynamiquement.
Ceci est très puissant et peut augmenter considérablement la vitesse sur vos sites WordPress (en particulier votre page d’accueil). Quelques exemples de ce à quoi cela peut servir :
- Les plugins de partage de médias sociaux ne devraient être chargés que sur vos articles. Vous pouvez facilement le désactiver partout et le charger uniquement sur les types de posts, ou même les types de posts personnalisés.
- Le populaire plugin Contact Form 7 se charge à chaque page et à chaque article. Vous pouvez facilement le désactiver partout d’un seul clic et ne l’activer que sur votre page de contact.
- Si vous avez mis à niveau vers WordPress 5.0 mais que vous n’utilisez pas l’éditeur de blocs Gutenberg, peut-être utilisez-vous encore l’éditeur classique, il y a deux scripts supplémentaires sur le front-end qui sont ajoutés à l’ensemble du site que vous pouvez désactiver :
/wp-includes/css/dist/block-library/style.min.css
et/wp-includes/css/dist/block-library/theme.min.css
Vous pouvez voir, d’après cette revue de perfmatters, qu’il a diminué le temps de chargement total de 20,2 %. Rien que sur leur page d’accueil, ils ont pu réduire le nombre de requêtes HTTP de 46 à 30 ! La taille de la page est également passée de 506,3 Ko à 451,6 Ko.
Comment suivre les performances : Les outils de développement du navigateur
Une étape fondamentale sur la voie de l’optimisation de la performance est la mesure du temps de chargement. Nous avons un certain nombre de plugins et d’outils en ligne que nous pouvons utiliser pour suivre les performances du site, comme Google Pagespeed Insights et Pingdom. Mais d’abord et avant tout, nous pouvons utiliser les outils de développement du navigateur, qui fournissent beaucoup d’informations utiles.
Chaque inspecteur de navigateur possède un panneau Réseau qui affiche une liste des requêtes réseau et des informations associées. Suivez ces liens pour une documentation détaillée :
Dans une installation WordPress avec dix-huit plugins actifs, nous avons inspecté à plusieurs reprises une page d’article avec Firefox Dev Tools. Nous avons d’abord mesuré la vitesse de la page et répertorié les ressources demandées avant d’installer tout plugin de filtrage. L’image suivante montre la sortie de l’outil d’analyse des performances disponible dans le moniteur réseau de Firefox.
Le moniteur réseau fournit les résultats suivants (cache vide) :
- Poids : 255.19 Ko
- Temps de chargement : 1.24 secondes
- Requêtes : 12
Par la suite, nous avons installé Plugin Organizer pour empêcher WordPress d’exécuter le plugin CF7. Le diagramme circulaire change un peu.
Maintenant la page se charge plus rapidement (cache vide) :
- Poids : 104.21 Ko
- Temps de chargement : 0.80 secondes
- Requêtes : 8
Ensuite, nous avons désactivé plusieurs plugins inutiles, et l’image suivante montre à quel point nous avons amélioré les performances de la page.
Après avoir désactivé tous les plugins inutiles, le cache du navigateur vide du moniteur réseau renvoie les données suivantes :
- Poids : 101.98 Ko
- Temps de chargement : 0.46 secondes
- Requêtes : 8
Nous pouvons comparer les résultats de nos tests. La taille de la ressource a été réduite de 60,04 %, le temps de chargement est passé de 1,24 à 0,46 seconde et le nombre de requêtes HTTP a diminué de 12 à 8. Cela confirme que les plugins peuvent affecter les performances de la page, et que nous pouvons augmenter la vitesse de la page en profitant d’un filtre de plugins.
Résumé
Que vous construisiez vos propres scripts ou installiez des outils tiers, l’organisation et le filtrage des plugins est quelque chose dont vous devez toujours tenir compte lorsqu’il s’agit d’optimiser les performances. Rappelez-vous que tous les plugins ne sont pas développés dans un souci de performance. Par conséquent, il peut être sage de prendre un certain temps et de déterminer quels plugins (CSS et JS) sont chargés et où.
Mais apprendre à désactiver les plugins WordPress n’est qu’une des nombreuses autres techniques visant à augmenter la vitesse du site. Voici une liste d’autres guides et tutoriels utiles liés à la performance du site :
- Comment accélérer WordPress (Guide Ultime)
- Un guide pour débutants sur l’optimisation de la vitesse du site Web
- Comment réduire le TTFB pour améliorer les temps de chargement des pages WordPress
- Comment diagnostiquer l’utilisation élevée Admin-Ajax élevée sur votre site WordPress
- Comment nettoyer votre table wp_options et les données chargées automatiquement
- Comment désactiver les plugins WordPress (pas d’accès à WP-Admin)
Super article très détaillé, intéressant de comprendre comment fonctionne le mode mu-plugin !
J’avais déja testé « Plugin Load Filter » & « plugin organizer » mais j’ai préféré le plugin « Asset CleanUp: Page Speed Booster » (gratuit largement suffisant) que j’ai trouvé plus facile à prendre en main et plus détaillé au final, supris de ne pas le voir dans cette liste, vous ne l’avez pas testé ou alors vous ne le recommandez pas peut être ?
Bonjour Antonin, ça a l’air d’être un super plugin, mais c’est plus un plugin d’optimisation, plutôt qu’un « filtre » de plugin. Malheureusement, il existe des centaines de plugins d’optimisation différents et nous ne pouvons pas tous les tester.
L’article ci-dessus utilise des plugins dont nos développeurs peuvent se porter personnellement garants en termes de fonctionnalité et de performances (et de compatibilité avec la plateforme d’hébergement Kinsta).
La desactivation selective des plugin est probablement la plus utile. Vous pouvez desactiver les plugin de sorte qu ils ne se chargent pas sur certaines pages, ou, vous desactivez tous les plugin et n autorisez que le chargement de certains d entre eux en fonction de vos articles ou vos pages.
Content que vous soyez d’accord ! Oui, pour ceux qui sont obsédés par la performance, il peut être très bénéfique de personnaliser les scripts qui se chargent sur vos pages importantes.