Vérificateur de vitesse : découvrez ce qui freine votre WordPress

Certains administrateurs de sites WordPress sont obsédés par PageSpeed Insights ou GTmetrix. Mon conseil, et celui de beaucoup d'autres qui en savent beaucoup plus sur le sujet, est que vous ne devriez pas donner à ces mesures plus d'importance qu'elles n'en ont.

Si la vitesse de chargement perçue est bonne, il n'est pas nécessaire de tout mettre "en vert". Dans de nombreux cas, c'est même contre-productif, car on peut tomber dans la sur-optimisation, ou pire, on peut finir par gâcher plusieurs choses en essayant d'en régler une seule.

Pourtant, que vous soyez un aficionado du WPO, un passionné d'optimisation ou que vous souhaitiez simplement essayer d'améliorer la réactivité de votre site, ces outils sont presque indispensables. Le problème est qu'ils proposent des "images fixes" provenant de serveurs externes. Mais que se passe-t-il lorsque vous, en tant qu'administrateur, naviguez sur votre site, qu'en est-il de ces publicités qui se chargent tardivement ou de ce menu qui saute juste au moment où vous êtes sur le point de cliquer ?

Origine

Speed Auditor est né en réponse à un besoin personnel d'avoir plusieurs outils de diagnostic locaux simples mais puissants. Ce n'est pas un plugin d'optimisation (il ne change rien à votre code), c'est un plugin d'audit en temps réel.

Si vous cherchez un bon, voire le meilleur, plugin payant pour WPO, avec lequel vous pouvez faire des changements et des réglages fins, jetez un coup d'œil à Perfmatters. Si, au contraire, vous cherchez quelque chose de gratuit et de simple, sans vous prendre la tête avec des réglages et des ajustements, mais avec beaucoup de possibilités, vous pouvez essayer WPO Rocket Tweaks de Fernando Tellado, disponible dans le dépôt WordPress.

Si vous ne savez pas ce qu'est un nœud DOM ou une mesure de latence, ne vous inquiétez pas. L'auditeur de vitesse est conçu pour vous aider à comprendre votre site web en un coup d'œil :

• L'indicateur intelligent : Une icône de couleur changeante apparaît dans votre barre d'administration. Si elle est verte, votre LCP (le temps nécessaire pour voir les choses les plus importantes) est optimal. S'il devient orange ou rouge, quelque chose nécessite votre attention.

• Auditer pendant que vous naviguez : Vous n'avez pas besoin de configurer quoi que ce soit de complexe. Vous activez le plugin et, pendant que vous consultez vos articles, il travaille en arrière-plan pour analyser si vos images sont trop lourdes ou si votre serveur répond lentement.
• Des rapports plus humains : En un seul clic, téléchargez un fichier .txt que vous pouvez envoyer à votre développeur ou enregistrer pour comparer les résultats après avoir appliqué des modifications.

Sous le capot

La version 1.1.8 tente de fournir des diagnostics approfondis afin d'économiser du temps dans la console du navigateur.

• Identification précise du LCP : Le plugin détecte exactement quel élément (image ou bloc de texte) a déclenché le Largest Contentful Paint.
• Analyse de la profondeur du DOM : Cruciale pour éviter la "taille excessive du DOM". L'auditeur de vitesse analyse le nombre de nœuds par zone (en-tête, contenu, pied de page) et vous avertit si l'imbrication dépasse 15 à 20 niveaux.
• Moniteur de latence des médias : Mesure le temps de transfert réel (Resource Timing API) des images. Si le téléchargement d'une image prend 500 ms, le plugin la marque comme critique.
• Aucun impact sur le serveur : Tout le traitement se fait du côté du client (navigateur). Il n'y a pas de lourdes requêtes de base de données ou de processus PHP qui ralentissent le site.

Le grand saut. Bientôt disponible : Speed Auditor 1.1.9 (avec "Radar CLS")

Jusqu'à présent, le décalage cumulatif de la mise en page (CLS) était un chiffre abstrait dans un rapport. Vous saviez que quelque chose bougeait, mais vous ne saviez pas toujours quoi. Très bientôt, dans la version 1.1.9, cela changera.

Le bouton "Highlighter" du radar ou du CLS visuel doit être introduit.

Imaginez que vous activiez un mode "radar" qui dessine des boîtes rouges sur tous les éléments qui se déplacent pendant que vous faites défiler la page. Ceci, que certaines extensions font déjà, avec plus ou moins de succès, est toujours une aide visuelle très utile pour essayer d'attraper ces "débordements" qui échappent parfois à l'œil.

• S'agit-il d'une bannière AdSense qui pousse votre contenu ? Vous la verrez dans un cadre rouge. Vous pouvez approfondir ce problème ici.
• S'agit-il d'une image sans dimensions définies ? Le radar la détectera.
• Persistance totale : Vous pourrez naviguer sur l'ensemble de votre site web avec le radar activé ; le plugin se souviendra que vous souhaitez continuer à vérifier visuellement chaque recoin.

Cette mise à jour comprendra également un court glossaire technique, qui sera complété par des conseils et des tutoriels, qui seront intégrés dans votre tableau de bord WordPress, de sorte que des termes tels que ins, iframe ou figure ne seront plus un mystère.

L'idée est d'améliorer à la fois la réponse de l'analyse et les rapports générés au fur et à mesure que je la teste dans différents scénarios et que je reçois des suggestions d'amélioration ou des avertissements d'erreurs.

La version 1.1.8 est maintenant disponible pour mettre de l'ordre dans vos métriques, et bientôt, la version 1.1.9 permettra de corriger encore plus facilement la stabilité visuelle de WordPress. Si vous l'installez maintenant, vous recevrez la mise à jour sous peu.

Comment cela fonctionne-t-il ?

Le code suit ces trois étapes :

1. L'observateur de performance

Le navigateur (Chrome, Edge, Opera) dispose d'une API native appelée Performance API. Le plugin enregistre un "observateur" appelé PerformanceObserver spécifiquement configuré pour le type d'entrée "layout-shift".

Chaque fois qu'un élément se déplace sur l'écran après avoir été initialement peint, le navigateur génère un événement. Le plugin piège cet événement et extrait deux données essentielles :

• La valeur du décalage : (Ce nombre est de 0,0145).
• L'élément coupable : Le navigateur indique au plugin quel nœud HTML a été déplacé.

2. Le filtre "Interaction récente

C'est ici que le plugin essaie d'être intelligent. Tous les mouvements ne sont pas "mauvais". Si vous cliquez sur un menu déroulant et que le contenu défile vers le bas, c'est une action attendue de l'utilisateur.

Le plugin vérifie une propriété appelée hadRecentInput. Si vous avez touché une touche ou cliqué au cours des 500 dernières ms, le navigateur marque ce mouvement comme "attendu" et le plugin l'ignore pour éviter les faux positifs. Il ne détecte que les mouvements qui se produisent de manière inattendue (comme l'apparition soudaine d'une publicité).

3. Rendu visuel (les cases rouges)

Une fois que le plugin dispose de l'élément qui a été déplacé, la partie visuelle entre en jeu :

1. Calcul des coordonnées : Utilise une fonction appelée getBoundingClientRect() pour déterminer l'emplacement de l'élément sur l'écran à ce moment précis (pixel vers le haut, pixel vers la gauche).
2. Injection de cadre : Créez une div avec une position absolue, une bordure rouge de 2px et un z-index très élevé pour dessiner au-dessus de tout.
3. L'étiquette : Ajoutez une petite boîte en haut à gauche de la boîte rouge avec le nom de l'étiquette (ins, img, div) et la valeur du CLS accumulé.

Pourquoi est-ce mieux qu'un rapport externe ?

Des outils tels que PageSpeed ne détectent parfois pas les CLS parce qu'ils ne font pas défiler la page jusqu'en bas ou n'attendent pas le chargement de certaines publicités.

Le plugin, en utilisant la persistance, mesure le CLS accumulé tout au long de la session de navigation de l'utilisateur. Si un élément bouge un peu au début et un peu lors du défilement, le plugin l'additionne et le met en évidence, ce qui vous donne le chiffre réel le plus approximatif que Google finira par voir dans son rapport"Chrome User Experience" (CrUX).