כלי מודולרי חדש שמאפשר איסוף אוטומטי של נתוני ביצועים ממקורות מרובים.
מהו AutoWebPerf (AWP)?
AutoWebPerf (AWP) הוא כלי מודולרי שמאפשר איסוף אוטומטי של נתוני ביצועים ממקורות מרובים. בשלב זה יש הרבה כלים זמינים למדידת ביצועי האתר בהיקפים שונים (במעבדה ובשדה), כמו דוח חוויית המשתמש של Chrome, PageSpeed Insights או WebPageTest. AWP מציע שילוב עם כלים שונים לבדיקות, עם הגדרה פשוטה, כדי שתוכלו לעקוב באופן רציף אחרי ביצועי האתר במקום אחד.
בעקבות פרסום ההנחיות בנושא מדדי Web Vitals, חשוב יותר ויותר לעקוב אחרי דפי האינטרנט בצורה צמודה ופעילה. המהנדסים שעומדים מאחורי הכלי הזה מבצעים ביקורות ביצועים כבר שנים, והם יצרו את AWP כדי להפוך לאוטומטיות חלק ידני, חוזר ונשנה וזמן רב מהפעילות היומית שלהם. היום, AWP הגיע לרמת בשלות והוא מוכן לשיתוף נרחב, כדי שכולם יוכלו ליהנות מהאוטומציה שהוא מספק.
הכלי זמין במאגר הציבורי AutoWebPerf ב-GitHub.
למה משמש AWP?
יש כמה כלים וממשקי API שזמינים למעקב אחר ביצועי דפי אינטרנט, אבל רובם חושפים נתונים שנמדדו בזמן ספציפי. כדי לעקוב בצורה הולמת אחרי אתר ולשמור על ביצועים טובים של דפים מרכזיים, מומלץ לבצע מדידות של המדדים הבסיסיים של חוויית המשתמש לאורך זמן ולבחון מגמות.
AWP מקל על כך על ידי מתן מנוע ושילובי API מוכנים מראש, שאפשר להגדיר באופן פרוגרמטי כדי להפוך שאילתות חוזרות ל-API שונים למעקב אחר ביצועים לאוטומטיות.
לדוגמה, באמצעות AWP אפשר להגדיר בדיקה יומית בדף הבית כדי לתעד את נתוני השדה מ-CrUX API ואת נתוני המעבדה מדוח Lighthouse מ-PageSpeed Insights. אפשר לכתוב ולשמור את הנתונים האלה לאורך זמן, למשל ב-Google Sheets, ואז להציג אותם כגרפיקה במרכז הבקרה של Data Studio. AWP מאפשרת לבצע באופן אוטומטי את החלק העיקרי בתהליך, ולכן היא פתרון מצוין למעקב אחרי מגמות במעבדה ובשטח לאורך זמן. פרטים נוספים זמינים בקטע הצגת תוצאות הביקורת ב-Data Studio בהמשך).
סקירה כללית על הארכיטקטורה
AWP היא ספרייה מבוססת-מודולים עם שלושה סוגים שונים של מודולים:
- מנוע
- מודולים של מחברים
- מודולים של gatherer
המנוע מקבל רשימת בדיקות ממרכז נתונים (לדוגמה, מקובץ CSV מקומי), מפעיל ביקורות ביצועים באמצעות אוספים נבחרים (כמו PageSpeed Insights) וכותב את התוצאות במרכז הנתונים של הפלט (לדוגמה, Google Sheets).
AWP מגיע עם מספר רכיבי איסוף ומחברים שהוגדרו מראש:
- אוספים (gatherers) שהוגדרו מראש:
- מחברים שהוגדרו מראש:
- Google Sheets
- JSON
- CSV
אוטומציה של ביקורות באמצעות AWP
AWP מבצע אוטומציה של ביקורות הביצועים באמצעות פלטפורמות הביקורת המועדפות עליכם, כמו PageSpeed Insights, WebPageTest או CrUX API. AWP מציע גמישות בבחירת המיקום שבו תתבצע הטעינה של רשימת הבדיקות, והמיקום שבו ייכתבו התוצאות.
לדוגמה, אפשר להריץ ביקורות על רשימת בדיקות ששמורות בגיליון אלקטרוני ב-Google Sheets, ולכתוב את התוצאות בקובץ CSV באמצעות הפקודה הבאה:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
ביקורות קבועות
אפשר להריץ ביקורות חוזרות בתדירות יומית, שבועית או חודשית. לדוגמה, אפשר להריץ ביקורות יומיות של רשימת בדיקות שמוגדרות בקובץ JSON מקומי, כמו בדוגמה הבאה:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
הפקודה הבאה קוראת את רשימת בדיקות הביקורת מקובץ ה-JSON המקומי, מפעילה את הבדיקות במכונה המקומית ומפיקה את התוצאות בקובץ CSV מקומי:
PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
כדי להריץ ביקורות מדי יום כשירות רקע באופן רציף, אפשר להשתמש בפקודה הבאה במקום זאת:
PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
לחלופין, אפשר להגדיר את crontab בסביבה שדומה ל-Unix כדי להריץ את AWP כמשימה יומית ב-cron:
0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
במאגר GitHub של AWP תוכלו למצוא דרכים נוספות לביצוע אוטומציה של ביקורות יומיות ואיסוף תוצאות.
הצגת תוצאות הביקורת ב-Data Studio
בנוסף למדידת מדדי Core Web Vitals באופן שוטף, חשוב שתוכלו להעריך את המגמות ולזהות רגרסיות פוטנציאליות באמצעות מדדי משתמשים אמיתיים (RUM) או נתונים מהדוח על חוויית המשתמש ב-Chrome (CrUX) שנאספים על ידי AWP. חשוב לזכור שדוח חוויית המשתמש של Chrome (CrUX) הוא צבירת נתונים נעה של 28 יום, לכן מומלץ להשתמש גם בנתוני ה-RUM שלכם יחד עם CrUX כדי לזהות נסיגות מוקדם יותר.
Data Studio הוא כלי חינמי להצגה חזותית של נתונים, שבו אפשר לטעון בקלות מדדי ביצועים וליצור תרשימים של מגמות. לדוגמה, בתרשימים של סדרות הזמן שלמטה מוצגים מדדי Core Web Vitals על סמך נתונים מדוח חוויית המשתמש של Chrome. באחד מהתרשימים מוצגת עלייה ב'שינוי מצטבר בפריסת הדף' בשבועות האחרונים, כלומר נסיגה ביציבות הפריסה בדפים מסוימים. בתרחיש כזה, כדאי לתת עדיפות לניתוח הבעיות הבסיסיות בדפים האלה.
כדי לפשט את התהליך מקצה לקצה, מאיסוף הנתונים ועד להצגה החזותית, אפשר להריץ את AWP עם רשימה של כתובות URL כדי לייצא את התוצאות באופן אוטומטי ל-Google Sheets באמצעות הפקודה הבאה:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
אחרי שאוספים מדדים יומיים בגיליון אלקטרוני, אפשר ליצור מרכז בקרה ב-Data Studio שבו הנתונים נטענים ישירות מהגיליון האלקטרוני, והמגמות מוצגות בתרשים של סדרת זמן. במאמר Google Spreadsheets API Connector מפורטות הוראות מפורטות להגדרת AWP עם גיליונות אלקטרוניים כמקור נתונים ליצירת תצוגות חזותיות ב-Data Studio.
מה השלב הבא?
AWP מספק דרך פשוטה ומשולבת לצמצם את המאמצים הנדרשים להגדרת צינור עיבוד נתונים למעקב רציף למדידת מדדי Core Web Vitals ומדדי ביצועים אחרים. נכון לעכשיו, הכלי הזה מכסה את תרחישים השימוש הנפוצים ביותר, ובעתיד נוסיף לו עוד תכונות כדי לטפל בתרחישי שימוש נוספים.
מידע נוסף זמין במאגר AutoWebPerf.