Catégories
Astuces et Design

Test A / B Instant.Page avec Netlify et Speedcurve – Web Performance Consulting

Cela fait un moment que je souhaite essayer instant.page correctement sur mon site. C’est une approche assez intelligente. Le script surveille le moment où quelqu'un survole un lien, puis, lorsqu'il le fait, utilise le prefetch indice de ressource pour commencer à récupérer cette page avant même que l'événement click ne se produise. J'aime l'idée, en théorie, pas mal. J'aime aussi l'implémentation. Le script est minuscule (1,1 Ko avec Brotli) et pas trop agressif par défaut – vous pouvez dites-lui de pré-extraire tous les liens visibles dans la fenêtre, mais ce n'est pas le comportement par défaut.

Je voulais cependant connaître l'impact réel. Dans quelle mesure cette approche fonctionnerait-elle une fois mise en œuvre dans le monde réel?

C'était une excellente excuse pour exécuter un test fractionné. En servant une version du site avec instant.page en place à du trafic et un site sans celui-ci à une autre, je pourrais comparer leurs performances à la fois sur la même période et voir comment cela se dérobe.

Il s'avère que, entre Netlify et SpeedCurve, cela n'a pas demandé beaucoup de travail.

Netlify prend en charge le test de division des bases de branche, donc la première consistait à implémenter instant.page sur une branche séparée. J'ai téléchargé la dernière version afin de pouvoir m'auto-héberger (il n'y a aucune raison d'engager le coût de connexion séparé) et je l'ai déposée dans ma page sur une branche distincte (très créative appelée «page instantanée») et poussée vers GitHub.

Avec la branche distincte prête, j'ai pu configurer un test fractionné dans Netlify en sélectionnant la branche principale et la branche de page instantanée, et en allouant le trafic qui devrait aller à chacune. Je suis allé avec 50% chacun parce que je suis ennuyeux.

J'avais encore besoin d'un moyen de distinguer les sessions avec instant.page et les sessions sans. C’est là que la méthode addData de SpeedCurve entre en jeu. Avec cela, je peux ajouter une variable de données personnalisée (encore une fois, de façon créative appelée "page instantanée") qui est égale à "oui" si vous étiez sur la version avec instant.page ou "non" si vous ne l'étiez pas.

<script>LUX.addData('instantpage', 'yes');script>

J'aurais pu ajouter l'extrait de code aux deux branches, mais il me semblait un peu bâclé de mettre à jour ma branche principale pour suivre l'absence de quelque chose qui n'existait que dans une autre branche. Encore une fois, Netlify a une bonne réponse à cela.

Netlify dispose d'une fonctionnalité appelée injection d'extraits de code qui vous permet d'injecter un extrait de code juste avant la balise de fermeture du corps ou juste avant la balise de fermeture de la tête. Leur fonction d'injection d'extraits prend en charge la modélisation liquide et expose également toutes les variables environnementales, y compris celle qui indique la branche sur laquelle vous vous trouvez. Au cours du processus de génération, cet extrait (et toute syntaxe Liquid associée) est généré et ajouté au code résultant.

Cela me permet de vérifier la branche en cours de construction et d'injecter le addData sans avoir à toucher la source de l'une ou l'autre des succursales:

{% if BRANCH == "instant-page" %}
<script>LUX.addData('instantpage', 'yes');script>
{% else %}
<script>LUX.addData('instantpage', 'no');script>
{% endif %}

Ensuite, dans SpeedCurve, j'ai dû configurer la nouvelle variable de données (en utilisant le type «Autre») afin de pouvoir filtrer mes données de performances en fonction de leur valeur.

Il ne restait plus qu'à voir si le test fractionné fonctionnait réellement. Il n'aurait fallu que quelques instants dans SpeedCurve pour voir le trafic en direct passer, mais je suis une personne impatiente.

Netlify définit un cookie pour les tests fractionnés (nf_ab) pour garantir que toutes les sessions qui aboutissent sur une version du test restent avec cette version tant que ce cookie persiste. Le cookie est un point flottant aléatoire entre 0 et 1. Étant donné que je suis divisé à 50%, cela signifie qu'une valeur entre 0,0 et 0,5 va entraîner une version, et une valeur entre 0,5 et 1,0 va obtenir l'autre .

J'ai chargé la page, vérifié si Instant.page était en cours de chargement — ce n'était pas ce qui signifiait que j'étais sur la branche principale. Ensuite, j'ai basculé la valeur du cookie dans les outils de développement de Chrome (sous le panneau d'application> Cookies) et rechargé. Effectivement, il y avait instant.page — le test de division fonctionnait.

Et c'était tout. Sans passer beaucoup de temps, j'ai pu obtenir un test fractionné et le faire fonctionner afin que je puisse voir l'impact qu'instant.page avait.

Il est tôt, donc les résultats ne sont pas exactement concluants. Il semble que la plupart des mesures se soient légèrement améliorées. Au 95e centile, quelques-uns ont obtenu un cheveux Ralentissez.

Il ne suffit pas encore de prendre une décision concrète: le test n'a pas duré très longtemps, il n'y a donc pas eu beaucoup de temps pour aplanir les anomalies et tout ça.

Il convient également de noter que même si les résultats faire avoir l'air bien, ce n'est pas parce qu'il a ou n'a pas d'impact sur mon site qu'il n'aura pas un impact différent ailleurs. Mon site a une durée de session courte, généralement, et des pages très légères: le placer sur un site commercial plus grand donnerait inévitablement des résultats très différents. C'est l'une des raisons pour lesquelles il est si essentiel de tester les améliorations potentielles au fur et à mesure que vous les déployez afin de pouvoir évaluer l'impact dans vos propres situations.

Il y a d'autres ajustements potentiels que je pourrais faire pour essayer de donner un coup de pouce supplémentaire à l'approche—instant.page fournit plusieurs options pour affiner quand exactement la page suivante est prélue et je suis assez désireux de jouer avec ceux. Ce qui m'excite cependant, c'est de savoir à quelle vitesse je pourrais mettre en place ces expériences et commencer à collecter des données.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *