Informacje o naszych planach dotyczących pomiaru responsywności stron internetowych.
Na początku roku zespół Chrome Speed Metrics przedstawił niektóre pomysły, które braliśmy pod uwagę, by uwzględnić nowe dane czasu reagowania. Chcemy zaprojektować wskaźnik, który lepiej wychwytuje całkowity czas oczekiwania w przypadku poszczególnych zdarzeń i daje bardziej całościowy obraz ogólnej responsywności strony przez cały okres jej działania.
W ciągu ostatnich kilku miesięcy zrobiliśmy duże postępy w obszarze tego wskaźnika, dlatego chcielibyśmy przedstawić aktualne informacje o tym, jak zamierzamy mierzyć czas oczekiwania na interakcję oraz wprowadzać kilka konkretnych opcji agregacji, które rozważamy, aby ocenić ogólną responsywność strony internetowej.
Chcielibyśmy poznać opinie deweloperów i właścicieli witryn, które z tych opcji najlepiej odzwierciedlają ogólną reakcję na ich strony.
Pomiar czasu oczekiwania na interakcję
W ramach weryfikacji wskaźnik opóźnienia po pierwszym działaniu (FID) rejestruje część opóźnienia w opóźnieniu wejścia. Jest to czas, który upływa od momentu interakcji użytkownika ze stroną do momentu, w którym moduły obsługi zdarzeń mogą zostać uruchomione.
Zamierzamy rozszerzyć ten nowy wskaźnik, aby zarejestrować pełny czas trwania zdarzenia – od początkowych danych wejściowych użytkownika do wyrenderowania następnej klatki po uruchomieniu wszystkich modułów obsługi zdarzeń.
Planujemy też mierzyć interakcje, a nie poszczególne zdarzenia. Interakcje to grupy zdarzeń, które są wysyłane w ramach tego samego, logicznego gestu użytkownika (np. pointerdown, click, pointerup).
Aby zmierzyć całkowity czas oczekiwania na interakcję w przypadku grupy czasu trwania poszczególnych zdarzeń, rozważamy 2 możliwości:
- Maksymalny czas trwania zdarzenia: opóźnienie interakcji jest równe największemu czasowi trwania pojedynczego zdarzenia z dowolnego zdarzenia w grupie interakcji.
- Łączny czas trwania zdarzenia: czas oczekiwania na interakcję to suma czasu trwania wszystkich zdarzeń, bez uwzględnienia nakładania się.
Przykład poniżej pokazuje interakcję naciśnięcia klawisza, która składa się ze zdarzenia keydown i keyup. W tym przykładzie czas trwania tych 2 zdarzeń się pokrywa. Do pomiaru czasu oczekiwania po naciśnięciu klawisza
można użyć max(keydown duration, keyup duration) lub sum(keydown duration, keyup duration) - duration overlap:
Każde podejście ma swoje wady i zalety. Zanim zakończymy określanie definicji czasu oczekiwania, chcemy zebrać więcej danych i opinii.
Agreguj wszystkie interakcje na stronie
Gdy jesteśmy w stanie zmierzyć maksymalny czas oczekiwania wszystkich interakcji, następnym krokiem jest określenie zbiorczego wyniku wizyty na stronie, który może obejmować więcej niż jedną interakcję.
Po przeanalizowaniu dostępnych opcji zawęziliśmy wybrane strategie do strategii opisanych w kolejnej sekcji. W przypadku każdej z nich w Chrome gromadzimy obecnie dane o rzeczywistych użytkownikach. Planujemy opublikować wyniki naszych ustaleń, gdy tylko zbierzemy wystarczającą ilość danych, ale szukamy też bezpośrednich opinii właścicieli witryn, które wskazują, która strategia najlepiej odzwierciedla wzorce interakcji na ich stronach.
Opcje strategii agregacji
Aby lepiej objaśnić każdą z poniższych strategii, przyjrzyjmy się przykładowej wizycie na stronie, która składa się z 4 interakcji:
| Interakcja | Czas oczekiwania |
|---|---|
| Kliknij | 120 ms |
| Kliknij | 20 ms |
| Naciśnięcie klawisza | 60 ms |
| Naciśnięcie klawisza | 80 ms |
Najgorsze opóźnienie interakcji
Największe opóźnienie pojedynczej interakcji na stronie. Biorąc pod uwagę podane wyżej przykładowe interakcje, najkrótszy czas oczekiwania na interakcję to 120 ms.
Strategie dotyczące budżetu
Badanie wrażeń użytkowników sugeruje, że czas oczekiwania poniżej określonych progów może nie być postrzegany przez użytkowników jako ujemne. Na podstawie tych badań rozważamy kilka strategii budżetowych wykorzystujących następujące wartości progowe dla każdego typu wydarzenia:
| Typ interakcji | Próg budżetu |
|---|---|
| Kliknięcie | 100 ms |
| Opór | 100 ms |
| Klawiatura | 50 ms |
Każda z tych strategii uwzględni tylko opóźnienie przekraczające próg budżetu na interakcję. W przypadku powyższej przykładowej wizyty na stronie kwoty powyżej budżetu wyglądałyby tak:
| Interakcja | Czas oczekiwania | Czas oczekiwania na przekroczenie budżetu |
|---|---|---|
| Kliknij | 120 ms | 20 ms |
| Kliknij | 20 ms | 0 ms |
| Naciśnięcie klawisza | 60 ms | 10 ms |
| Naciśnięcie klawisza | 80 ms | 30 ms |
Najkrótsze opóźnienie interakcji ponad budżet
Największe opóźnienie pojedynczej interakcji względem budżetu. W powyższym przykładzie wynik wyniesie max(20, 0, 10, 30) = 30 ms.
Całkowity czas oczekiwania na interakcję ponad budżet
Suma opóźnień wszystkich interakcji przekraczających budżet. W powyższym przykładzie wynik wyniesie (20 + 0 + 10 + 30) = 60 ms.
Średni czas oczekiwania na interakcję ponad budżet
Łączny czas oczekiwania na interakcję powyżej budżetu podzielony przez łączną liczbę interakcji. W przykładzie powyżej wynik wyniesie (20 + 0 + 10 + 30) / 4 = 15 ms.
Wysoki kwantyl
Zamiast obliczania największego opóźnienia interakcji w ramach budżetu rozważamy też użycie wysokiego szacunku kwantylowego, które powinno być bardziej sprawiedliwe w przypadku stron internetowych z dużą liczbą interakcji i z większym prawdopodobieństwem uwzględniających duże wartości odstające. Znaleźliśmy 2 potencjalnie wysoce kwantylowe strategie szacowania:
- Opcja 1: Śledź największe i drugie co do wielkości interakcje ponad budżet. Po każdych 50 nowych interakcjach odpuść największą interakcję z poprzedniego zestawu 50 i dodaj największą interakcję z bieżącego zestawu 50. Ostateczna wartość to największa pozostała interakcja w stosunku do budżetu.
- Opcja 2: obliczenie 10 największych interakcji powyżej budżetu i wybranie wartości z tej listy w zależności od łącznej liczby interakcji. Biorąc pod uwagę łączną liczbę interakcji (N), wybierz (N / 50 + 1) największą wartość lub dziesiątą wartość w przypadku stron zawierających ponad 500 interakcji.
Mierz te opcje w kodzie JavaScript
Poniższy przykładowy kod pozwala określić wartości 3 pierwszych strategii przedstawionych powyżej. Pamiętaj, że nie można jeszcze zmierzyć łącznej liczby interakcji na stronie w kodzie JavaScript, więc w tym przykładzie nie uwzględniono średniej interakcji w stosunku do strategii budżetu ani strategii szacowania wysokościowego szacowania.
const interactionMap = new Map();
let worstLatency = 0;
let worstLatencyOverBudget = 0;
let totalLatencyOverBudget = 0;
new PerformanceObserver((entries) => {
for (const entry of entries.getEntries()) {
// Ignore entries without an interaction ID.
if (entry.interactionId > 0) {
// Get the interaction for this entry, or create one if it doesn't exist.
let interaction = interactionMap.get(entry.interactionId);
if (!interaction) {
interaction = {latency: 0, entries: []};
interactionMap.set(entry.interactionId, interaction);
}
interaction.entries.push(entry);
const latency = Math.max(entry.duration, interaction.latency);
worstLatency = Math.max(worstLatency, latency);
const budget = entry.name.includes('key') ? 50 : 100;
const latencyOverBudget = Math.max(latency - budget, 0);
worstLatencyOverBudget = Math.max(
latencyOverBudget,
worstLatencyOverBudget,
);
if (latencyOverBudget) {
const oldLatencyOverBudget = Math.max(interaction.latency - budget, 0);
totalLatencyOverBudget += latencyOverBudget - oldLatencyOverBudget;
}
// Set the latency on the interaction so future events can reference.
interaction.latency = latency;
// Log the updated metric values.
console.log({
worstLatency,
worstLatencyOverBudget,
totalLatencyOverBudget,
});
}
}
// Set the `durationThreshold` to 50 to capture keyboard interactions
// that are over-budget (the default `durationThreshold` is 100).
}).observe({type: 'event', buffered: true, durationThreshold: 50});
Prześlij opinię
Chcemy zachęcić deweloperów, by wypróbowali nowe dane o responsywności w swoich witrynach i poinformowali nas o problemach.
Wyślij e-maila z ogólną opinią na temat metod opisanych w tym artykule na grupie dyskusyjnej Google web-vitals-feedback, podając w temacie tekst „[Responseness Metrics]”. Chętnie poznamy Twoje zdanie.