Une vue d'ensemble de l'API des règles de spéculation dans WordPress et de ses implications

Pour tirer parti de l'API des règles de spéculation dans WordPress, l'équipe chargée des performances de WordPress (y compris des développeurs de Google) a récemment publié un plugin de chargement de spéculation. Ce plugin précharge les URL frontales des liens d'une page afin d'améliorer la vitesse de chargement de la page.

Par défaut, ce plugin prérend l'URL de WordPress lorsque l'utilisateur survole le lien correspondant. Vous pouvez trouver l'URL dans le champ "mettre en place">"lire">"Vraisemblablement chargé"pour personnaliser ces paramètres.

La personnalisation du plugin de chargement spéculatif dans les paramètres d'administration de WordPress est très simple. Cela signifie que tous les liens de la page seront chargés en fonction de la valeur prédéfinie "moyenLa configuration "eagerness" effectue un pré-rendement, qui démarre lorsque vous survolez le lien. Par conséquent, après avoir activé le plugin, vous n'avez pas besoin de faire quoi que ce soit de plus ; il fonctionne immédiatement.

Par exemple, si vous avez installé le plugin Push to Load sur votre site WordPress, vous pouvez utiliser Chrome DevTools pour inspecter le site et cliquer sur l'onglet Elements. En faisant défiler la page, vous remarquerez que diverses règles spéculatives ont été ajoutées pour vous, telles que <script type="speculationrules">.

Le plugin utilise des expressions régulières pour spécifier les liens qui doivent être pré-rendus, exclure les liens qui ne sont pas pré-rendus et définir l'empressement du pré-rendement. La section suivante explique ces règles en détail.

Restrictions pour éviter la surutilisation

Chrome fixe certaines limites pour éviter que l'API ne soit trop utilisée :

Ces limites sont fixées en fonction de l'urgence et de l'interaction avec l'utilisateur.

• immédiate et enthousiasteCes paramètres ne dépendent pas de l'action de l'utilisateur et sont donc plus restrictifs. Ils permettent un ajustement dynamique de la capacité en supprimant d'anciens pré-rendus pour en ajouter de nouveaux.
• modérés et conservateursCes réglages sont déclenchés par l'action de l'utilisateur et suivent le principe du premier entré, premier sorti (FIFO), avec une limite supérieure de 2. Lorsqu'un nouveau prérendu est ajouté, le prérendu le plus ancien est remplacé afin d'économiser de la mémoire.

Empêcher certains URL d'être pré-tracés et pré-rendus

Attention :Par défaut, les routes WP-admin sont exclues du pré-rendering et du prefetching. En tant que développeur WordPress, vous pouvez choisir les routes à privilégier.

Vous pouvez utiliser des filtres plsr_speculation_rules_href_exclude_paths Autodéfinition des types d'URL à exclure du préchargement spéculatif.

L'exemple de code suivant garantit que quelque chose comme https://wordpresssite.com/cart/ peut-être https://wordpresssite.com/cart/book/ Les URL ne seront pas pré-tracés ni pré-rendus :

add_filter('plsr_speculation_rules_href_exclude_paths', function($exclude_paths) {
    $exclude_paths[] = '/cart/' ;
    $exclude_paths[] = '/cart/book/' ;
    return $exclude_paths ;
}).

Il se peut que vous souhaitiez exclure certaines URL du prérendu, tout en autorisant le prérendu. Par exemple, une page qui utilise le JavaScript côté client pour mettre à jour l'état de l'utilisateur n'est pas adaptée au pré-rendement, mais le préfetching a du sens.

plsr_speculation_rules_href_exclude_paths Le filtre reçoit le mode actuel (prélever peut-être prérendre) pour l'exclusion conditionnelle.

Par exemple, le code suivant assure la similitude https://wordpresssite.com/products/ Les URL ne peuvent pas faire l'objet d'un pré-rendu, mais peuvent toujours faire l'objet d'un pré-rendu :

add_filter('plsr_speculation_rules_href_exclude_paths', function($exclude_paths, $mode) {
    if ($mode === 'prerender') {
        $exclude_paths[] = '/products/';
    }
    return $exclude_paths;
}, 10, 2);

Débogage des règles spéculatives pour les sites web WordPress

Le débogage des règles spéculatives peut s'avérer délicat car les pages pré-rendues sont rendues dans un moteur de rendu distinct, comme un onglet d'arrière-plan caché qui remplace l'onglet actuel lorsqu'il est activé. Pour résoudre ce problème, l'équipe Chrome a apporté un certain nombre d'améliorations dans DevTools afin de faciliter le débogage.

Dans Chrome DevTools, naviguer vers "application"et descendez jusqu'à la section Speculative Loads (chargements spéculatifs). Cette section fournit aux développeurs des informations détaillées sur les URL spéculatives, les URL pré-rendues, les URL qui ont échoué, etc.

Vous pouvez voir qu'il y a cinq liens sur la page qui peuvent être pré-rendus sur la base des paramètres de la règle spéculative JSON. Il n'est pas nécessaire d'énumérer toutes les URL ; la règle de document permet au navigateur de les récupérer automatiquement à partir des mêmes liens sources de la page.

Certains des liens de la section "état des lieux"est affiché comme "Non déclenché", ce qui signifie que le processus de pré-rendement pour ces liens n'a pas encore commencé. Lorsque nous survolons les liens sur la page, nous voyons l'état de chaque URL changer pendant le pré-rendement.

Chrome fixe des limites au pré-rendement, par exemple mode modéréAu maximum, deux URL peuvent être pré-rendus dans cette section. Lorsque nous survolons le troisième lien, nous voyons la raison de l'échec du pré-rendement pour cette URL.

Vous pouvez également utiliser le menu déroulant dans le coin supérieur droit ou sélectionner l'URL en haut du panneau et choisirContrôlerpour changer le moteur de rendu utilisé par le panneau DevTools :

Cette liste déroulante (et la valeur sélectionnée) est utilisée dans tous les autres panneaux (tels que le panneau"Réseau". ) est partagé entre eux, dans lequel vous pouvez voir que la page demandée est une page pré-rendue :

ouÉléments pour voir le contenu de la page :

Tout comme vous pouvez déboguer les pages pré-rendues, vous pouvez déboguer les pages préfabriquées. Pour "Chargement spéculatif"plug-in, assurez-vous de sélectionner "présélection"comme"modèle spéculatif".

Maintenant, lorsque vous utilisez DevTools pour inspecter la page et naviguer vers "Chargement spéculatifSi vous cliquez sur l'onglet "Recherche", vous verrez différentes URLs recherchées et les règles correspondantes seront modifiées.

Lorsque vous survolez le lien et que vous naviguez vers "réticulation"Les ressources préfixées sont affichées à la fin de la liste, comme par exemple "typologie"est affichée. Ces ressources sont récupérées avec la priorité la plus faible parce qu'elles sont destinées à la navigation future et que Chrome charge d'abord les ressources nécessaires à la page en cours.

Impact de l'API des règles spéculatives sur l'analyse

L'analyse est essentielle pour suivre l'utilisation du site (par exemple, les pages vues et les événements) et évaluer les performances par le biais du suivi des utilisateurs réels (RUM). Il est important de noter que le pré-rendu peut affecter les données analytiques.

Par exemple, l'utilisation de l'API Speculative Rules peut nécessiter un code supplémentaire pour garantir que les analyses ne sont activées que lorsque la page pré-rendue est effectivement visitée. Google Analytics, Google Publisher Code (GPT) et Google AdSense retardent le suivi jusqu'à ce que la page soit active, mais tous les fournisseurs d'outils d'analyse ne le font pas par défaut.

Pour contourner ce problème, vous pouvez mettre en place une promesse pour initialiser l'analyse uniquement lorsque la page est activée :

document.addEventListener('prerenderingchange', function(event) {
    if (!event.isPrerendering) {
        // Initialise le code d'analyse
    }
}) ;

résumés

Cet article décrit ce qu'est l'API Règles de présomption, comment elle fonctionne et comment l'utiliser sur un site WordPress. Bien qu'il s'agisse encore d'une fonctionnalité expérimentale, elle est en train d'être largement adoptée.

Le plugin utilise des liens préchargés sur la page pour que la page pré-rende l'URL correspondante lorsque l'utilisateur survole le lien, et les règles de pré-rendement peuvent être facilement personnalisées dans les paramètres de WordPress. Le plugin utilise des expressions régulières pour définir les liens qui doivent être pré-rendus et dispose d'un mécanisme pour éviter la surutilisation.