Un didacticiel sur l'utilisation de WebPageTest pour identifier et résoudre les problèmes d'instabilité de conception.
Dans un article précédent, j'ai écrit sur mesurer le changement de conception cumulatif (CLS) dans WebPageTest. CLS est une agrégation de toutes les modifications de conception, donc dans cet article, j'ai pensé qu'il serait intéressant d'approfondir et d'inspecter chaque modification de conception individuelle sur une page pour essayer de comprendre ce qui pourrait causer l'instabilité et vraiment essayer de résoudre le (s) problème (s). ).
Mesure des modifications de conception
Usando la API de Layout Inestabilidad, podemos obtener una lista de todos los eventos de cambio de diseño en una página:
new Promise(resolve => {
new PerformanceObserver(list => {
resolve(list.getEntries().filter(entry => !entry.hadRecentInput));
}).observe({taper: "layout-shift", tamponné: vrai});
}).then(console.Journal);Cela produit une série de modifications de conception qui ne sont pas précédées d'événements d'entrée:
[
{
"name": "",
"entryType": "layout-shift",
"startTime": 210.78500000294298,
"duration": 0,
"value": 0.0001045969445437389,
"hadRecentInput": faux,
"lastInputTime": 0
}
]Dans cet exemple, il y a eu un seul très petit changement par rapport à 0,01% à 210 ms.
Connaître l'heure et la gravité du changement est utile pour aider à préciser ce qui a pu causer le changement. Revenons à WebPageTest pour un environnement de laboratoire pour effectuer des tests supplémentaires.
Mesure des changements de mise en page dans WebPageTest
De manera similar a medir CLS en WebPageTest, medir cambios de diseño individuales requerirá una métrica personalizada. Afortunadamente, el proceso es más fácil ahora que Chrome 77 es estable. La API de Layout Inestabilidad está habilitada de forma predeterminada, por lo que debería poder ejecutar ese fragmento JS en cualquier sitio la toile dentro de Chrome 77 y obtener resultados de inmediato. En WebPageTest, puede usar el le navigateur Chrome predeterminado y no tener que preocuparse por los indicadores de la línea de comandos o usar Canary.
Modifions donc ce script pour produire une métrique personnalisée pour WebPageTest:
[LayoutShifts]
revenir new Promise(resolve => {
new PerformanceObserver(list => {
resolve(JSON.stringify(list.getEntries().filter(entry => !entry.hadRecentInput)));
}).observe({taper: "layout-shift", tamponné: vrai});
});La promesse de ce script se résout en une représentation JSON du tableau au lieu du tableau lui-même. En effet, les métriques personnalisées ne peuvent produire que des types de données primitifs tels que des chaînes ou des nombres.
Le site Web que j'utiliserai pour le test est ismyhostfastyet.com, un site que j'ai créé pour comparer les performances de charge des serveurs Web dans le monde réel.
Identifier les causes de l'instabilité de la conception
Dans le résultats nous pouvons voir que la métrique personnalisée LayoutShifts a cette valeur:
[
{
"name": "",
"entryType": "layout-shift",
"startTime": 3087.2349999990547,
"duration": 0,
"value": 0.3422101449275362,
"hadRecentInput": faux,
"lastInputTime": 0
}
]En bref, il y a un changement de conception unique du 34.2% à 3087ms. Pour aider à identifier le coupable, utilisons WebPageTest vue pellicule.
Faire défiler jusqu'à la marque ~ 3 secondes sur la pellicule nous montre exactement ce qui cause le changement de conception du 34%: le tableau coloré. Le site Web récupère de manière asynchrone un fichier JSON, puis le convertit en table. La table est initialement vide, donc attendre de la remplir lorsque les résultats sont chargés entraîne le changement.
Mais ce n'est pas tout. Lorsque la page se termine visuellement en ~ 4,3 secondes, nous pouvons voir que le <h1> de la página «¿Mi anfitrión ya es rápido?» aparece de la nada. Esto sucede porque el sitio usa una fuente web y no ha tomado ningún paso para optimiser la representación. En realidad, el diseño no parece cambiar cuando esto sucede, pero sigue siendo una mala experiencia para el Nom d'utilisateur tener que esperar tanto tiempo para leer el título.
Correction de l'instabilité de la conception
Ahora que sabemos que la tabla generada de forma asincrónica está provocando que un tercio de la ventana gráfica se desplace, es hora de solucionarlo. No conocemos el Contenu de la tabla hasta que se cargan los resultados JSON, pero aún podemos completar la tabla con algún tipo de données d'espace réservé para que el diseño en sí être relativamente estable cuando se renderiza el DOM.
Voici le code pour générer des données d'espace réservé:
une fonction getRandomFiller(maxLength) {
var filler = '█';
var len = Math.ceil(Math.random() * maxLength);
revenir new Array(len).fill(filler).join('');
}une fonction getRandomDistribution() {
var fast = Math.random();
var avg = (1 - fast) * Math.random();
var slow = 1 - (fast + avg);
revenir [fast, avg, slow];
}
la fenêtre.Les données = [];
pour (var je = 0; je < 36; je++) {
var [fast, avg, slow] = getRandomDistribution();
la fenêtre.Les données.pousser({
platform: getRandomFiller(10),
client: getRandomFiller(5),
n: getRandomFiller(1),
fast,
avg,
slow
});
}
updateResultsTable(sortResults(la fenêtre.Les données, 'fast'));
Les données d'espace réservé sont générées de manière aléatoire avant d'être triées. Inclut le caractère «█» répété un nombre aléatoire de fois pour créer des espaces réservés visuels pour le texte et une distribution générée aléatoirement des trois valeurs principales. J'ai également ajouté quelques styles pour désaturer toutes les couleurs du tableau pour indiquer clairement que les données ne sont pas encore complètement chargées.
L'apparence des espaces réservés que vous utilisez n'a pas d'importance pour la stabilité de la mise en page. Le but des espaces réservés est de garantir aux utilisateurs que le contenu c'est vient et la page n'est pas cassée.
Voici à quoi ressemblent les espaces réservés lors du chargement des données JSON:
Abordar el problema de las fuentes web es mucho más sencillo. Debido a que el sitio usa Google Fonts, solo necesitamos pasar el display = swap propiedad en la solicitud CSS. Eso es todo. La API de fuentes agregará font-display: swap style dans la déclaration de police, permettant au navigateur de restituer immédiatement le texte dans une autre police. Voici le balisage correspondant avec la correction incluse:
<relier href="https://fonts.googleapis.com/css?family=Chivo:900&display=swap" rel="stylesheet">Vérification des optimisations
Après avoir réexécuté la page via WebPageTest, nous pouvons générer un avant et un après Comparaison pour visualiser la différence et mesurer le nouveau degré d'instabilité de conception:
[
{
"name": "",
"entryType": "layout-shift",
"startTime": 3070.9349999997357,
"duration": 0,
"value": 0.000050272187989256116,
"hadRecentInput": faux,
"lastInputTime": 0
}
]Selon le métrique personnalisée, il y a toujours un changement de conception à 3071 ms (à peu près le même temps qu'avant) mais la gravité du changement est beaucoup de inférieur: 0,005%. Je peux vivre avec cela.
Il ressort également clairement de la pellicule que le <h1> La police revient immédiatement à une police système, ce qui permet aux utilisateurs de la lire plus tôt.
conclusion
Les sites Web complexes subiront probablement beaucoup plus de modifications de conception que dans cet exemple, mais le processus de correction reste le même: ajoutez des mesures d'instabilité de conception à WebPageTest, des résultats de référence croisée avec une pellicule de chargement visuel pour identifier les coupables et mettre en œuvre une solution utilisant des espaces réservés pour réserver l'écran espace.
(Encore une chose) Mesure de l'instabilité de conception vécue par de vrais utilisateurs
C'est bien de pouvoir exécuter WebPageTest sur une page avant et après une optimisation et de voir une amélioration dans une métrique, mais ce qui compte vraiment, c'est que l'expérience utilisateur s'améliore. N'est-ce pas pour cela que nous essayons d'améliorer le site en premier lieu?
Alors, qu'est-ce qui serait formidable si nous commençons à mesurer les expériences réelles de gigue de conception des utilisateurs parallèlement à nos mesures de performance Web traditionnelles. Il s'agit d'un élément crucial de la boucle de rétroaction de l'optimisation, car les données de terrain nous indiquent où se trouvent les problèmes et si nos correctifs ont fait une différence positive.
En plus de collecter vos propres données d'instabilité de conception, consultez le Rapport Chrome UX, qui comprend des données cumulatives de modification de conception issues d'expériences utilisateur réelles sur des millions de sites Web. Il vous permet de savoir vos performances (ou celles de vos concurrents), ou vous pouvez l'utiliser pour explorer l'état d'instabilité de la conception sur le Web.
