W tym przewodniku przedstawiamy punkt końcowy interfejsu Chrome UX Report API, który udostępnia ciąg czasowy danych o wydajności witryny. Dane te są aktualizowane co tydzień i zapewniają wgląd w historię z około 6 miesięcy z 25 punktami danych oddzielonych na tydzień.
W połączeniu z codziennymi aktualizacjami z pierwotnego punktu końcowego CrUX API możesz teraz szybko zobaczyć zarówno najnowsze dane, jak i zdarzenia z przeszłości. Jest to zaawansowane narzędzie do obserwowania zmian na stronach internetowych na przestrzeni czasu.
Wysyłanie zapytań o codzienny interfejs CrUX API
Podsumowując poprzedni artykuł o interfejsie CrUX API, możesz pobrać podsumowanie danych pól dla określonego źródła w ten sposób:
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" --header 'Content-Type: application/json' --data '{"origin": "https://web.dev"}'
{
"record": {
"key": {
"origin": "https://web.dev"
},
"metrics": {
"largest_contentful_paint": {
"histogram": [{
"start": 0, "end": 2500, "density": 0.9192
}, {
"start": 2500, "end": 4000, "density": 0.0513
}, {
"start": 4000, "density": 0.0294
}],
"percentiles": {
"p75": 1303
}
}
// ...
},
"collectionPeriod": {
"firstDate": { "year": 2022, "month": 12, "day": 27 },
"lastDate": { "year": 2023, "month": 1, "day": 23 }
}
}
}
Ten zrzut obejmuje wartości histogramu i centyla z konkretnego 28-dniowego okresu zbierania danych, w tym przypadku od 27 grudnia 2022 r. do 23 stycznia 2023 r.
Wysyłanie zapytania do interfejsu CrUX History API
Aby wywołać punkt końcowy historii, zmień queryRecord w adresie URL na queryHistoryRecord w poleceniu curl. Można użyć tego samego klucza interfejsu API CrUX co w poprzednim wywołaniu.
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=$API_KEY" \
--header 'Content-Type: application/json' \
--data '{"origin": "https://web.dev"}'
Ogólny kształt odpowiedzi jest podobny, ale jest też znacznie więcej danych. Zamiast pojedynczego punktu danych dostępne są teraz ciągi czasowe dla pól zawierających wartości 75 centyla (p75) i gęstość histogramu.
{
"record": {
"key": {
"origin": "https://web.dev"
},
"metrics": {
"largest_contentful_paint": {
"histogramTimeseries": [{
"start": 0, "end": 2500, "densities": [
0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187
]
}, {
"start": 2500, "end": 4000, "densities": [
0.0521, 0.0513, 0.0518, 0.0518, 0.0526, 0.0527
]
}, {
"start": 4000, "densities": [
0.0288, 0.0282, 0.0286, 0.0285, 0.0290, 0.0285
]
}
],
"percentilesTimeseries": {
"p75s": [
1362, 1352, 1344, 1356, 1366, 1377
]
}
}
// ...
},
"collectionPeriods": [{
"firstDate": { "year": 2022, "month": 7, "day": 10 },
"lastDate": { "year": 2022, "month": 8, "day": 6 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 17 },
"lastDate": { "year": 2022, "month": 8, "day": 13 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 24 },
"lastDate": { "year": 2022, "month": 8, "day": 20 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 31 },
"lastDate": { "year": 2022, "month": 8, "day": 27 }
}, {
"firstDate": { "year": 2022, "month": 8, "day": 7 },
"lastDate": { "year": 2022, "month": 9, "day": 3 }
}, {
"firstDate": { "year": 2022, "month": 8, "day": 14 },
"lastDate": { "year": 2022, "month": 9, "day": 10 }
}
]
}
}
W tym przykładzie ciąg czasowy densities dla zasobnika o długości od 0 do 2500 ms wskaźnika największego wyrenderowania treści (LCP) to [0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187]. Każda z tych gęstości zaobserwowano podczas odpowiedniego wpisu collectionPeriods. Na przykład piąta gęstość (0,9183) oznaczała gęstość dla piątego okresu gromadzenia danych kończącego się 3 września 2022 r., a 0,9187 – w okresie kończącym się w następnym tygodniu.
Innymi słowy, interpretując ostatnie wpisy ciągu czasowego w przykładzie dla adresu https://web.dev, stwierdzono, że od 14 do 10 września 2022 r. 91,87% wczytań stron miało wartości LCP mniejsze niż 2500 ms, a 5,27% – w okresie od 2500 ms do 4008 ms.
Istnieje też ciąg czasowy dla wartości p75: wartość LCP p75 w okresie od 14 sierpnia 2022 r. do 10 września 2022 r. wynosiła 1377. Oznacza to, że w tym okresie 75% interfejsów użytkowników miało wskaźnik LCP krótszy niż 1377 ms, a w przypadku 25% użytkowników wskaźnik LCP dłuższy niż 1377 ms.
Przykład zawiera tylko 6 wpisów ciągów czasowych i okresów zbierania danych, ale odpowiedzi z interfejsu API zawierają 25 wpisów ciągów czasowych. Ponieważ daty zakończenia każdego z tych okresów zbierania danych to soboty w odstępie 7 dni, więc obejmuje to 6 miesięcy.
W każdej odpowiedzi długość ciągu czasowego dla gęstości histogramu i wartości p75 będzie dokładnie taka sama jak długość tablicy w polu collectionPeriods: istnieje korespondencja 1:1 oparta na indeksie do tych tablic.
Wysyłanie zapytań o dane na poziomie strony
Interfejs CrUX History API umożliwia dostęp do historycznych danych na poziomie strony nie tylko do danych na poziomie źródła. Chociaż dane na poziomie źródła były wcześniej dostępne za pomocą zbioru danych CrUX w BigQuery (lub panelu raportu CrUX), dane historyczne na poziomie strony były dostępne tylko wtedy, gdy witryny samodzielnie zbierały i zapisywały dane. Nowy interfejs API odblokowuje teraz historyczne dane na poziomie strony.
Zapytania dotyczące danych na poziomie strony można wykonywać w ten sam sposób, ale w ładunku z użyciem parametru url zamiast origin:
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=$API_KEY" \
--header 'Content-Type: application/json' \
--data '{"url": "https://web.dev/blog/"}'
Dane historyczne na poziomie strony (i źródła) podlegają takim samym wymaganiom jak pozostałe raporty CrUX. Dlatego strony w szczególności mogą nie mieć pełnych danych historycznych. W takich przypadkach „brakujące” dane będą reprezentowane przez "NaN" dla gęstości histogramTimeseries i null dla percentilesTimeseries. Przyczyną różnic jest to, że histogram ma zawsze wartości liczbowe, natomiast percentyle mogą mieć postać liczb lub ciągów (CLS używa ciągów tekstowych, nawet jeśli wyglądają jak liczby).
Wizualizacja danych
Można zapytać więc, dlaczego dane są tak kształtowane? Okazało się, że ułatwia to tworzenie wykresów. Oto przykład wykresu z wartościami p75 w przypadku interakcji z kolejnym wyrenderowaniem (INP) na stronie https://web.dev:
Na tym wykresie liniowym każda wartość na osi Y stanowi wartość p75 z ciągu czasowego p75s, a oś X to czas, który jest ustawiony jako lastDate dla każdego okresu zbierania danych.
Poniżej przedstawiono wykres ciągu czasowego bin histogramu — znanego jako wykres tri-bin — ponieważ te histogramy mają trzy przedziały.
Oś X jest skonfigurowana jako lastDate dla każdego okresu zbierania danych. Tym razem oś Y to jednak odsetek wczytań strony mieszczących się w określonym zakresie danych INP, pokazanym na skumulowanym wykresie słupkowym. Wykres p75 zawiera krótki przegląd, a na jednym wykresie można stosunkowo łatwo dodać wiele danych lub wyświetlić linie dotyczące zarówno PHONE, jak i DESKTOP. Wykres tri-bin przedstawia rozkład wartości danych mierzonych w każdym okresie zbierania danych.
Na przykład, choć wykres p75 sugeruje, że w okresie obserwacji wartości INP na stronie https://web.dev były prawie akceptowalne, wykres tri-bin pokazuje, że w przypadku niewielkiego odsetka wczytań stron wartość INP była rzeczywiście niska. Na obu wykresach można dość łatwo wywnioskować, że nastąpił spadek skuteczności, który rozpoczął się pod koniec października i został ustabilizowany w połowie listopada.
Aby samodzielnie generować takie wykresy, utworzyliśmy przykładową usługę Colab. Colab, lub inaczej „Colaboratory”, pozwala pisać i wykonywać kod w języku Python bezpośrednio w przeglądarce. CrUX History API w Colab (źródło) używa Pythona do wykonywania wywołań interfejsu API i tworzenia wykresów danych.
Dzięki tej usłudze możesz tworzyć wykresy P75 i tri-bin, pobierać dane w tabeli oraz wyświetlać parę żądań i odpowiedzi w interfejsie CrUX API. Wystarczy wypełnić krótki formularz. Nie musisz być programistą, aby korzystać z tej aplikacji, ale z pewnością możesz spojrzeć na kod w Pythonie i stworzyć na nim coś niesamowitego. Życzymy miłego oglądania! Zachęcamy do przekazywania opinii na ich temat.
Oczywiście nie ograniczasz się do Colab czy Pythona – to tylko jeden z przykładów zastosowania nowego interfejsu API. Interfejs API jest oparty na formacie JSON i umożliwia wysyłanie zapytań z dowolnej technologii na punkt końcowy HTTP.
Podsumowanie
Przed wprowadzeniem punktu końcowego interfejsu CrUX History API właściciele witryn mieli ograniczone informacje historyczne, które mogli uzyskać od tego systemu. Miesięczne dane na poziomie źródła były dostępne w BigQuery i panelu CrUX, ale dane tygodniowe nie były dostępne ani dane historyczne na poziomie strony. Właściciele witryn mogli samodzielnie rejestrować te dane za pomocą codziennego interfejsu API, ale często było to konieczne dopiero po wystąpieniu regresji w danych.
Mamy nadzieję, że interfejs CrUX History API pomoże właścicielom witryn lepiej zrozumieć zmieniające się dane na ich temat, a także narzędzie diagnostyczne w razie wystąpienia problemów. Jeśli używasz nowego interfejsu API, zachęcamy do podzielenia się opinią na grupie dyskusyjnej Google poświęconej raportowi UX Chrome (Dyskusje).
Podziękowania
Baner powitalny od Dave'a Herringa w Unsplash