WordPress publie deux plugins pour accélérer les pages Web

L'équipe WordPress Core Performance a publié deux plugins qui accélèrent les pages Web grâce à de nouvelles technologies qui pré-rendu les URL avant qu'un utilisateur clique sur un lien et accélère les images chargées paresseusement.

Équipe de performance principale de WordPress

L’équipe WordPress Core Performance est responsable de la coordination avec les différentes équipes de développement principales de WordPress dans le but d’améliorer les performances et également de travailler sur des projets qui ont un impact direct sur l’amélioration des performances de base de WordPress.

Le plan initial de l'équipe de performance consistait en :

• diriger la formation des groupes de travail
• coordonner les premières tâches administratives (canal Slack, réunions hebdomadaires, planifier les nominations des représentants des groupes de travail, etc.)
• créer un énoncé de mission pour l'équipe
• coordonner les domaines à aborder
• décrire la portée et la feuille de route

Plugins de performances WordPress

Certaines des améliorations de performances apportées à WordPress sont d’abord testées dans des plugins avant d’être ensuite intégrées dans une future version de WordPress.

Les utilisateurs qui téléchargent les plugins peuvent être les premiers au monde à utiliser et à bénéficier des améliorations de vitesse des pages Web et il est attendu (espéré) que ceux qui utilisent les plugins fourniront également des commentaires sur leurs expériences, à la fois positives et négatives.

Le premier et le plus populaire plugin publié par Performance Team est le plugin Performance Lab qui comprend cinq modules qui peuvent être activés ou désactivés en fonction des besoins de l'utilisateur.

Les modules actuels du plugin Performance Lab sont :

• Images en couleurs dominantes :
  Ajoute la prise en charge du stockage de la couleur dominante des images nouvellement téléchargées et crée un arrière-plan réservé de cette couleur.
• Bilan de santé du support WebP :
  Ajoute une vérification de la prise en charge WebP dans l’état de santé du site.
• Téléchargements WebP :
  Crée des versions WebP pour les nouveaux téléchargements d'images JPEG si pris en charge par le serveur.
• Bilan de santé des actifs mis en file d’attente :
  Ajoute une vérification des ressources CSS et JS dans l’état de santé du site.
• Bilan de santé des options chargées automatiquement :
  Ajoute une vérification des options chargées automatiquement dans l'état de santé du site

Deux nouveaux plugins de performances

Les deux nouveaux plugins annoncés aujourd'hui sont :

1. Tailles automatiques pour les images chargées paresseusement
2. Règles de spéculation

Les deux plugins améliorent les performances de deux manières différentes, ce qui signifie qu'ils peuvent tous deux être utilisés pour obtenir le plus grand nombre d'améliorations.

Nouveau plugin WordPress de tailles automatiques

Le chargement différé est une technique d'optimisation des performances qui diffère (suspend) le chargement des images non critiques pour améliorer les temps de chargement des pages. Les images nécessaires au rendu de la partie visible de la page Web sont chargées en premier tandis que celles qui ne sont pas nécessaires sont différées jusqu'à ce que l'utilisateur fasse défiler et que les images soient nécessaires.

Ce plugin intègre un nouvel attribut HTML à chargement paresseux appelé tailles = "auto" qui définit l'attribut "sizes" sur "auto" pour les images chargées paresseusement à l'aide de "srcset" et accélère le téléchargement des images qui seront nécessaires lorsque l'utilisateur fait défiler la page.

L'attribut size=”auto” pour les images fait partie de la spécification des images réactives en HTML, mais il n'est pas spécifiquement lié au chargement différé. Au lieu de cela, l'attribut size est utilisé avec srcset pour fournir au navigateur les dimensions de taille d'image nécessaires pour afficher l'image dans différentes tailles de fenêtre. Le navigateur est alors capable de sélectionner la source d'image la plus appropriée dans le srcset.

Nouveau plugin de règles de spéculation WordPress

Le plugin Speculation Rules exploite l'API Speculation Rules afin de télécharger les ressources des pages Web qu'un utilisateur est susceptible de demander. Le plugin Speculation Rules prédit essentiellement qu'une page sera demandée et commencera à pré-afficher la page Web avant qu'un utilisateur ne clique sur un lien.

La description officielle du plugin explique :

"Utilise l'API des règles de spéculation pour pré-afficher les URL liées au survol par défaut."

L'API des règles de spéculation est une fonctionnalité conçue pour améliorer les performances de la navigation Web en permettant aux pages Web de fournir des indications au navigateur sur les liens potentiels sur lesquels un utilisateur pourrait cliquer pour accéder à une autre page Web. Le navigateur peut ensuite pré-extraire ou pré-afficher les ressources en fonction de la probabilité qu'un visiteur du site clique sur un lien pour accéder à une nouvelle page Web.

La page des développeurs Mozilla pour l' API Spéculation Rules explique :

« L'API Spéculation Rules est conçue pour améliorer les performances des navigations futures. Il cible les URL de documents plutôt que des fichiers de ressources spécifiques, et est donc logique pour les applications multipages (MPA) plutôt que pour les applications monopages (SPA).

L'API Spéculation Rules offre une alternative à l'API largement disponible fonctionnalité et est conçu pour remplacer le Chrome uniquement obsolète fonctionnalité. Il apporte de nombreuses améliorations par rapport à ces technologies, ainsi qu'une syntaxe plus expressive et configurable pour spécifier quels documents doivent être préchargés ou pré-rendus.

La mise en œuvre du plugin nécessite l'utilisation d'au moins Chrome 121. Les utilisateurs qui visitent un site en utilisant un autre navigateur qui ne prend pas en charge l'API Speculation Rules ne seront en aucun cas affectés, la page Web s'affichera comme elle le ferait normalement.

D'après la documentation du plugin :

« Par défaut, le plugin est configuré pour pré-afficher les URL du frontend WordPress lorsque l'utilisateur survole un lien pertinent. Cela peut être personnalisé via la section « Règles de spéculation » sous Paramètres > Lecture .

Un filtre peut être utilisé pour exclure certains chemins d'URL de l'éligibilité à la prélecture et au prérendu (voir la section FAQ). Alternativement, vous pouvez ajouter la classe CSS 'no-prerender' à n'importe quel lien ( tag) qui ne doit pas être pré-rendu.

Apprenez-en plus sur les nouveaux plugins de performances WordPress et téléchargez-les ici :

Tailles automatiques WordPress pour le plugin d'images chargées paresseusement

Plugin de règles de spéculation WordPress

Image en vedette par Shutterstock/Haali