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 APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene Suite 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 web dentro de Chrome 77 y obtener resultados de inmediato. En WebPageTest, puede usar el le navigateurUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Suite 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> à partir de la page "Mon hôte est-il rapide?" apparaît de nulle part. Cela se produit parce que le site utilise une police Web et n'a pris aucune mesure pour optimiser le rendu. En fait, la mise en page ne semble pas changer lorsque cela se produit, mais c'est toujours une mauvaise expérience utilisateur de devoir attendre si longtemps pour lire le titre.
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 ContenuEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, Suite 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é de sorte que la mise en page elle-même est relativement stable lorsque le DOM est rendu.
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:
Il est beaucoup plus facile de s'attaquer au problème des polices Web. Étant donné que le site utilise Google Fonts, il suffit de passer le display = swap propiedad en la solicitud CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a Suite. 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="httpsHTTPS (protocolo de Transferencia de Hiper-Texto) es un protocolo que permite determinar una conexión segura entre el servidor y el cliente, que no puede ser interceptada por personas no autorizadas. En resumidas cuentas, es la versión segura de el http (Hyper Text Transfer Protocol) Cómo funciona Una conexión HTTP estándar en Internet puede ser fácilmente secuestrada por partes no autorizadas. El propósito de una conexión HTTPS es evitar esto: encriptar Suite://fonts.googleapis.com/css?family=Chivo:900&Concepto de AMP¿Qué es el AMP o Accelerated Mobile Pages?El AMP, abreviatura de Accelerated Mobile Pages, es una propuesta que empezó a tomar forma en el año 2016 con la finalidad de mejorar la usabilidad, lectura y, en general, la experiencia de los usuarios de teléfono celular dentro de cualquier página web. Emprendida por Google con un aperturismo total (es de código abierto), lleva en activo desde entonces para facilitar Suite;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.
