Nouvelles opportunités et expériences de WebPageTest : testez pratiquement tout

Il n'y a jamais eu de meilleur moment que maintenant pour l'approche SEO d'un développeur Web.

Le rythme auquel les outils et les ressources, qu'il s'agisse de nouveaux outils ou de tout ce qui est familier, innove et nous ouvre des options exige également que nous suivions le rythme. Récemment, cela a entraîné davantage d'exigences en matière d'optimisation des performances, car Google publie des mises à jour d'algorithmes et des modifications des calculs de métriques.

Un outil que vous devriez connaître est WebPageTest. Ils ont récemment publié de nouveaux outils de test entièrement intégrés incroyablement utiles.

WebPageTest proxie désormais les modifications HTML spécifiées par l'utilisateur en temps réel via Netlify pour exécuter des tests de comparaison directement dans leur interface utilisateur. Aucun codage n'est requis.

Le génie a du sens

Une logique d'application intelligente dans trois énormes domaines de préoccupation vous permet de trouver des bulles, mais pas seulement avec des textes de présentation, avec des options de re-test préparées pour vous permettre d'exécuter des combinaisons de variations à des fins de comparaison. La gamme de tests disponibles dans WebPageTest signifie désormais qu'il n'y aura plus de configuration de tests à l'aide d'outils proxy tiers qui dupliquent ce que vous pouvez tester directement.

Tout cela était techniquement possible auparavant et l'approche originale continue d'avoir de l'importance.

Bien qu'étonnamment complets, il y aura toujours des tests que vous devrez exécuter à l'aide d'un hôte proxy de votre choix. Cela nécessite cependant de gérer JavaScript et Cloudflare.

Avec WebPageTest, vous pouvez pointer et cliquer.

Données de laboratoire embêtantes

Gardez toujours à l'esprit que la meilleure combinaison possible de chiffres issus de tests de laboratoire peut ne pas donner les mêmes chiffres sur le terrain. Cela peut en fait entraîner des fonctionnalités de site Web cassées.

Les scripts et les styles ont un ordre de chargement défini par le développeur où tout changement peut signifier un changement avec rupture qui n'est pas adapté à la production. Un hôte proxy peut fournir un accès pour QA dans le cadre du processus d'optimisation.

Avec cet avertissement à l'écart, laissez-nous vous dire à quel point il est formidable d'avoir un banc d'essai pour démontrer les optimisations HTML. C'est la base de nos ateliers et sessions de conférence depuis plus d'un an.

Les articles de notre guide Search Engine Land peuvent vous aider à mettre en place un banc d'essai. Nous utiliserons une version mise à jour chez SMX Advanced. Rejoignez-nous en direct si vous pouvez le faire.

Opportunités

Le texte des opportunités de WebPageText est accessible à tous dans les rapports.

Vous n'aurez plus besoin de compétences en JavaScript pour exécuter des comparaisons de variantes HTML. Au lieu de cela, vous aurez besoin d'un compte payant pour exécuter des tests proxy intégrés étiquetés Expériences.

Le compte gratuit vous donne un meilleur accès aux rapports et à l'historique, mais ne permet pas d'exécuter des expériences. Vous pouvez toujours écrire du JavaScript et proxy vos propres tests gratuitement.

C'est loin d'être aussi pratique et cela prend beaucoup trop de temps.

Expériences

Sélectionnez l'élément de menu Opportunités et expériences dans un rapport WebPageTest et une liste complète des résultats vous sera présentée.

Les opportunités ici sont dérivées de conditions de test réelles (simulées avec du matériel si possible). Notre test a indiqué une opportunité de tester à nouveau des variations de ressources bloquant le rendu (généralement JavaScript et CSS), des images chargées paresseusement, un script tiers auto-hébergé et bien plus encore.

Testez des scripts et des feuilles de style asynchrones, différés ou même intégrés à l'aide de l'interface. Nous avons écrit Cloudflare Worker JavaScript pour proxy ces tests et nous avons également ajouté des règles de style en ligne pour différer le chargement du contenu vers le bas de la page, y compris le pied de page. Le tableau initial d'intégrations WebPageTest peut gérer la plupart, mais pas tous, de nos tests originaux.

C'est un jeu d'enfant de mettre des tests ensemble maintenant.

Modifiez les paramètres de test et commencez à exécuter des variantes pour vous concentrer sur le Saint Graal des Core Web Vitals verts à tous les niveaux. L'offre est incroyablement complète et couvre bien plus que ce qui affecte les performances d'une page Web.

Vous trouverez trois catégories qui regroupent des opportunités d'expérimentation par les questions suivantes :

• Est-ce rapide ? Quickness catégorise et regroupe les expériences d'optimisation des performances.
• Est-ce utilisable ? La convivialité regroupe les erreurs de validation HTML qui peuvent perturber les lecteurs d'écran et les éléments qui affectent les changements de mise en page.
• Est-il résilient ? La résilience va aux problèmes de sécurité, y compris les protocoles mixtes. Modifiez les paramètres de test avec une interface de case à cocher et commencez à exécuter des variantes. Vous obtiendrez des options raffinées dans le rapport de comparaison.

Tableau de bord pour une suite de tests

WebPageTest doit ressembler à un tableau de bord pour une suite de tests et réussir à le faire dans des rapports qui fournissent plus de détails que Lighthouse, et avec une bien meilleure représentation graphique en cascade que Chrome Dev Tools.

Bien qu'il soit vrai qu'avec le pointer-cliquer, vous pouvez exécuter des expériences HTML dans un environnement "sans code", les détails fournis et la navigation nécessitent de l'expérience - et l'expérience de codage est la meilleure.

Une nouvelle expérience intégrée réplique une autre tâche de travail Cloudflare en supprimant tout JavaScript. Avoir des choses comme ça si accessibles est exceptionnellement plus pratique que d'écrire un script pour les variations de test.

Les expériences avancées nous permettent d'insérer du code HTML dans des emplacements clés, de tester des tactiques pour modifier l'ordre de chargement, échouer à charger ou modifier, y compris minifier, des ressources.

Il n'y a littéralement rien qui nous empêche techniquement de tester pratiquement n'importe quoi sur n'importe quelle page.

Tomber dans le gouffre du succès

Les rapports de comparaison eux-mêmes servent à vous inciter à sélectionner et à retester davantage de variantes. La bannière des métriques de résultat comprend des scores d'amélioration et de détérioration codés par couleur entre le contrôle et l'expérience.

Une section des opportunités restantes avec un sous-ensemble de commutateurs de test s'affiche ci-dessous. Vous pouvez cliquer sur votre chemin vers une amélioration significative.

Nous avons travaillé dur pour écrire des tests de démonstration à SMX Advanced et lorsque nous serons en direct, vous pouvez vous attendre à ce que nous couvrons cette mise à jour majeure des outils mêmes que nous avons utilisés. Ce sera tellement plus facile.

Nous verrons si le cycle de texte rapide des intégrations d'expériences WebPageTest gagne ce que nous nous préparions déjà à livrer. Voyons si nous pouvons passer au vert à tous les niveaux.