Images, PHP et autres gains de vitesse

Module 6: Vitesse · Temps de lecture : 9 minutes

Objectif pédagogique : après cette leçon, vous saurez appliquer les principaux gains de vitesse restants et en mesurer l'effet.

Notions clés : optimisation des images, WebP et AVIF, chargement différé (lazy loading), l'image LCP, fetchpriority, version de PHP, nettoyage de la base de données (révisions, transients, autoload), WP-Cron, vrai cron, DISABLE_WP_CRON, polices externes, Heartbeat

Travaillez dans le bon ordre

Après un cache de page (leçon 6.2), voici les gains les plus rentables, à peu près dans l'ordre de l'effort par rapport à l'effet :

1. des images bien optimisées ;
2. une version de PHP à jour ;
3. moins d'éléments externes et d'extensions lourdes ;
4. une base de données nettoyée ;
5. des tâches planifiées sur un vrai cron.

Mesurez avant et après chaque étape (leçon 6.1), sinon vous ne saurez pas ce qui a aidé. Et faites une chose à la fois.

Les images : le plus grand gain dans le navigateur

Sur la plupart des pages, les images représentent la plus grande partie de ce qu'un visiteur télécharge. Ce que vous avez appris en leçon 4.4 porte ses fruits ici :

• Dimension appropriée : ne téléversez pas plus grand que nécessaire et laissez WordPress proposer des formats plus petits via srcset.
• Compression et format : le WebP est généralement bien plus léger que le JPEG à qualité égale ; l'AVIF l'est souvent encore plus. Une extension peut convertir les images existantes et fournir la version plus légère aux navigateurs qui la prennent en charge. Vérifiez si la conversion se fait sur votre propre serveur ou via un service externe.
• Chargement différé (lazy loading), mais pas pour tout. WordPress attribue automatiquement loading="lazy" aux images, sauf à la première grande image en haut de page. Cette image est souvent l'élément LCP (leçon 6.1) : le plus grand élément de contenu que le visiteur voit en premier. Si cette image est chargée en différé, le navigateur attend justement pour la charger et votre LCP se dégrade. WordPress attribue donc souvent au candidat LCP l'attribut fetchpriority="high", afin que le navigateur le récupère en priorité.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Atelier avec des vélos alignés">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="L'équipe devant le magasin">

Un piège : certains thèmes, créateurs de page et extensions d'optimisation appliquent aussi le chargement différé à la première image, ou chargent la grande image en arrière-plan via CSS (celle-ci est découverte plus tard). Dans PageSpeed Insights, vous voyez dans la section LCP quel est cet élément et s'il est chargé en différé.

PHP : de la vitesse gratuite

Chaque nouvelle version majeure de PHP est plus rapide que la précédente, et les sites WordPress en profitent directement, sans rien changer à votre site. De plus, les anciennes versions ne reçoivent plus de mises à jour de sécurité (leçon 8.4). Si vous changez de version, vérifiez que vos extensions et votre thème prennent en charge la nouvelle version, et faites-le de préférence d'abord sur un site de préproduction (staging).

Dans les paramètres PHP, regardez aussi :

• OPcache : activé par défaut chez la plupart des hébergeurs. Une conséquence : un fichier PHP modifié peut prendre un certain temps avant que PHP n'utilise la nouvelle version.
• memory_limit : une valeur trop basse provoque des erreurs sur les pages lourdes ; une valeur très élevée ne rend pas votre site plus rapide.

Éléments externes et extensions lourdes

Chaque élément provenant d'un tiers représente une connexion supplémentaire et un temps d'attente supplémentaire : polices provenant d'un service externe, vidéo intégrée, widget de discussion, codes de mesure, boutons de réseaux sociaux, une carte. Questions à se poser pour chaque élément :

• Est-ce nécessaire ? Une vidéo que presque personne ne lit peut aussi être remplacée par une image avec un lien.
• Peut-on l'héberger localement ? Les polices peuvent généralement être installées sur votre propre serveur (avec une extension ou via theme.json pour un thème basé sur des blocs). Cela évite une connexion supplémentaire et c'est meilleur pour votre confidentialité (leçon 9.3).
• Peut-on le charger plus tard ? Un widget de discussion ou une vidéo peut se charger seulement après un clic.

Pour les extensions, il est utile de mesurer avec X-Ray (sur un hébergement avec CloudLinux) ou avec une extension comme Query Monitor (à activer temporairement, visible uniquement pour les administrateurs). Elles indiquent quelle extension coûte le plus de requêtes à la base de données ou de temps.

Nettoyer la base de données

Une base de données grossit avec des éléments que vous ne voyez pas :

• Révisions (leçon 4.1) : chaque version enregistrée de chaque page. Limitez-les avec WP_POST_REVISIONS et nettoyez les anciennes.
• Commentaires indésirables et à la corbeille, et articles à la corbeille.
• Transients : données temporaires des extensions dans wp_options, qui ne sont parfois pas nettoyées.
• Autoload : les options dans wp_options avec autoload activé sont chargées en une fois à chaque requête. Les extensions que vous avez supprimées depuis longtemps y laissent parfois de grandes quantités de données. Santé du site (leçon 5.4) vous avertit si les données autoload sont très volumineuses.
• Tables de journalisation des extensions (statistiques, journaux de sécurité, journaux d'e-mails) qui ne sont jamais vidées.

Le nettoyage peut se faire avec une extension de nettoyage, avec WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), ou avec la fonction d'optimisation de phpMyAdmin pour les tables elles-mêmes. Faites toujours une sauvegarde d'abord. Ne supprimez rien dont vous ne connaissez pas la fonction.

Tâches planifiées : WP-Cron

WordPress a des tâches qui doivent s'exécuter à un moment donné : publier un article planifié, vérifier les mises à jour, faire fonctionner une extension de sauvegarde. Cela s'appelle WP-Cron. Par défaut, WP-Cron ne fonctionne pas sur une horloge, mais lors d'une visite : à chaque requête de page, WordPress vérifie si une tâche est prête. Deux inconvénients :

• En cas de faible fréquentation, les tâches s'exécutent trop tard (un article planifié n'apparaît qu'à la première visite suivante).
• En cas de forte fréquentation, la vérification se fait très souvent, et une tâche lourde peut justement ralentir la page d'un visiteur.

Mieux vaut désactiver WP-Cron lors des visites et laisser une véritable tâche cron du serveur l'exécuter toutes les cinq ou dix minutes. Dans wp-config.php (au-dessus de « c'est tout, bonne édition ! ») :

define( 'DISABLE_WP_CRON', true );

Et dans l'écran de cron de votre panneau d'hébergement, une tâche toutes les 10 minutes :

*/10 * * * *  /usr/local/bin/php /home/gebruiker/domains/example.com/public_html/wp-cron.php >/dev/null 2>&1

Le chemin vers PHP et vers votre site varie selon l'hébergeur ; consultez le guide de votre panneau. Ou utilisez WP-CLI : wp cron event run --due-now. Vérifiez ensuite dans Santé du site qu'aucune tâche planifiée n'est en retard.

Heartbeat et l'administration

Le tableau de bord de WordPress communique avec le serveur toutes les 15 à 60 secondes tant qu'il reste ouvert (le Heartbeat) : pour l'enregistrement automatique, pour signaler qu'une autre personne modifie le même article, et pour les notifications. Si vous laissez dix onglets d'administration ouverts toute la journée, cela représente des milliers de requêtes. Fermez les onglets que vous n'utilisez pas. Certaines extensions de cache peuvent ralentir le Heartbeat ; le désactiver complètement n'est pas nécessaire et casse l'enregistrement automatique.

Résumé

• Après le cache de page : images, version de PHP, éléments externes et extensions, base de données, cron. Mesurez avant et après, une étape à la fois.
• Chargement différé pour tout, sauf la grande image en haut de page ; celle-ci reçoit plutôt fetchpriority="high".
• Une version de PHP plus récente, c'est de la vitesse gratuite, à condition que vos extensions suivent.
• Nettoyez les révisions, les transients, les commentaires indésirables et les données autoload volumineuses, toujours avec une sauvegarde.
• Placez WP-Cron sur une véritable tâche cron avec DISABLE_WP_CRON et une tâche dans votre panneau.

Quiz

Exercice

Exercice A6.3 : chargement différé et formats sur votre page d'accueil. Indiquez l'adresse de votre site. Le programme lit la page d'accueil et examine les images : la première grande image n'a-t-elle pas loading="lazy" (et de préférence fetchpriority="high"), les images suivantes ont-elles bien le chargement différé, et quelle part des images est au format WebP ou AVIF ?

Exercice D6.3 : avant et après. Mesurez une page de votre site trois fois dans PageSpeed Insights (mobile) et notez la valeur médiane du LCP, de l'INP (ou de la valeur de laboratoire Total Blocking Time s'il n'y a pas de données de terrain), du CLS et du TTFB issu de l'exercice A6.1. Effectuez ensuite une amélioration de cette leçon (images, version de PHP, suppression d'un élément externe, nettoyage de la base de données ou un véritable cron). Mesurez à nouveau trois fois et notez les nouvelles valeurs. Décrivez ce que vous avez fait et si la différence est plus grande que la variation normale entre les mesures.

Pour aller plus loin

Ces articles décrivent les étapes dans les panneaux de WebOké ; dans d'autres panneaux, elles fonctionnent de façon similaire.

• Guide DirectAdmin 14.1: Choisir la version de PHP (Select PHP version)
• Guide DirectAdmin 12.7: Vérifier, réparer et optimiser une base de données
• Guide DirectAdmin 15.1: Tâches CRON : exécuter automatiquement des tâches
• Créer une tâche cron (et que faire si elle ne s'exécute pas)
• Guide DirectAdmin 17.4: X-Ray : repérer les pages lentes
• Relier WP-Cron au planificateur de tâches du système (developer.wordpress.org, Anglais) : https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Chargement différé et LCP (web.dev, Anglais) : https://web.dev/articles/lcp-lazy-loading