Évolution des tactiques Core Web Vitals à l'aide de Cloudflare et WebpageTest

Dans notre guide des tactiques Core Web Vitals utilisant Cloudflare et WebpageTest, nous avons décrit les exigences de base pour utiliser Cloudflare comme proxy inverse pour tester les modifications HTML tactiques avec WebpageTest. Notre version du test est simplifiée à partir du concept original de Patrick Meenan, qui utilise HTMLRewriter() pour sélectionner un élément et modifier le code.

Nous approfondissons ce didacticiel, mais si vous recherchez simplement le script Cloudflare Worker, vous pouvez le trouver ici.

Notre premier versement a noté qu'il ne suivrait pas les changements à Search Engine Land. Le LCP était codé en dur et nous en aurions besoin pour interagir avec une page dynamique et ses valeurs. Bien que WebpageTest ait, au moment de la publication, le graphique en cascade le plus bien pensé et plus de détails que vous ne pouvez l'imaginer, ce n'est pas le moyen le plus rapide d'obtenir des résultats.

Phare depuis la ligne de commande

L'exécution du programme Lighthouse CLI (Command Line Interpreter) avec les options --extra-headers nécessaires au test nous permet également de simuler les paramètres standard pour Core Web Vitals comme nous l'avons fait avec WebpageTest. Vous devrez travailler à partir d'un émulateur de terminal.

Le moyen le plus simple d'installer Lighthouse est d'utiliser NPM (Node Package Manager). Une fois installé, exécutez l'instruction suivante :

$ lighthouse https://sel.deckart.workers.dev \
--extra-headers "{\"x-host\":\"searchengineland.com\", \"x-bypass-transform\":\"false\"}" \
--form-factor=mobile \
--throttling.cpuSlowdownMultiplier=4 \
--only-categories=performance \
--view

L'évolution de notre banc d'essai

Notre objectif est de démontrer une évolution d'un concept original de banc d'essai à un projet adapté à nos futurs événements et articles. Le banc d'essai ne doit pas se limiter à l'exécution d'évaluations de performances ; c'est juste là que nous allons commencer. Mais cela doit fonctionner assez bien dans un certain nombre de situations avec des sites Web, ce qui peut s'avérer assez difficile. Nous fournirons des méthodes pour vous aider.

Par exemple, les sites utilisent souvent des chemins relatifs vers les ressources d'actifs plutôt qu'absolus (avec le protocole HTTP et tout). Nous fournirons un bloc correspondant à ceux-ci afin que HTML fonctionne généralement. Après avoir appliqué cela, lorsque les choses ne fonctionnent toujours pas, la commutation des références gênantes entre les noms d'hôte du test et du sujet du test fait souvent l'affaire, même pour les violations de la politique CORS.

C'est là que la beauté de HTMLRewriter() de Cloudflare brille vraiment. Les actifs à l'échelle du site sont généralement chargés en tant qu'éléments enfants HEAD de la page. Avec une correspondance flexible comme jQuery, même une syntaxe similaire, nous pouvons sélectionner des éléments enfants de HEAD si nécessaire. Vous pouvez utiliser des sélecteurs XPath et des expressions régulières. Restons simples et recherchons des chemins relatifs commençant par "/" pour les attributs src ou href :

 return new HTMLRewriter() .on('link', { element: el => { const link_href = el.getAttribute('href'); if (link_href && link_href.startsWith('/')) { el.setAttribute('href', 'https://' + host + link_href); } } }) .on('script', { element: el => { const script_src = el.getAttribute('src'); if (script_src && script_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + script_src); } } }) .on('img', { element: el => { const img_src = el.getAttribute('src'); if (img_src && img_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + img_src); } } })

Nous tirons parti de la puissance (et de la rentabilité) de Edge Computing pour effectuer des tests très utiles. Modifiez l'en-tête de requête x-host pour charger différents sites dans le banc d'essai et ouvrez DevTools. Les transformations peuvent ne pas être nécessaires, mais votre kilométrage variera. L'expérience frontale vous en donne une idée.

Les blocs de commentaires comme les commutateurs échoueront et nécessiteront un peu d'expérimentation (ce qui peut être tout ce dont vous avez besoin). Par exemple, certaines références d'actifs peuvent être orthographiées sans deux-points HTTP. Vous auriez besoin d'écrire une autre condition pour vérifier les chemins où href ou src commence par "//", puis modifier la valeur de l'élément sélectionné dans le script. Essayez de vous retrouver sans erreurs de console que le site réel n'a pas.

Lighthouse vous donne LCP

Il est relativement facile de récupérer des références LCP à l'aide de Lighthouse, PageSpeed ​​Insights ou WebpageTest. En supposant que le LCP se qualifie pour le préchargement, comme lorsqu'il ne s'agit pas d'un <div> ou d'un <p> , et lorsqu'il n'est pas déjà préchargé, fournissez à notre script la valeur href par la structure URL 'query param' (ou renvoyez HTML avec un form) pour tester les modifications apportées au minutage LCP d'une page avec préchargement.

La plupart des praticiens techniques du référencement sont habiles à modifier les paramètres de requête de requête pour traiter différentes choses dans les programmes côté serveur, comme les résultats de recherche Google. En utilisant la même interface, notre script préchargera le LCP en utilisant le chemin que vous appliquez dans la valeur du paramètre "lcp" et le transmettra à une fonction appelée addPreloadAfter() pour interpoler le HTML pour le test.

 async function handleRequest(request) { const { searchParams } = new URL(request.url); let lcpHref = searchParams.get("lcp"); return new HTMLRewriter() .on('title', addPreloadAfter(lcpHref)) .transform(newResponse); }

La fonction addPreloadAfter() prend notre valeur "lcpHref" de searchParams.get() et la traite comme "href" pour construire le HTML.

 const addPreloadAfter = (href) => ({ element: (el) => { el.after(`<link rel="preload" href="${href}" />`, { html: true }); } });

Remarquez l'option "html : vrai" ? Il s'agit d'un paramètre d'option requis par Cloudflare pour des raisons de sécurité lors de l'utilisation de Workers avec des méthodes d'API HTMLRewriter() qui écrivent du HTML. Vous allez vouloir apprendre ses capacités et ses contraintes pour coder vos propres tests.

KV de Cloudflare

Si nous voulons faire quelque chose d'intéressant à distance, nous avons besoin d'un moyen de stocker des données persistantes entre les exécutions de scripts. Heureusement, Cloudflare propose également un petit mécanisme de stockage de données appelé KV que nous pouvons lier à nos travailleurs pour stocker un petit champ de données « value », accessible par sa « key ». Il est étonnamment facile à comprendre et à mettre en œuvre. Pour montrer comment l'utiliser, nous allons écrire un petit compteur de visites rapide.

 const counter = parseInt(await KV.get('counter') || 0); if (!host || counter > 1000) { return new Response('hit limit exceeded or x-host missing', {status: 403}); } else { await KV.put("counter", counter + 1); }

Recherchez l'élément de menu de navigation KV sous Travailleurs.

Une fois que vous avez créé un espace de noms ("SEL" est utilisé dans l'exemple ci-dessus), utilisez l'interface utilisateur du tableau de bord KV pour créer votre première clé (" counter " dans le cas ci-dessus) et attribuez une value de départ. Une fois configuré, revenez au tableau de bord Worker pour l'interface requise pour lier notre nouvel espace de noms KV avec Cloudflare Workers afin qu'ils puissent accéder aux clés et aux valeurs stockées associées.

Lier les espaces de noms KV aux nœuds de calcul

Choisissez le travailleur avec lequel vous souhaitez vous lier et cliquez sur son menu Paramètres pour trouver le sous-menu des variables (directement sous Général). Notez que vous pouvez définir des variables d'environnement, des liaisons d'objets durables (que nous explorerons dans un prochain article) et enfin des liaisons d'espace de noms KV. Cliquez sur Modifier les variables et ajoutez la variable que vous souhaitez utiliser dans le script.

Dans le cas suivant, vous pouvez voir notre variable nommée de manière redondante ' KV ' que nous utiliserons dans le script Worker associé, celui à partir duquel nous avons navigué. Notre utilisation de ' KV ' a été nommée à des fins d'illustration. Sélectionnez-le dans la liste déroulante, enregistrez-le et vous pourrez immédiatement utiliser votre variable dans le script. Créez autant de scripts et de combinaisons d'espaces de noms KV que vous le souhaitez.

L'astuce consiste à se rappeler de lier une variable que vous souhaitez utiliser dans le travailleur. Il est si flexible que vous pouvez vous sentir libre de faire des bêtises et de faire des dégâts au début. Vous pourrez probablement l'organiser en quelque chose de cohérent à une date ultérieure, ce qui est exactement ce que vous voulez pour pouvoir prototyper des applications ou créer des microservices à utiliser dans vos applications.

Une fois que vous avez configuré votre service KV et les valeurs de départ, revenez au Worker et ouvrez le "Quick Edit" intégré. Remplacez ce qui s'y trouve par cet essentiel mis à jour, qui inclut le compteur de visites et tout ce qui est écrit dans cet article. Cliquez sur "Enregistrer et déployer" et vous devriez avoir le service opérationnel sur votre URL de démonstration Workers accessible au public.

Pourquoi nous nous soucions

Notre guide original était destiné à aiguiser votre appétit, à vous donner envie de commencer et à vous enthousiasmer pour un apprentissage plus précieux. Afin de fournir cela, nous avons une combinaison de plate-forme et de code gratuite qui est assez simple à comprendre par elle-même, couplée à un processus qui devrait être assez facile à suivre et à obtenir un résultat de test.

La standardisation des tests de site Web pour démontrer le référencement aux développeurs ne devrait pas nécessiter de comprendre le code lorsque vous pouvez copier et coller le script dans Cloudflare, suivre les étapes et tester certaines tactiques de référencement. Les tests Core Web Vitals sont à peu près aussi fiables que nous allons l'obtenir pour améliorer les scores de performance RUM (Real User Metrics) afin d'améliorer le classement, compte tenu de la dépendance des métriques.

Vous voulez plus de SEO pour les développeurs ? Rejoignez-nous pour la formation SMX Master Class, dirigée par Detlef Johnson, les 8 et 9 mars 2022.