Ein Tutorial zur Verwendung von WebPageTest zum Erkennen und Beheben von Problemen mit der Entwurfsinstabilität.
In einem früheren Beitrag habe ich darüber geschrieben kumulative Designänderung messen (CLS) in WebPageTest. CLS ist eine Zusammenfassung aller Designänderungen. In diesem Beitrag hielt ich es daher für interessant, jede einzelne Designänderung auf einer Seite zu untersuchen, um zu verstehen, was die Instabilität verursachen könnte, und das Problem wirklich zu beheben ).
Messung von Designänderungen
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 Plus 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({Art: "layout-shift", gepuffert: wahr});
}).then(console.Log);Dies führt zu einer Reihe von Designänderungen, denen keine Eingabeereignisse vorausgehen:
[
{
"name": "",
"entryType": "layout-shift",
"startTime": 210.78500000294298,
"duration": 0,
"value": 0.0001045969445437389,
"hadRecentInput": falsch,
"lastInputTime": 0
}
]In diesem Beispiel gab es eine einzelne sehr kleine Änderung von 0,01% bei 210 ms.
Die Kenntnis des Zeitpunkts und des Schweregrads der Änderung ist hilfreich, um die Ursachen der Änderung einzugrenzen. Gehen wir zurück zu WebPageTest für eine Laborumgebung, um weitere Tests durchzuführen.
Messung von Layoutänderungen in 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 BrowserUn 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 Plus Chrome predeterminado y no tener que preocuparse por los indicadores de la línea de comandos o usar Canary.
Ändern wir dieses Skript, um eine benutzerdefinierte Metrik für WebPageTest zu erstellen:
[LayoutShifts]
Rückkehr new Promise(resolve => {
new PerformanceObserver(list => {
resolve(JSON.stringify(list.getEntries().filter(entry => !entry.hadRecentInput)));
}).observe({Art: "layout-shift", gepuffert: wahr});
});Das Versprechen in diesem Skript wird in eine JSON-Darstellung des Arrays anstelle des Arrays selbst aufgelöst. Dies liegt daran, dass benutzerdefinierte Metriken nur primitive Datentypen wie Zeichenfolgen oder Zahlen erzeugen können.
Die Website, die ich für den Test verwenden werde, ist ismyhostfastyet.com, eine Website, die ich erstellt habe, um die Auslastungsleistung von Webservern in der realen Welt zu vergleichen.
Identifizieren Sie die Ursachen für die Instabilität des Designs
Beim Ergebnisse Wir können sehen, dass die benutzerdefinierte Metrik LayoutShifts diesen Wert hat:
[
{
"name": "",
"entryType": "layout-shift",
"startTime": 3087.2349999990547,
"duration": 0,
"value": 0.3422101449275362,
"hadRecentInput": falsch,
"lastInputTime": 0
}
]Kurz gesagt, es gibt eine einzigartige Designänderung von 34.2% auf 3087ms. Verwenden Sie WebPageTests, um den Täter zu identifizieren Filmstreifenansicht.
Ein Bildlauf zur ~ 3-Sekunden-Marke auf dem Filmstreifen zeigt uns genau, was die Designänderung des 34% verursacht: den farbenfrohen Tisch. Die Website ruft asynchron eine JSON-Datei ab und konvertiert sie dann in eine Tabelle. Die Tabelle ist anfangs leer. Wenn Sie also darauf warten, sie beim Laden der Ergebnisse zu füllen, wird die Änderung verursacht.
Das ist aber noch nicht alles. Wenn die Seite in ~ 4,3 Sekunden visuell fertig ist, können wir sehen, dass die <h1> von der Seite "Ist mein Host schnell?" erscheint aus dem Nichts. Dies liegt daran, dass die Site eine Webschrift verwendet und keine Schritte zur Optimierung des Renderings unternommen hat. Eigentlich scheint sich das Layout in diesem Fall nicht zu ändern, aber es ist immer noch eine schlechte Benutzererfahrung, so lange warten zu müssen, um den Titel zu lesen.
Beheben Sie die Instabilität des Designs
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 InhaltEl 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, Plus de la tabla hasta que se cargan los resultados JSON, pero aún podemos completar la tabla con algún tipo de Platzhalterdaten Damit ist das Layout selbst beim Rendern des DOM relativ stabil.
Hier ist der Code zum Generieren von Platzhalterdaten:
Funktion getRandomFiller(maxLength) {
var filler = '█';
var len = Math.ceil(Math.random() * maxLength);
Rückkehr new Array(len).fill(filler).join('');
}Funktion getRandomDistribution() {
var fast = Math.random();
var avg = (1 - fast) * Math.random();
var slow = 1 - (fast + avg);
Rückkehr [fast, avg, slow];
}
Fenster.Daten = [];
zum (var ich = 0; ich < 36; ich++) {
var [fast, avg, slow] = getRandomDistribution();
Fenster.Daten.drücken({
platform: getRandomFiller(10),
client: getRandomFiller(5),
n: getRandomFiller(1),
fast,
avg,
slow
});
}
updateResultsTable(sortResults(Fenster.Daten, 'fast'));
Die Platzhalterdaten werden vor dem Sortieren zufällig generiert. Enthält das Zeichen "█", das zufällig wiederholt wird, um visuelle Platzhalter für den Text und eine zufällig generierte Verteilung der drei Hauptwerte zu erstellen. Ich habe auch einige Stile hinzugefügt, um alle Farben in der Tabelle zu entsättigen, um zu verdeutlichen, dass die Daten noch nicht vollständig geladen sind.
Das Erscheinungsbild der von Ihnen verwendeten Platzhalter spielt für die Layoutstabilität keine Rolle. Der Zweck von Platzhaltern besteht darin, den Benutzern diesen Inhalt zu gewährleisten ist kommt und die Seite ist nicht kaputt.
So sehen die Platzhalter beim Laden der JSON-Daten aus:
Das Problem der Web-Schriftarten anzugehen, ist viel einfacher. Da die Website Google Fonts verwendet, müssen wir nur die übergeben 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 Plus. Eso es todo. La API de fuentes agregará Schriftanzeige: Swap Stil in der Schriftartdeklaration, sodass der Browser den Text sofort in einer anderen Schriftart rendern kann. Hier ist das entsprechende Markup mit der Korrektur enthalten:
<Verknüpfung 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 Plus://fonts.googleapis.com/css?family=Chivo:900&AmpereConcepto 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 Plus;display=swap" rel="stylesheet">Überprüfen der Optimierungen
Nach dem erneuten Ausführen der Seite über WebPageTest können wir ein Vorher und Nachher generieren Vergleich um den Unterschied zu visualisieren und den neuen Grad der Designinstabilität zu messen:
[
{
"name": "",
"entryType": "layout-shift",
"startTime": 3070.9349999997357,
"duration": 0,
"value": 0.000050272187989256116,
"hadRecentInput": falsch,
"lastInputTime": 0
}
]Laut der benutzerdefinierte MetrikEs gibt immer noch eine Designänderung bei 3071 ms (ungefähr zur gleichen Zeit wie zuvor), aber der Schweregrad der Änderung ist viel niedriger: 0,005%. Ich kann damit leben.
Aus dem Filmstreifen geht auch hervor, dass die <h1> Die Schriftart wird sofort in eine Systemschriftart zurückgesetzt, sodass Benutzer sie früher lesen können.
Fazit
Komplexe Websites werden wahrscheinlich viel mehr Designänderungen erfahren als in diesem Beispiel, aber der Korrekturprozess bleibt derselbe: Fügen Sie WebPageTest Metriken zur Designinstabilität hinzu, vergleichen Sie die Ergebnisse mit visuellem Filmstreifen, um die Schuldigen zu identifizieren, und implementieren Sie eine Lösung mithilfe von Platzhaltern, um den Bildschirm zu reservieren Platz.
(Noch etwas) Messung der Designinstabilität, die echte Benutzer erfahren
Es ist schön, WebPageTest vor und nach einer Optimierung auf einer Seite ausführen zu können und eine Verbesserung einer Metrik zu sehen, aber was wirklich wichtig ist, ist, dass sich die Benutzererfahrung verbessert. Versuchen wir deshalb nicht, die Website überhaupt zu verbessern?
Was wäre also großartig, wenn wir anfangen würden, die tatsächlichen Jittererfahrungen im Benutzerdesign neben unseren traditionellen Webleistungsmetriken zu messen. Dies ist ein entscheidender Teil der Optimierungs-Rückkopplungsschleife, da Felddaten Aufschluss darüber geben, wo die Probleme liegen und ob unsere Korrekturen einen positiven Unterschied gemacht haben.
Zusätzlich zum Sammeln Ihrer eigenen Konstruktionsinstabilitätsdaten finden Sie in der Chrome UX-BerichtDies umfasst kumulative Daten zu Designänderungen aus tatsächlichen Benutzererfahrungen auf Millionen von Websites. Sie erfahren, wie Sie (oder Ihre Konkurrenten) abschneiden, oder Sie können damit den Zustand der Instabilität des Designs im Web untersuchen.
