במדריך הזה מוצגת נקודת הקצה Chrome UX Report (CrUX) History API, שמספקת סדרת זמנים של נתוני ביצועים באינטרנט. הנתונים האלה מתעדכנים מדי שבוע ומאפשרים לכם לראות היסטוריה של כ-6 חודשים עם 25 נקודות נתונים שמחולקות בשבוע.
בשילוב עם העדכונים היומיים מנקודת הקצה המקורית של CrUX API, אפשר עכשיו לראות במהירות גם את הנתונים העדכניים ביותר וגם את מה שקרה בעבר. זהו כלי יעיל מאוד לזיהוי שינויים בדפי אינטרנט לאורך זמן.
הרצת שאילתות על ה-CrUX API היומי
לסיכום, ממאמר קודם על CrUX API ניתן לקבל תמונת מצב של נתוני השדות עבור מקור מסוים באופן הבא:
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 }
}
}
}
תמונת המצב הזו כוללת ערכי צפיפות היסטוגרמה וערכי אחוזון בתקופת איסוף מסוימת של 28 ימים. במקרה הזה, מ-27 בדצמבר 2022 עד 23 בינואר 2023.
שליחת שאילתה ל-CrUX History API
כדי להפעיל את נקודת הקצה של ההיסטוריה, צריך לשנות את queryRecord בכתובת ה-URL ל-queryHistoryRecord בפקודה curl. שימוש באותו מפתח CrUX API זהה לזה של הקריאה הקודמת, יפעל.
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"}'
התשובה באופן כללי דומה אבל יש הרבה יותר נתונים. במקום נקודה נתונים אחת, עכשיו יש סדרות זמן לשדות שמכילים את האחוזון ה-75 (p75) ואת ערכי הצפיפות של ההיסטוגרמה.
{
"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 }
}
]
}
}
בדוגמה הזו, סדרת הזמנים densities בקטגוריה של 0 עד 2,500 אלפיות השנייה של המדד המהירות שבה נטען רכיב התוכן הכי גדול (LCP) היא [0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187]. כל אחת מדחיסות הנתונים זוהתה במהלך הערך collectionPeriods המתאים. לדוגמה: הצפיפות החמישית, 0.9183, הייתה הצפיפות בתקופת האיסוף החמישית, שמסתיימת ב-3 בספטמבר 2022, ו-0.9187 הייתה הצפיפות בתקופה שהסתיימה בשבוע שלאחר מכן.
כלומר, תוך כדי פירוש של הרשומות על סדרות זמן אחרונות בדוגמה של https://web.dev, נמצא שמ-14 באוגוסט 2022 עד 10 בספטמבר 2022, ב-91.87% מטעינות הדפים היו ערכי LCP קטנים מ-2, 500 אלפיות שנייה, 5.27% כללו ערכים בין 2, 500 אלפיות השנייה ל-4, 000 אלפיות שנייה
באופן דומה, יש סדרת זמנים לערכים של p75: ה-LCP p75 מ-14 באוגוסט 2022 עד 10 בספטמבר 2022 היה 1377. פירוש הדבר הוא שבתקופת האיסוף הזו, ערך ה-LCP ב-75% מחוויות המשתמש היה פחות מ-1,377 אלפיות השנייה, וב-25% מחוויות המשתמש היה ערך LCP גדול מ-1,377 אלפיות השנייה.
אמנם הדוגמה מפרטת רק 6 רשומות של סדרות זמנים ותקופות איסוף, אבל התגובות מה-API מספקות 25 רשומות של סדרות זמנים; מכיוון שתאריכי הסיום של כל אחת מתקופות האיסוף האלה הם ימי שבת בהפרש של 7 ימים, כלומר 6 חודשים.
בכל תגובה נתונה, אורך סדרת הזמנים של ערכי הדחיסות של ההיסטוגרמה ושל ערכי p75 יהיה זהה בדיוק לאורך המערך בשדה collectionPeriods: קיימת התאמה מסוג אחד לאחד המבוססת על האינדקס, למערכים אלו.
שליחת שאילתה לגבי נתונים ברמת הדף
בנוסף לנתונים ברמת המקור, ה-CrUX History API מאפשר גישה לנתונים היסטוריים ברמת הדף. הנתונים ברמת המקור היו זמינים בעבר באמצעות מערך הנתונים של CrUX ב-BigQuery (או באמצעות מרכז הבקרה של CrUX), אבל הנתונים ההיסטוריים ברמת הדף היו זמינים רק אם אתרים אספו ואחסנו את הנתונים בעצמם. ה-API החדש מציג עכשיו את הנתונים ההיסטוריים ברמת הדף.
אפשר לשלוח שאילתות על נתונים ברמת הדף באותו אופן, אבל אם משתמשים ב-url במקום ב-origin במטען הייעודי (payload):
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/"}'
נתונים היסטוריים ברמת הדף (וברמת המקור) כפופים לאותן דרישות סף כמו שאר תנאי CrUX, ולכן ייתכן שלדפים ספציפיים אין תיעוד היסטורי מלא. במקרים כאלה, הערכים החסרים הנתונים מיוצגים על ידי "NaN" עבור מידות הצפיפות histogramTimeseries ו-null עבור percentilesTimeseries. הסיבה להבדל היא צפיפות ההיסטוגרמה היא תמיד מספרים, בעוד שהאחוזונים יכולים להיות מספרים או מחרוזות (CLS משתמש במחרוזות, גם אם הן נראות כמו מספרים).
המחשת הנתונים
אז אפשר לשאול למה הנתונים מעוצבים כך? נמצא שכך קל יותר להציג גרפים. לדוגמה, כך נראה תרשים של ערכי p75 עבור Interaction to Next Paint (INP) בשביל https://web.dev:
בתרשים הקו הזה, כל ערך בציר ה-Y הוא ערך p75 מסדרת הזמן p75s, וציר ה-X הוא הזמן, שמוגדר כ-lastDate לכל תקופת איסוף.
הנה תרשים של סדרת זמנים של היסטוגרמה bin, שנקראת תרשים Tri-bin, כי בהיסטוגרמות האלה יש שלושה פחים.
ציר ה-X מוגדר בתור lastDate בכל תקופת איסוף. עם זאת, הפעם ציר ה-Y הוא אחוז טעינות הדפים שנמצאות בטווח מסוים של מדד INP, שמוצג בתרשים עמודות מוערם. תרשים p75 מספק סקירה כללית מהירה, ובתוך תרשים יחיד קל יחסית להוסיף כמה מדדים או להציג קווים גם ל-PHONE וגם ל-DESKTOP. התרשים Tri-bin משקף את ההתפלגות של ערכי המדדים שנמדדו במהלך כל תקופת איסוף.
לדוגמה, למרות שתרשים p75 מצביע על כך שב-https://web.dev היו ערכי INP כמעט מקובלים במהלך תקופת התצפית, התרשים ה-Tri-bin מראה שבחלק קטן מטעינות הדפים, ה-INP היה נמוך למעשה. בשני התרשימים קל יחסית להסיק שהייתה רגרסיה של ביצועים שהתחילו לקראת סוף אוקטובר, ותוקנה עד אמצע נובמבר.
כדי ליצור תרשימים כאלה בעצמכם, יצרנו דוגמה ל-Colab. Colab, או Colaboratory, הוא מוצר שמאפשר לכתוב קוד Python ולהריץ אותו ישירות מהדפדפן. ב-CrUX History API Colab (מקור) נעשה שימוש ב-Python כדי לבצע קריאות ל-API ולהציג את הנתונים בתרשים.
ה-Colab הזה מאפשר לך ליצור תרשימי p75 ותרשימי Tri-bin, לקבל נתונים בטבלאות ולראות את צמד הבקשות והתשובה ב-CrUX API, על ידי מילוי טופס קצר. אתם לא צריכים להיות מתכנתים כדי להשתמש בזה, אבל אתם בהחלט יכולים להסתכל בקוד Python ולשנות אותו למשהו מדהים! אנחנו מזמינים אותך ליהנות, אל תהססו לשלוח משוב על מה שמצאתם!
כמובן שאתם לא מוגבלים ל-Colab או ל-Python, זו רק דוגמה אחת לשימוש ב-API החדש הזה. בתור נקודת קצה מבוססת-JSON, נקודת הקצה ב-HTTP אפשר לשלוח שאילתות ל-API מכל טכנולוגיה.
סיכום
לפני ההשקה של נקודת הקצה של CrUX History API, בעלי אתרים היו מוגבלים במידע ההיסטורי שהם היו יכולים לקבל מ-CrUX. הנתונים החודשיים ברמת המקור היו זמינים באמצעות BigQuery ומרכז הבקרה של CrUX, אבל הנתונים השבועיים לא היו זמינים וגם לא היו נתונים היסטוריים ברמת הדף. בעלי אתרים יכולים לתעד את הנתונים האלה בעצמם באמצעות ה-API היומי, אבל לעיתים קרובות התגלה הצורך הזה רק אחרי רגרסיה במדדים.
התקווה שהשקנו את CrUX History API זה, היא תאפשר לבעלי אתרים להבין טוב יותר את מדדי האתרים המשתנים שלהם, וכן ככלי אבחון למקרים שבהם מתעוררות בעיות. אם אתם משתמשים בממשק ה-API החדש, נשמח לקבל משוב בקבוצת Google בנושא דוח חוויית המשתמש של Chrome (דיונים).
אישורים
תמונה ראשית (Hero) של דייב הרינג בקמפיין Unbounce