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 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({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 Netz dentro de Chrome 77 y obtener resultados de inmediato. En WebPageTest, puede usar el Browser 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> 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 optimieren la representación. En realidad, el diseño no parece cambiar cuando esto sucede, pero sigue siendo una mala experiencia para el Nutzername tener que esperar tanto tiempo para leer el título.
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 Inhalt de la tabla hasta que se cargan los resultados JSON, pero aún podemos completar la tabla con algún tipo de Platzhalterdaten para que el diseño en sí Sein relativamente estable cuando se renderiza el DOM.
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:
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á 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="https://fonts.googleapis.com/css?family=Chivo:900&Ampere;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.
