1. לפני שמתחילים
ב-codelab הזה תלמדו איך למדוד את המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) בדף אינטרנט באמצעות PageSpeed Insights API ו-CrUX API.
שני ממשקי ה-API מחזירים נתונים זהים של מדדים בסיסיים של חוויית המשתמש, אבל כל אחד מהם מציע יתרונות שונים. בנוסף לנתוני CrUX מהשטח, ה-API של PageSpeed Insights מספק גם נתונים מ-Lighthouse, שהוא כלי אוטומטי של Google עם קוד פתוח, שמבצע ביקורת על דפי אינטרנט וממליץ איך לשפר אותם. ה-API של CrUX לא מספק נתונים של Lighthouse, ולכן הוא פועל מהר יותר.
Google ממליצה למדוד את המדדים הבסיסיים של חוויית המשתמש במכשירים ניידים ובמחשבים. המדדים הבסיסיים של חוויית המשתמש כוללים את שלושת המדדים הבאים, שרלוונטיים לכל דפי האינטרנט ומספקים תובנות חשובות לגבי חוויית המשתמש:
- המהירות שבה נטען רכיב התוכן הכי גדול (LCP). מדד של ביצועי הטעינה, והוא צריך להתרחש תוך 2.5 שניות מרגע שהדף מתחיל להיטען.
- השהיה לאחר קלט ראשוני (FID). המדד הזה מודד אינטראקטיביות והוא צריך להתרחש תוך 100 אלפיות השנייה.
- תזוזת פריסה נצברת (CLS). המדד הזה מודד את היציבות החזותית והוא צריך להיות בטווח של 0.1.
דרישות מוקדמות
- מאמר בנושא Web Vitals
- ידע בסיסי בשורת הפקודה
- מאמר בנושא הגדרת ערכי הסף של מדדי הליבה לבדיקת חוויית המשתמש באתר
מה תלמדו
- מדידת מדדי הליבה לבדיקת חוויית המשתמש באתר באמצעות PageSpeed Insights API.
- מדידת המדדים הבסיסיים של חוויית המשתמש בדף אינטרנט באמצעות CrUX API.
מה נדרש
- חשבון Google.
- גישה לשורת פקודה
- עורך טקסט לפי בחירתכם
- דפדפן אינטרנט לבחירתכם
- כתובת URL לבחירתכם (ב-Codelab הזה נעשה שימוש בכתובת https://developers.google.com).
2. מדידת מדדי הליבה לבדיקת חוויית המשתמש באתר באמצעות PageSpeed Insights API
- אם אתם צריכים את נתוני הביצועים של גרסת הדסקטופ של כתובת URL, אתם יכולים לבקש את הנתונים מ-PageSpeed Insights API ולשמור אותם בקובץ
response.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
מחליפים את הערך הזמני לשמירת מקום YOUR_URL בכתובת ה-URL.
בסוף מחרוזת ה-API, שימו לב שפרמטר השאילתה strategy מוגדר לערך desktop, שמציין את הבקשה לנתונים של מחשבים.
- אם אתם צריכים את נתוני הביצועים של הגרסה לנייד של כתובת URL, אתם יכולים לבקש את הנתונים מ-PageSpeed Insights API ולשמור אותם בקובץ
response.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
מחליפים את הערך הזמני לשמירת מקום YOUR_URL בכתובת ה-URL.
בסוף מחרוזת ה-API, שימו לב שפרמטר השאילתה strategy מוגדר לערך mobile, שמציין את הבקשה לנתונים לנייד.
- בכלי לעריכת טקסט, פותחים את הקובץ
response.txtומחפשים את הנכסloadingExperience:
response.txt
"loadingExperience": {
"id": "https://developers.google.com/",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1714,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.49701860391159164
},
{
"min": 1000,
"max": 3000,
"proportion": 0.40071951025600261
},
{
"min": 3000,
"proportion": 0.10226188583240581
}
],
"category": "AVERAGE"
},
},
בנכס loadingExperience, המידע הזה מדווח לגבי כל אחד מהמדדים הבסיסיים של חוויית המשתמש על סמך כתובת ה-URL וסוג המכשיר שמצוינים בבקשת ה-API:
- המאפיין
percentileמציין את האחוזון ה-75 של כל מדד. - המאפיין
distributionsמציין את אחוז הצפיות בדפים שבהם חוויית המשתמש הייתה טובה, דרוש שיפור או איטית, לכל מדד. - במאפיין
categoryהביצועים של כל מדד מסווגים כאיטיים, ממוצעים או מהירים.
אם התוכן של מאפיין loadingExperience ריק, אין מספיק נתוני ביצועים שזמינים לגבי כתובת ה-URL. הבעיה הזו מתרחשת בדרך כלל כשבודקים דפי אינטרנט עם תנועה נמוכה.
- מחפשים את הנכס
originLoadingExperience:
response.txt
"originLoadingExperience": {
"id": "https://developers.google.com",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1649,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.488838781075378
},
{
"min": 1000,
"max": 3000,
"proportion": 0.42709617576692827
},
{
"min": 3000,
"proportion": 0.084065043157693739
}
],
"category": "AVERAGE"
},
},
בנכס originLoadingExperience מדווח על החוויות המצטברות של כל המקור, ולא רק של כתובת ה-URL. הוא מספק את אותו מידע לגבי כל אחד מהמדדים הבסיסיים של חוויית המשתמש, כפי שמוסבר בשלב הקודם.
3. מדידת מדדי הליבה לבדיקת חוויית המשתמש באתר באמצעות CrUX API
קבלת מפתח API
- ב-Google Cloud Console, מחפשים את
Chrome UXובוחרים באפשרות Chrome UX Report API בתפריט הנפתח. - בדף Chrome UX Report API, לוחצים על Enable (הפעלה), מחכים שהלחצן Enable ישתנה ללחצן Manage (ניהול) ולוחצים על Manage.
- בתפריט הניווט, לוחצים על Credentials, בוחרים באפשרות Create Credentials > API key ומעתיקים את מפתח ה-API.
יצירת בקשה
- משורת הפקודה, מבקשים נתוני ביצועים עבור כתובת ה-URL מ-CrUX API ושומרים אותם בקובץ
response.txt:
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'
מחליפים את הערך הזמני YOUR_API_KEY במפתח ה-API ואת הערך הזמני YOUR_URL בכתובת ה-URL.
- בכלי לעריכת טקסט, פותחים את הקובץ
response.txt:
response.txt
{
"record": {
"key": {
"url": "https://developers.google.com/"
},
"metrics": {
"cumulative_layout_shift": {
"histogram": [
{
"start": "0.00",
"end": "0.10",
"density": 0.47784335300590036
},
{
"start": "0.10",
"end": "0.25",
"density": 0.32379713914174157
},
{
"start": "0.25",
"density": 0.19835950785235579
}
],
"percentiles": {
"p75": "0.23"
}
},
}
},
}
תשובת CrUX API מספקת את המידע הזה לגבי כל אחד מהמדדים הבסיסיים של חוויית המשתמש:
- המאפיין
histogramמציין את אחוז המשתמשים שחוו חוויה איטית, ממוצעת או מהירה במדד מסוים. - המאפיין
percentilesמציין את התצפית באחוזון ה-75 למדד נתון.
אם מוצגת הודעת שגיאה שלפיה הנתונים לא נמצאו, סימן שלא הצטברו מספיק נתוני ביצועים לגבי כתובת ה-URL שצוינה. הבעיה הזו מתרחשת בדרך כלל כשבודקים דפי אינטרנט עם תנועה נמוכה.
4. מזל טוב
מעולה! מדדתם את המדדים הבסיסיים של חוויית המשתמש בדף אינטרנט באמצעות PageSpeed Insights API ו-CrUX API.