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 :

Allons-y.

Désactiver sélectivement les plugins WordPress du chargement sur des pages/articles spécifiques peut aider à accélérer votre site ! 🚀 Cliquez pour Tweet

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.
Réputation du référentiel WordPress

Le dépôt WordPress fournit des informations pertinentes dont nous devons toujours tenir compte lorsque nous choisissons un plugin.

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
Le panneau Chrome DevTools Network

Le panneau Chrome DevTools Network fournit des informations détaillées sur les requêtes réseau effectuées lorsqu’une page est chargée.

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.

Plugins actifs dans la table wp_options

Plugins actifs dans la table wp_options

Chaque plugin actif est stocké dans la table wp_optionsoptions_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.

La liste des plugins actifs

La liste des plugins actifs indique le dossier et le nom de chaque plugin

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_optionsoption_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 retourne false 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 filtre option_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/.

Pas de script CF7

Le fichier script.js a disparu de la liste des ressources de pages

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.

Plugin Load Filter

Plugin Load Filter permet de filtrer les plugins dans le panneau d’administration ainsi que dans les pages du site.

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.

Une fois le filtre activé

Une fois le filtre activé, les administrateurs du site peuvent définir leurs exceptions dans l’onglet Activation du filtre de type de page.

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
Page Paramètres de Plugin Organizer

Page Paramètres de Plugin Organizer

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.

CF7 a été désactivé globalement

CF7 a été désactivé globalement

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.

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

Plus d’informations peuvent être trouvées dans leur documentation.

Plugin Organizer metabox personnalisée sur la page contact

Plugin Organizer metabox personnalisée sur la page contact

Perfmatters Plugin

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 !

Gestionnaire de scripts Perfmatters

Gestionnaire de scripts Perfmatters

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.

Speed test with perfmatters plugin

Speed test with perfmatters plugin

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.

Firefox Outil d'analyse des performances

Firefox Outil d’analyse des performances

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.

Firefox Outil d'analyse des performances

Firefox Outil d’analyse des performances

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.

Firefox Outil d'analyse des performances

Firefox Outil d’analyse des performances

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 :