Nowe informacje na temat naszych planów dotyczących pomiaru responsywności w internecie.
Na początku roku zespół Chrome Metrics udostępnił niektóre dane na temat szybkości pomysły, które braliśmy nowych danych responsywności. Chcemy zaprojektować dane, które będą lepiej odzwierciedlać pełnego czasu oczekiwania poszczególnych zdarzeń i zapewnia bardziej całościowy obraz ogólną responsywność strony przez cały okres jej istnienia.
W ciągu ostatnich kilku miesięcy zrobiliśmy duże postępy w tej kwestii i chcę opowiedzieć o tym, jak planujemy mierzyć czas oczekiwania na interakcję kilka konkretnych opcji agregacji, które rozważamy, aby określić ogólną responsywność strony internetowej.
Chętnie poznamy opinie deweloperów i właścicieli witryn na temat która z tych opcji będzie najbardziej reprezentatywna w przypadku ogólnych danych wejściowych responsywności ich stron.
Mierz czas oczekiwania na interakcję
Dane Opóźnienie przy pierwszym działaniu (FID) rejestrują opóźnienia opóźnienia sygnału wejściowego. Oznacza to, że czas między gdy użytkownik wchodzi w interakcję ze stroną do chwili, gdy moduły obsługi zdarzeń może działać.
Planujemy rozszerzyć ten nowy rodzaj danych, aby odzwierciedlić całe zdarzenie czas trwania, od dane wejściowe użytkownika, aż do wyrenderowania następnej klatki, gdy wszystkie moduły obsługi zdarzeń już biegły.
Planujemy również mierzyć
interakcje
a nie pojedynczych zdarzeń. Interakcje to grupy zdarzeń, które
wysyłane w ramach tego samego, logicznego gestu użytkownika (na przykład:
pointerdown, click i pointerup).
Pomiar łącznego czasu oczekiwania na interakcję w grupie pojedynczego zdarzenia Rozważamy 2 podejścia:
- Maksymalny czas trwania zdarzenia: opóźnienie interakcji jest równe największemu czasu trwania pojedynczego zdarzenia dla dowolnego zdarzenia w grupie interakcji.
- Łączny czas trwania zdarzenia: czas oczekiwania na interakcję to suma wszystkich zdarzeń. czasy trwania, ignorując przypadki pokrywania się.
Przykład na diagramie poniżej przedstawia interakcję naciśnięcia klawisza, która składa się z:
dla zdarzeń keydown i keyup. W tym przykładzie czas trwania pokrywa się
między tymi dwoma zdarzeniami. Aby zmierzyć czas oczekiwania na naciśnięcie klawisza:
możemy użyć elementu max(keydown duration, keyup duration) lub sum(keydown duration, keyup duration) - duration overlap:
Każde podejście ma swoje wady i zalety. Chcemy zebrać więcej danych komentarze przed dokończeniem definicji opóźnienia.
.Zbiorcze dane o wszystkich interakcjach na stronie
Gdy będziemy w stanie zmierzyć pełne opóźnienie wszystkich interakcji, to określenie łącznego wyniku wizyty na stronie, który może zawierać więcej niż jedną interakcję.
Po zapoznaniu się z różnymi opcjami sprecyzowaliśmy omówionych w dalszej części sekcji, przy czym każda z nich zbieranie danych o rzeczywistych użytkownikach w Chrome. Planujemy opublikować wyniki po zgromadzeniu wystarczającej ilości danych, ale chcemy również aby uzyskać bezpośrednie informacje od właścicieli witryn na temat strategii ustalania stawek najdokładniej odzwierciedla wzorce interakcji na ich stronach.
Opcje strategii agregacji
Aby wyjaśnić każdą z poniższych strategii, przeanalizuj przykładową wizytę na stronie składający 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 |
Najkrótszy czas oczekiwania na interakcję
Największe opóźnienie pojedynczej interakcji na stronie. Biorąc pod uwagę przykładowych interakcji wymienionych powyżej, najgorszy czas oczekiwania na interakcję wynosi 120 ms
Strategie dotyczące budżetu
Interfejs użytkownika badania co sugeruje, że użytkownicy mogą nie dostrzegać opóźnień poniżej określonych progów jako negatywne. Biorąc pod uwagę te badania, rozważamy kilka strategii budżetowych korzystając z tych progów w przypadku każdego typu zdarzenia:
| Typ interakcji | Próg budżetu |
|---|---|
| Kliknij | 100 ms |
| Opór | 100 ms |
| Klawiatura | 50 ms |
Każda z tych strategii uwzględnia tylko opóźnienie większe niż próg budżetu na interakcję. Korzystając z przykładowej wizyty na stronie powyżej, kwoty nadmiernych budżetów byłyby następujące:
| Interakcja | Czas oczekiwania | Czas oczekiwania powyżej 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ótszy czas oczekiwania na interakcję w odniesieniu do budżetu
Największe opóźnienie pojedynczej interakcji w stosunku do budżetu. W podanym wyżej przykładzie funkcja
wynik to max(20, 0, 10, 30) = 30 ms.
Całkowity czas oczekiwania na interakcję powyżej budżetu
Suma wszystkich opóźnień interakcji w ramach budżetu. W podanym wyżej przykładzie funkcja
wynik to (20 + 0 + 10 + 30) = 60 ms.
Średni czas oczekiwania na interakcję w przypadku budżetu
Łączny czas oczekiwania na interakcję wynikający z nadmiernego budżetu podzielony przez łączną liczbę
interakcje. W tym przykładzie wynik będzie wyglądał tak: (20 + 0 + 10 + 30) / 4 = 15 ms.
Przybliżone wysokości kwantylowe
Alternatywą dla obliczenia największego opóźnienia interakcji w ramach budżetu jest również w przybliżeniu kwantylowym, co powinno być bardziej korzystne często spotykane są strony, na których często odstających od reszty. Znaleźliśmy 2 potencjalne strategie przybliżenia wysokokwantylowe Lubimy:
- Opcja 1: śledź największe i drugie pod względem wielkości interakcje w budżetu. Po każdych 50 nowych interakcjach pomijaj największą interakcję z poprzedni zestaw wynoszący 50 i dodaj największą interakcję z obecnego zestawu 50. Wartość końcowa będzie największą pozostałej interakcji w ramach budżetu.
- Opcja 2: oblicz 10 największych interakcji w ramach budżetu i wybierz z tej listy w zależności od łącznej liczby interakcji. Podano N łączna liczba interakcji, wybierz (N / 50 + 1) największą wartość lub 10. w przypadku stron zawierających ponad 500 interakcji.
Zmierz te opcje w JavaScripcie
Następujący przykładowy kod można wykorzystać do określenia wartości pierwszej wartości omówionych powyżej 3 strategii. Pamiętaj, że nie można jeszcze mierzyć wszystkich interakcji na stronie w JavaScripcie, więc w tym przykładzie nie uwzględnij średnią interakcję w strategii ustalania budżetu lub strategie aproksymacji kwantylowej.
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ć programistów do wypróbowania nowych danych responsywności ich stronach. Jeśli zauważysz jakiś problem, daj nam znać.
Prześlij e-mailem wszelkie ogólne opinie na temat opisanych tu metod do web-vitals-feedback Google grupa z danymi „[Wskaźnik responsywności]” w temacie. Szukamy czekamy na Wasze opinie!