Comment le chargement spéculatif améliore la vitesse des pages sur les sites WordPress

Aujourd'hui, les pages web sont remplies d'images, de vidéos et d'éléments interactifs conçus pour améliorer l'expérience de l'utilisateur. Toutefois, ces éléments peuvent ralentir le temps de chargement d'une page web. Si la technologie ne cesse de s'améliorer, un objectif reste constant : la performance. Tout le monde veut que ses pages web se chargent à la vitesse de l'éclair. L'un des moyens d'accélérer le chargement des pages web consiste à les prérendre ou à les récupérer avant que l'utilisateur ne les consulte.

Une brève histoire du pré-rendu

En 2011, l'équipe de Chromium a introduit les onglets dans Chrome afin d'offrir un moyen deLes premières formes de pré-enduction<link rel="prerender" … >.

De cette manière, le développeur peut avertir le navigateur des pages que l'utilisateur est susceptible de visiter ensuite. Le navigateur récupère alors silencieusement ces pages et les rend en arrière-plan, ce qui réduit considérablement le temps de chargement lorsque l'utilisateur consulte ces pages.

Malgré ses avantages, cette fonction de pré-rendus précoces utilise beaucoup de bande passante et de ressources de l'unité centrale, et peut entraîner des problèmes de confidentialité si les utilisateurs ne visitent pas les pages pré-rendues. En outre, vous devez sélectionner manuellement les liens à pré-rendre, ce qui n'est pas toujours efficace ou faisable.

Pour remédier à certains de ces problèmes, Chrome a supprimé l'utilisation de liens vers le fichierrel=prerenderLe pré-rendement des indices, en faveur desNoState Prefetch La méthode NoState Prefetch améliore le chargement des ressources, mais ne permet pas un chargement instantané de la page comme le ferait un pré-rendering complet.

Introduction à l'API des règles spéculatives

Règles spéculatives APIest une nouvelle API expérimentale définie par JSON qui précharge spéculativement les URL avant d'y naviguer, réduisant ainsi le temps de rendu et améliorant l'expérience de l'utilisateur.

L'API permet aux développeurs de configurer des règles à l'aide de structures définies au format JSON.script type="speculationrules"Le navigateur peut utiliser cette structure pour déterminer quelles URL doivent être pré-rendues.

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["firstpage.html", "secondpage.html"]
    }
  ]
}
</script>

Il en va de même pour la recherche préalable, qui constitue généralement la première étape du pré-rendement :

<script type="speculationrules">
{
  "prefetch": [
    {
      "urls": ["firstpage.html", "secondpage.html"]
    }
  ]
}
</script>

L'extrait de code ci-dessus montre comment fonctionne l'API Règles spéculatives en spécifiant une liste d'URL à prélever ou à prérendre. Récemment, Google a annoncé la création de l'APIUne nouvelle amélioration de l'API des règles spéculatives permet désormais d'utiliser la fonctionOption permettant de trouver automatiquement des liens à l'aide des règles du document. Pour ce faire, l'URL est extraite du document en fonction des critères suivantsoù.

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "href_matches": "/*"
          },
          {
            "not": {
              "href_matches": [
                "/wp-login.php",
                "/wp-admin/*"
              ]
            }
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

Dans cet extrait de code, toutes les URL de la page sont prises en compte pour le pré-rendu, à l'exception de celles qui pointent vers les pages de connexion et d'administration de WordPress. vous pouvez également spécifier le niveau deempressement– avide(immédiatement),modéré(200 millisecondes en survol) etconservateur(souris ou contact avec le sol).

CSSLes sélecteurs peuvent également être utilisés comme alternative ou en combinaison avec les correspondances.hrefPermet de trouver des liens sur la page en cours :

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "selector_matches": ".prerender" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Lorsque vous utilisez l'API Règles de présomption, vous pouvez utiliser Chrome pour vérifier la page lorsqu'elle doit l'être.Vérifier avec le service d'arrière-plan "Charge spéculative" dans l'onglet Programmes.

Il y a encore d'autres choses à faire, que nous verrons dans la section consacrée au débogage.

Support des navigateurs

À partir de certaines versions, les navigateurs modernes basés sur Chromium (y compris Chrome et Edge)Les deux soutiennent les règles spéculatives de l'API.

L'API étant une amélioration progressive, elle garantit que les utilisateurs des navigateurs pris en charge bénéficient de temps de chargement plus rapides, tandis que les utilisateurs d'autres navigateurs ne subissent aucun impact négatif.

Plugin WordPress de chargement spéculatif

Pour tirer parti de l'API de règles spéculatives de WordPress, l'optionL'équipe de performance de WordPress (y compris des développeurs de Google) a récemment publié lePlug-ins probablement chargés. Le plugin permet de déduire l'URL frontale du lien sur la page chargée.

Jusqu'à présent, le plugin a eu un faible taux d'adoption en raison du fait que l'API n'en est qu'à ses débuts, mais il a recueilli quelques critiques favorables.

Par défaut, le plugin est configuré pour pré-présenter l'URL frontale de WordPress lorsque l'utilisateur survole le lien correspondant.mettre en place >lire inférieurVraisemblablement chargépour la personnalisation.

Cela signifie que tous les URL liés à la page utiliseront l'attributempressementconfiguration pour le pré-renderingmodéréCette configuration est généralement déclenchée lors du survol d'un lien. Par conséquent, vous n'avez pas besoin d'effectuer d'action après avoir activé le plugin ;Il fonctionne dès sa sortie de la boîte..

Par exemple, si vous avez déjà installé le logicielChargement spéculatifPlugin. Utilisez Chrome DevTools pour inspecter le site et cliquez sur le boutonÉléments Onglet. Lorsque vous faites défiler l'écran vers le bas, vous remarquez que l'onglet qui a étéscript type="speculationrules"Ajout de plusieurs règles spéculatives pour vous.

Il utilise des Regex pour spécifier les liens qui doivent être pré-rendus, pour spécifier les liens qui ne doivent pas être pré-rendus et pour définir le niveau d'empressement. Ces règles sont expliquées plus en détail ci-dessous.

Empêcher la recherche et la présentation préalables de certains URLs

Notez que, par défaut, l'option WP-adminLe routage est exclu du pré-rendering et du prefetching. En tant queDéveloppeur WordPressLes utilisateurs peuvent décider des itinéraires qu'ils souhaitent privilégier.

Vous pouvez utiliser leplsr_speculation_rules_href_exclude_pathsLe filtre personnalise les règles de déduction du type d'URL qui sont préchargées.

L'exemple de code suivant garantit que l'URL est similairehttps://wordpresssite.com/cart/peut-êtrehttps://wordpresssite.com/cart/book/seront exclues de la recherche préalable et du pré-rendement :

<?php

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

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

Étant donné que 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é, le débogage des règles spéculatives peut s'avérer délicat.

Dans Chrome DevTools, naviguez jusqu'à l'onglet"Applications" puis faites défiler vers le bas jusqu'à l'onglet"Chargement spéculatif". onglet. Il fournit aux développeurs des informations détaillées sur la spéculation, les URL pré-rendues, les URL qui ont échoué, etc.

Ici, vous pouvez voir que les cinq liens de la page peuvent être pré-rendus sur la base des URL qui correspondent aux règles définies dans le JSON des règles spéculatives, comme indiqué ci-dessous. Notez qu'il n'est pas nécessaire d'énumérer toutes les URL ; la règle de document permet au navigateur de récupérer ces URL à partir des mêmes liens sources de la page.

Le "statut" de certains liens indique "Non déclenché". Le processus de pré-rendement de ces liens n'a pas encore commencé. Toutefois, lorsque nous survolons les liens sur la page, nous constatons que l'état change au fur et à mesure que chaque URL est pré-rendu.

Chrome fixe des limites au prérendu, notamment un maximum de deux prérendu pour une urgence moyenne, de sorte qu'après avoir survolé le troisième lien, nous voyons la raison de l'échec de 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 :

La 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 aussi préfacer les pages. Pour le plugin "speculative loading", assurez-vous de sélectionner l'option"Prefetch" agir en tant que"Mode spéculatif.

Maintenant, lorsque vous utilisez la page d'inspection DevTools et que vous naviguez vers l'onglet Chargement spéculatif, procédez comme suitcommandant en chef (militaire) La recherche préalable est effectuée pour différents URL et les règles changent.

Survolez le lien et naviguez jusqu'àLorsque l'onglet "Réseau" est sélectionné, les ressources préfixées s'affichent à la fin, comme par exemple"Type"sont affichées. Ces ressources sont récupérées avec la priorité la plus basse car elles sont destinées à une navigation future et Chrome donne la priorité aux ressources de 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 le biais des pages vues et des événements et pour évaluer les performances par le biais du suivi des utilisateurs réels (RUM). Il est important de savoir que le pré-rendu affecte les analyses.

Par exemple, l'utilisation de l'API Speculative Rules peut nécessiter un code supplémentaire pour activer l'analyse uniquement lorsqu'une page pré-rendue est effectivement consultée. Google Analytics, Google Publisher Code (GPT) et Google AdSense retardent le suivi jusqu'à ce que la page soit active, mais ce n'est pas le cas de tous les fournisseurs par défaut.

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

// Promesse d'activation de l'analyse lors de l'activation de la page pour les pages pré-rendues
const whenActivated = new Promise((resolve) => {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve) ; } else {
  } else {
    resolve() ;
  }
}).

async function initAnalytics() {
  await whenActivated ; // Initialise l'analyse.
  // Initialise l'analyse.
}

initAnalytics() ;

résumés

Cet article explique ce qu'est l'API Speculative Rules, comment elle fonctionne et comment l'utiliser sur un site WordPress. Il s'agit d'une fonctionnalité encore expérimentale, mais dont l'adoption se généralise progressivement. Les règles spéculatives sont encore limitées aux pages d'un même onglet, mais des efforts sont faits pour réduire ces limitations.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.