Fonctions pour Core Web Vitals Tactics avec HTMLRewriter de Cloudflare

Notre Guide des tests A/B pour Core Web Vitals a expliqué une série de petites étapes avec deux services et une extension de navigateur pour écrire des tests pour les tactiques de code frontal. Il y a trente ans, nous copions la source brute d'une page pour exécuter des opérations de recherche et de remplacement jusqu'à ce que nous puissions gérer un fac-similé d'une page placée dans un dossier Web pour démontrer les mêmes types de recommandations.

Nous n'avons plus à faire ça.

Il y a vingt ans, la mise en place d'un proxy inverse et d'un logiciel d'écriture pour le référencement était limitée à un petit groupe d'entreprises qui construisaient et hébergeaient elles-mêmes l'infrastructure. Cloudflare nous fournit désormais une solution clé en main. Vous pouvez être opérationnel en utilisant un compte gratuit. Pour modifier le code frontal, utilisez l'API JavaScript HTMLRewriter() de Cloudflare.

Le code est relativement facile à comprendre.

Avec Core Web Vitals, c'est l'immédiateté, le besoin perçu et la rapidité de pouvoir parcourir différents tests qui finalement montrent de la valeur et impressionnent vraiment. La plate-forme fondamentale est à votre disposition à travers les étapes décrites dans notre guide. Nous écrirons des fonctions pour apporter des modifications courantes afin que vous puissiez commencer à tester de vraies tactiques immédiatement.

HTMLRewriter()

Si vous avez suivi, vous savez peut-être que notre script offre la possibilité de précharger un élément que vous pouvez spécifier dans un paramètre de requête pour LCP. Nous renvoyons un formulaire lorsque la valeur est manquante, histoire de faciliter l'ajout de votre référence. Il existe également un espace réservé pour quelque chose appelé importance , que nous aborderons également. Ce qui est important, c'est de comprendre ce que nous allons faire.

L'API HTMLRewriter() nous donne la possibilité d'utiliser des sélecteurs d'éléments de style jQuery pour attacher des éléments HTML dans la source de la page brute afin d'exécuter JavaScript à partir de cet emplacement. Vous serez capable de modifier des éléments, un groupe entier d'éléments ou même le document de base de manière puissante. Vous pouvez modifier le titre d'une page, par exemple. En production, votre montage devient le titre et c'est ce qui est indexé chez Google et Bing.

Une complication que vous rencontrerez est que vous ne pouvez modifier que la source brute, pas un modèle d'objet de document (DOM) hydraté. Un moyen rapide d'afficher la source brute consiste à utiliser la fonctionnalité de source d'affichage intégrée du navigateur. Avec Firefox, view-source met en évidence les erreurs de validation en rouge, par exemple. Même lorsque les navigateurs "réparent" le code HTML défectueux, cela peut généralement être résolu avec notre Worker.

Fonctionnant dans DevTools, l'onglet "Sources" permet d'accéder à la source brute. Utilisez les paramètres de préférence pour toujours "joliment imprimer" la source, qui la formatera afin que vous puissiez scanner le code pour rechercher des optimisations. Une autre astuce de préférence est un paramètre pour contourner le cache lorsque DevTools est ouvert. Ce flux de travail vous aidera au fur et à mesure afin que vos optimisations n'entraînent pas d'erreurs de référence.

Sélecteurs d'éléments

Lorsque vous repérez quelque chose que vous souhaitez corriger avec HTMLRewriter() , vous devrez restreindre les modifications et isoler l'élément pour éviter de modifier plus de code que prévu. Utilisez le sélecteur le plus exclusif possible, ce qui peut être très facile lorsque les éléments ont des identifiants uniques. Sinon, recherchez un signe révélateur, tel qu'une référence à un emplacement unique dans les href ou src .

Vous trouverez la possibilité d'utiliser des caractères génériques et des expressions régulières de style vim en "mode commande" correspondant aux valeurs d'attribut. Vous pouvez également fournir plusieurs critères, même avec le même nom d'attribut. Utilisez vos pouvoirs vim pour restreindre les correspondances à des éléments uniques ou faire correspondre un groupe d'éléments avec des expressions plus larges. La logique peut alors séparer les préoccupations entre les changements.

Exemple de correspondance des éléments de lien de prélecture génériques "fonts.g" pour supprimer ceux de : fonts.googleapis.com.

 .on(`link[rel="dns-prefetch"][href*="fonts.g"]`, removeEl())

Exemple montrant deux correspondances pour l'attribut href , le réduisant à un seul fichier parmi d'autres.

 .on('link[href^="https://example.com/static/version"][href$="/print.css"]', unblockCSS())

Le premier exemple ci-dessus utilise cette correspondance générique où la chaîne "fonts.g" peut apparaître n'importe où dans l'attribut href des éléments de lien. Il s'agit d'un exemple de requête large qui peut être associée à plusieurs éléments de lien pour une action appropriée, comme la suppression du ou des éléments correspondants, le cas échéant.

Le deuxième exemple ci-dessus montre comment vous pouvez sélectionner un élément de lien particulier qui commence par une chaîne et se termine par une autre chaîne, mais qui peut avoir n'importe quoi entre. Ceci est utile pour sélectionner un seul élément qui fait partie d'un système de construction dans lequel il peut y avoir un répertoire de jetons de version pour le contournement du cache du navigateur qui est nommé dynamiquement.

Éléments de lien

Les éléments de lien sont multiformes en raison de leurs différents attributs. Ainsi, ils peuvent servir à plusieurs fins. À ne pas confondre avec les liens (comme dans les ancres), les éléments de lien sont généralement là où vous commencez à chercher des stratégies de performance rapides. Certains éléments de lien de préchargement et de préconnexion peuvent en fait gêner ou être totalement inutiles.

Vous n'obtenez qu'un maximum de six hôtes pour vous connecter simultanément. Votre première stratégie sera d'en tirer le meilleur parti. Essayez de supprimer toutes les instructions d'élément de lien d'indication de priorité et testez le résultat. Si les horaires ne vont pas dans le bon sens, ajoutez-les un par un et testez l'impact réel de chacun. Vous allez devoir apprendre à lire en profondeur le graphique en cascade de WebpageTest.

Ensuite, les tactiques vont au chargement des ressources, qui implique également des éléments de lien assez fortement, mais pas exclusivement. À ce stade, nous voulons également examiner les scripts. L'ordre dans lequel les ressources se chargent peut affecter les choses très négativement. Notre banc d'essai est parfait pour essayer diverses tactiques tirées de la lecture du graphique en cascade. Gardez le tiroir de la console de DevTools ouvert pour vérifier les erreurs pendant que vous travaillez.

Suppression d'éléments

La suppression d'éléments est exceptionnellement simple à faire. Une fois que vous avez sélectionné un élément, ou un groupe d'éléments, le champ suivant dans les HTMLRewriter().on() est l'endroit où vous écrivez un bloc de script. Vous pouvez le faire en place avec des accolades. Vous pouvez référencer une fonction nommée. Ou vous pouvez créer une nouvelle instance de class pour un objet défini précédemment, ce qui, dans ce contexte, peut être sur-ingénierie.

Lorsque vous rencontrez un exemple de code Worker, vous pouvez voir des initialiseurs class . Tout ce qui est vraiment nécessaire pour supprimer un élément est la fonction suivante. Tout ce qui est fait avec un objet de classe nommé peut être fait avec une fonction simple (objet) en utilisant moins de code, pour moins de bogues, avec une syntaxe plus lisible et beaucoup plus enseignable. Nous reviendrons sur les constructeurs class lorsque nous nous plongerons dans les objets durables.

 element: (el) => { el.remove(); }

En un mot, ce bloc définit une variable "el" en référence à l'instance de l'élément et le bloc de code appelle la méthode d'élément intégrée remove() , que vous trouverez détaillée dans la documentation correspondante. Toutes les méthodes d'élément HTMLRewriter() sont à votre disposition pour une utilisation avec des instances de vos correspondances d'éléments. La suppression d'éléments est l'une des plus simples à comprendre.

Déblocage des ressources de blocage de rendu

Débloquer des éléments de script est beaucoup plus simple que débloquer des ressources de feuille de style. Par chance, nous avons un attribut booléen pour signaler au navigateur que nous voulons charger un script de manière asynchrone ou le différer complètement (lorsqu'il y a un temps d'inactivité). C'est idéal ! Les feuilles de style, en revanche, ont besoin d'un petit "hack" pour les débloquer - elles nécessitent du Javascript en ligne.

Essentiellement, nous transformons une référence d'élément de lien de feuille de style en préchargement pour le débloquer. Mais cela change la nature de l'élément de lien en un élément où les règles de style ne seront pas appliquées. Précharger télécharge les ressources pour les stocker dans le cache local, prêt en cas de besoin, mais c'est tout. DevTools vous avertit lorsqu'une ressource est préchargée et n'est pas utilisée de manière appropriée - c'est alors que vous savez que vous pouvez la supprimer !

Le préchargement puis l'utilisation d'un attribut onload pour exécuter JavaScript pour le faire passer de préchargement à feuille de style est le "hack" CSS pour débloquer ce qui est autrement une ressource bloquant naturellement le rendu. L'utilisation du mot-clé this de JavaScript vous permet de modifier ses propriétés, y compris l' rel (et l'attribut onload lui-même). Le modèle a également un remplissage pour les sessions non-JavaScript.

Voici notre fonction unblockCSS() qui implémente la stratégie en utilisant des méthodes d'éléments prêtes à l'emploi.

 const unblockCSS = () => ({ element: (el) => { el.removeAttribute('media'); el.setAttribute('rel', 'preload'); el.setAttribute('as', 'style'); el.setAttribute('onload', "this.onload=null;this.rel='stylesheet';this.media='all'"); el.after(` `, { html: true }); }});

Sélectionnez les références de feuille de style d'élément de lien qui bloquent le rendu et appelez cette fonction sur celles-ci. Il permet au navigateur de commencer à télécharger la feuille de style en la préchargeant. Une fois chargé, l' rel revient à la feuille de style et les règles CSS sont immédiatement appliquées. Si des problèmes de style surviennent après ce changement, une ou plusieurs feuilles doivent être chargées dans l'ordre normal des requêtes.

La fonction agit comme un bloc de code réutilisable. Basculez vos sélections d'éléments à l'aide HTMLRewriter() et testez la différence en débloquant les feuilles CSS une par une ou par groupes, selon votre approche. Utilisez la tactique pour parvenir à une stratégie globale de déblocage autant que vous le pouvez. Cependant, n'oubliez pas de rechercher les problèmes résultant de modifications apportées aux ressources CSS et Script.

Priorités de script

L'ordre dans lequel vous chargez les styles peut brouiller la conception. Les règles de feuille de style à chargement rapide de manière inattendue seront écrasées par celles chargées plus lentement. Vous devez également surveiller le chargement des scripts dans un ordre alterné afin qu'ils soient évalués et résident en mémoire lorsque le document est évalué. Les erreurs de référence peuvent entraîner des dizaines ou des centaines d'erreurs de script.

La meilleure façon de vérifier les problèmes est de regarder le tiroir de la console et de simuler des connexions réseau lentes. Cela peut exagérer les problèmes au point qu'ils devraient être évidents dans DevTools. Si les ressources de script sont traitées à l'aide de processeurs plus puissants et se chargent à la vitesse du modem câble, ou plus rapidement, il est possible que vous manquiez une erreur critique. Les demandes sont également bien espacées.

Voici notre fonction modifiant ou ajoutant des attributs asynchrones et différés.

 const makeAsyncJS = () => ({ element: (el) => { el.removeAttribute("defer"); el.setAttribute("async", "async"); } });

 const makeDeferJS = () => ({ element: (el) => { el.removeAttribute("async"); el.setAttribute("defer", "defer"); } });

Si un script n'a pas initialement async ou defer, il est inoffensif d'exécuter la méthode d'élément removeAttribute() pour un bloc de code plus réutilisable. Vous pouvez ignorer cela en toute sécurité si vous travaillez rapidement sur un projet ponctuel où vous pourriez écrire ceci en ligne plutôt que d'appeler une fonction que vous avez définie précédemment dans le script.

Attributs Alt pour le référencement

Comme mentionné, notre Guide des tactiques A/B Core Web Vitals était, de par sa conception, destiné à ce que nous disposions d'un banc d'essai Edge Computing entièrement fonctionnel pour démontrer le contenu avec les futurs articles SEO pour les développeurs et les événements futurs. Lors de notre événement SMX West l'année dernière (2021), nous avons démontré l'utilisation de Cloudflare Workers pour un site Web, réalisant des feux d'artifice Lighthouse (notant 100 sur tous ses tests).

Il y a beaucoup de choses qui doivent être en place pour obtenir les feux d'artifice. Un aspect important est que toutes les images doivent avoir des attributs alt valides. Le test peut détecter quand le texte dans les attributs alt est « non descriptif », ou présent, mais vide. Vous avez besoin de mots qui décrivent ce qu'il y a dans l'image associée. Une façon de faire cela pourrait être d'analyser le nom du fichier à partir de l'attribut src .

Voici une fonction qui extrait le texte des attributs img src pour alimenter le texte alt des noms de fichiers avec des traits d'union.

 const img_alt = element.getAttribute('alt'); const img_src = element.getAttribute('src'); if (!img_alt) { element.setAttribute('alt', img_src.replace('-', ' ')); }

En un mot, cela recherchera la condition sur les images où il n'y a pas de valeur d'attribut alt . Lorsqu'il est probable que son nom de fichier d'attribut src soit composé d'un trait d'union, il remplacera les traits d'union par des espaces pour formuler ce qui pourrait être une valeur appropriée. Cette version ne fonctionnera pas dans la majorité des cas. Il ne remplace pas les barres obliques ou le protocole et le domaine. Cela sert simplement de point de départ.

Testez pour de meilleures performances et une plus grande visibilité

Avoir un banc d'essai pour essayer diverses tactiques d'optimisation des performances Core Web Vitals est incroyablement impressionnant pour les propriétaires de sites. Vous devriez avoir cette capacité dans l'arsenal de votre agence. Une légère amélioration du classement Google avec de bons scores est à la fois mesurable et largement réalisable pour la plupart des sites grâce à des tactiques dont nous discuterons et démontrerons. Connectez-vous pour une performance en direct les 8 et 9 mars.

Les techniciens SEO recommandent depuis longtemps des améliorations de performances pour le classement des moteurs de recherche. L'avantage pour les classements n'a jamais été aussi clair. Google a littéralement défini les métriques et publie sur leur effet. Nous avons Cloudflare Workers pour implémenter les solutions Edge SEO, comme démontré ici avec les attributs alt pour les images. Notre banc d'essai de proxy inverse grâce à Cloudflare ouvre la voie à une communication riche avec les développeurs.