1. לפני שמתחילים
בשיעור Lab זה תלמדו איך למדוד מדדי חוויית המשתמש הבסיסיים (Core Web Vitals) בדף אינטרנט עם PageSpeed Insights (PSI) ו-Chrome UX Report (CrUX).
שני ממשקי ה-API מחזירים את כל נתוני המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals), אבל כל API מספק יתרונות שונים. בנוסף לנתוני CrUX מהשדה, ה-PSI API מספק גם נתונים מ-Lighthouse, כלי קוד פתוח ואוטומטי של Google שבודק את דפי האינטרנט וממליץ איך לשפר אותם. ה-CrUX API לא מספק נתוני Lighthouse, ולכן הוא פועל מהר יותר.
Google ממליצה למדוד את המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) בניידים ובמחשבים. דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) כוללים את שלושת המדדים האלה, שרלוונטיים לכל דפי האינטרנט ומספקים תובנות חשובות לגבי חוויית המשתמש:
- Largest Contentful Paint (LCP) . מתבצעת מדידה של ביצועי הטעינה והשינוי אמור להתרחש תוך 2.5 שניות מרגע טעינת הדף.
- השהיה לאחר קלט ראשוני (FID) . מתבצעת מדידה של אינטראקטיביות שאמורה להתרחש תוך 100 אלפיות השנייה.
- Cumulative Layout Shift (CLS). משמש למדידת יציבות חזותית ועליו להיות בטווח של 0.1.
דרישות מוקדמות
- מאמר של Web Vitals
- הגדרה של מאמר הסף של מדדי חוויית המשתמש הבסיסיים (Core Web Vitals).
- ידע בסיסי כיצד להשתמש בשורת הפקודה.
מה צריך לעשות
- מדידת המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) בדף אינטרנט באמצעות PSI API.
- מדידת המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) בדף אינטרנט באמצעות CrUX API.
מה תצטרך להכין
- חשבון Google.
- גישה לשורת פקודה
- עורך טקסט שתבחרו
- דפדפן אינטרנט לבחירתך
- כתובת URL לבחירתך (קוד Lab זה משתמש בכתובת https://developers.google.com).
2. מדידת המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) באמצעות ה-PSI API
- אם אתם צריכים את נתוני הביצועים של הגרסה למחשב, יש להריץ את הפקודה
curlהבאה כדי לבקש את הנתונים מה-PageSpeed Insights API ולשמור אותם בקובץresponse.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
מחליפים את ה-placeholder YOUR_URL בכתובת ה-URL.
- אם אתם צריכים את נתוני הביצועים של הגרסה לנייד של כתובת URL, צריך להגדיר את פרמטר השאילתה
strategyלערךmobileבסוף מחרוזת ה-API בפקודה שצוינה בשלב הקודם:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
מחליפים את ה-placeholder YOUR_URL בכתובת ה-URL.
- בעורך הטקסט, פותחים את הקובץ
response.txtולאחר מכן מוצאים את הנכסloadingExperience:
רספונסיביות.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 מדווח על המידע הזה לכל אחת מדוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals), על סמך כתובת ה-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. הוא מספק את אותו מידע לכל דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals), כפי שמוסבר בשלב הקודם.
3. מדידת המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) באמצעות CrUX API
קבלת מפתח API
- ב-Google Cloud Console, מחפשים את
Chrome UXואז בוחרים באפשרות Chrome UX Report API בתפריט הנפתח. - בדף Chrome UX Report API, לוחצים על הפעלה ומחכים שהלחצן הפעלה ישתנה ללחצן ניהול ובוחרים באפשרות ניהול.
- בתפריט הניווט, לוחצים על פרטי כניסה, ואז בוחרים באפשרות Create Credentials > API key (מפתח פרטי כניסה ומפתח API) ומעתיקים את מפתח ה-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"}'
מחליפים את ה-placeholder YOUR_API_KEY במפתח ה-API ואז מחליפים את ה-placeholder YOUR_URL בכתובת ה-URL.
- בעורך הטקסט, פותחים את הקובץ
response.txt:
רספונסיביות.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. מזל טוב
כל הכבוד! מדדתם את מדדי חוויית המשתמש הבסיסיים (Core Web Vitals) של דף אינטרנט באמצעות PSI API ו-CrUX API.