En ce qui concerne les performances de WordPress, nous avons beaucoup à dire sur les plugins. Chaque plugin ajoute du code PHP qui doit être exécuté, peut inclure des scripts et des styles, et certains peuvent exécuter des requêtes supplémentaires dans la base de données. Cela signifie que des plugins inutiles peuvent affecter la vitesse des pages et peuvent avoir un impact négatif sur l’expérience utilisateur et le référencement des pages. Prenons l’exemple d’un plugin qui construit et affiche des formulaires personnalisés en première page, comme le formulaire de contact 7. Vous n’avez généralement besoin que d’un formulaire sur une seule page. Voulez-vous vraiment exécuter le code du plugin et inclure des scripts et des styles sur chaque page de votre site web ?

Dans cet article, je vais démontrer que vous pouvez installer autant de plugins que nécessaire (ne vous énervez pas bien sûr), et néanmoins faire en sorte que les pages WordPress se chargent rapidement. Nous allons désactiver les plugins WordPress (qui ne sont pas nécessaires au chargement sur des articles et des pages spécifiques. Il s’agira d’un processus en quatre étapes :

  • Choisissez les plugins les plus populaires qui correspondent à vos besoins, et comparez leurs caractéristiques et effets sur la vitesse de la page.
  • Filtrez et désactivez les plugins inutiles avant le chargement des pages.
  • Optimisez les fichiers CSS et JS.
  • Suivez la performance du site.

Faisons l’analyse en détails.

Toujours à la recherche de cet hébergeur WordPress parfait ?

Essayez l'hébergement WordPress Premium de Kinsta pour découvrir votre site sans problèmes.
  • Contrôles stylisés représentant la gestion Entièrement infogéré
  • Bouclier avec une tique représentant la sécuritéSécurisé comme le fort knox
  • Fusionner des lignes représentant des migrationsMigrations gratuites
  • Trois chevrons droits représentant la vitesse du serveurVitesse ultime
  • Flèche circulaire avec un point central représentant les sauvegardesSauvegardes quotidiennes
  • Hexagones décalés représentant notre pile de serveursPlatforme Google Cloud

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 de mise à 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 des plugins inutiles : cela pourrait être évident, mais il vaut la peine 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 performance. Assurez-vous également 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 dépôt WordPress

WordPress Plugin Directory fournit des informations pertinentes dont nous devons toujours tenir compte lorsque nous choisissons un plugin.

Une fois que nous avons choisi le plugin le plus efficace et le plus populaire, nous pouvons aller de l’avant pour accélérer notre site Web et forcer WordPress à charger un plugin juste dans les pages où il est vraiment nécessaire.

Un exemple concret

Contact Form 7 est un excellent plugin qui construit et affiche les formulaires dans WordPress. Il fournit un exemple parfait pour nos besoins, car il inclut les fichiers.js  suivants sur chaque page, même si la page ne contient pas de formulaire :

  • jquery.form.min.js
  • 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 lors du chargement d’une page.

Un plugin peut créer une perte d’efficacité générale, mais nous pouvons forcer WordPress à désactiver sélectivement les plugins en fonction de l’URL demandée. Si vous êtes un développeur, lisez la section suivante, dans laquelle j’explique comment construire un mu-plugin qui filtre les plugins inutiles. Si vous n’êtes pas un développeur, n’hésitez pas à sauter à la section dédiée aux plugins qui permettent de filtrer et d’organiser les plugins.

Comment construire un MU plugin pour désactiver les plugins par programmation

Notre but est de désactiver les plugins WordPress (désactiver) par page en filtrant la liste des plugins actifs. Pour atteindre cet objectif, nous allons construire un MU plugin, qui est un plugin qui réside dans un sous-dossier /wp-content spécifique, et qui s’exécute avant tout plugin régulier. Donc, créons un nouveau fichier .php (i.e. mon-plugin.php) dans /wp-content/mu-plugins.

Notre première tâche est de vérifier la demande URI. Comme les mu-plugins s’exécutent avant qu’une variable is_ n’ait été définie, nous ne sommes pas autorisés à utiliser des balises conditionnelles. Par conséquent, nous devons analyser la requête URI et vérifier le chemin URL correspondant :

$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );

$is_admin = strpos( $request_uri, '/wp-admin/' );

// add filter in front pages only
if( false === $is_admin ){
	add_filter( 'option_active_plugins', 'kinsta_option_active_plugins' );
}

Plongeons dans ce code :

  • parse_url retourne le chemin d’accès 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.
  • si l’URL de la requête ne contient pas’/wp-admin/’, alors nous ajoutons le filtre option_active_plugins.

La condition empêche l’exécution du filtre dans le panneau d’administration, afin que nous puissions accéder en toute sécurité aux pages de paramètres du plugin. option_active_plugins appartient au groupe de filtres option_$option_name. Ces crochets permettent de filtrer n’importe quelle option une fois qu’elle a été extraite de la base de données. Puisque tous les plugins actifs sont stockés dans la table wp_options où le champ option_value est active_plugins, le filtre option_active_plugins permet d’activer ou de désactiver les plugins par programmation.
Ceci étant dit, définissons la fonction de rappel :

function kinsta_option_active_plugins( $plugins ){
	global $request_uri;
	$is_contact_page = strpos( $request_uri, '/contact/' );

	$unnecessary_plugins = array();

	// conditions
	// if this is not contact page
	// deactivate plugin
	if( false === $is_contact_page ){
		$unnecessary_plugins[] = 'contact-form-7/wp-contact-form-7.php';
	}

	foreach ( $unnecessary_plugins as $plugin ) {
		$k = array_search( $plugin, $plugins );
		if( false !== $k ){
			unset( $plugins[$k] );
		}
	}
	return $plugins;
}

Voici ce qui se passe :

  • Tout d’abord, nous passons la fonction array des plugins actifs.
  • La fonction vérifie si le chemin URL de la requête contient la chaîne de caractères‘/contact/’. Si ce n’est pas le cas, strpos renvoiefalse, et nous pouvons vérifier une nouvelle condition.
  • Si l’URL de la requête courante pointe vers une page autre que la page de contact, nous ajoutons le plugin Formulaire de contact 7 à un tableau de plugins inutiles.
  • Le cycle foreach itère sur les éléments du tableau $unnecessary_plugins. Si le plugin courant est un plugin actif, alors la fonction unset le supprime du tableau $plugins.
  • La fonction retourne le tableau $plugins mis à jour.

Vous pouvez télécharger le code complet de ce plugin depuis Gist.

Maintenant vous pouvez envoyer le plugin dans le dossier mu-plugins et inspecter n’importe quelle page de votre site web. Vous devriez trouver les ressources de CF7 uniquement dans la page des contacts. 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.

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 à partir du 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 Paramètres

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 d’articles
  • Custom Post Types
  • Modules Jetpack
  • Contenu intégré (embed)
  • Mot-clé AMP
  • Filtres URL

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.

Plugins Load Filter paramètres

Une fois le filtre activé, l’utilisateur admin peut déterminer le type de page où il doit être appliqué.

Plugin Organizer

Plugin Organizer est un plugin plus complet qui permet aux administrateurs du site de :

  • Désactiver sélectivement les plugins actifs par type de message et requête d’URL
  • Créer des groupes de plugins
  • Modifier l’ordre de chargement des plugins
Page Paramètres du plugin Plugin Organizer

Page Paramètres du plugin Plugin Organizer

La page des 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 un seul article ou une seule page. La même fonction est disponible pour les pages de recherche et les types d’articles.

CF7 a été complètement désactivé.

CF7 a été complètement désactivé.

Le plugin ajoute une metabox dans l’écran d’édition d’article afin que l’administrateur soit autorisé à outrepasser les paramètres globaux et de type d’article. Cette fonction peut également être activée pour les types d’articles, en cochant l’élément correspondant dans l’écran Paramètres généraux. D’autres fonctionnalités concernent le regroupement et l’ordre des plugins. Vous trouverez plus d’informations dans la documentation en ligne.

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 des thèmes et des plugins en fonction de l’URL ou du custom post type. C’est un excellent outil pour l’optimisation des plugins et des thèmes. En fait, il est développé par un membre de l’équipe de Kinsta !

Désactiver le gestionnaire de scripts

Désactiver le gestionnaire de scripts

Ceci est très puissant et peut augmenter considérablement la vitesse de 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 les désactiver partout et les charger uniquement sur les types d’articles ou custom post types.
  • Le populaire plugin Contact Form 7 se charge à chaque page et article. Vous pouvez facilement le désactiver partout en un seul clic et ne l’activer que sur votre page de contact.

Vous pouvez voir à partir de cette revue de perfmatters, cela a diminué le temps de chargement total de 20,2%. Rien que sur la page d’accueil, cela a 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.

Test de vitesse avec le plugin perfmatters

Test de vitesse avec le plugin perfmatters

Comment suivre les performances : Les outils de développement du navigateur

Une étape fondamentale sur la route vers 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.

Le panneau Chrome Network

L’image montre le panneau Réseau des outils de développement Chrome.

Chaque inspecteur de navigateur dispose d’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 :

Le moniteur réseau Firefox

Le moniteur réseau Firefox fournit un panneau supplémentaire qui permet d’évaluer le temps qu’il faut au navigateur pour télécharger les ressources de la page.

Dans une installation WordPress avec dix-huit plugins actifs, nous avons inspecté à plusieurs reprises une page d’article avec les outils de développement de Firefox. Nous avons d’abord mesuré la vitesse des pages et répertorié les ressources demandées avant d’installer un plugin de filtrage. L’image suivante montre le résultat de l’outil d’analyse des performances du moniteur réseau de Firefox.

Moniteur réseau de Firefox

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

Le moniteur réseau fournit les résultats suivants (cache vide) :

  • Taille : 709.77 Ko
  • Temps de chargement : 6,67 secondes
  • Requêtes : 30

Par la suite, nous avons installé le plugin Plugin Organizer pour empêcher WordPress d’exécuter le plugin CF7. Le diagramme circulaire change un peu.

Moniteur réseau de Firefox

Maintenant la page se charge plus rapidement (cache vide) :

  • Taille : 665.85 Ko
  • Temps de chargement : 5,08 secondes
  • Requêtes : 27

Ensuite, nous avons désactivé seize plugins inutiles, et l’image suivante montre à quel point nous avons amélioré les performances de la page.

Moniteur réseau de Firefox

Après avoir désactivé tous les plugins inutiles, le cache du navigateur vide du moniteur réseau renvoie les données suivantes :

  • Taille : 440.15 Ko
  • Temps de chargement : 3,14 secondes
  • Requêtes : 21

Ce test démontre à quel point les plugins peuvent affecter la performance des pages, et à quel point nous pouvons augmenter la vitesse des pages avec un plugin de filtre.

Mais nous pouvons encore améliorer les performances grâce à un autre outil d’optimisation. Autoptimize est un plugin gratuit qui concatène, minifie et compresse les scripts et les styles, déplace les styles vers l’en-tête de page et les scripts vers le pied de page (Pour en savoir plus sur le plugin, voir Comment éliminer le JavaScript et CSS bloquant le rendu). Activez le plugin, puis rechargez et inspectez à nouveau la page.

Moniteur réseau de Firefox

Grâce à Autoptimize, nous avons atteint un haut niveau d’optimisation (cache de navigateur vide) :

  • Taille : 474.56 Ko
  • Temps de chargement : 1,99 secondes
  • Requêtes : 13

Enfin, nous pouvons comparer les résultats de nos tests. La taille des ressources a été réduite de 235 Ko, le temps de chargement a été réduit de 6,67 secondes à 1,99 secondes et le nombre de requêtes HTTP est passé de 30 à 13.

Résumé

Que vous construisiez vos propres scripts ou que vous installiez des outils tiers, l’organisation et le filtrage des plugins est une bonne pratique que vous devriez toujours prendre en compte lorsqu’il s’agit d’optimiser les performances. Mais apprendre à désactiver les plugins WordPress n’est qu’une des nombreuses autres techniques visant à augmenter la vitesse du site, et voici une liste de guides et de tutoriels liés aux performances du site qui valent la peine d’être lus :