אוטומציה של ביקורות באמצעות AutoWebPerf

כלי מודולרי חדש שמאפשר איסוף אוטומטי של נתוני ביצועים מכמה מקורות.

Antoine Bisch
Gilberto Cocchi
Gilberto Cocchi
X GitHub Bluesky
Jonathan Chen
Jonathan Chen
X GitHub

מה זה AutoWebPerf‏ (AWP)?

‫AutoWebPerf‏ (AWP) הוא כלי מודולרי שמאפשר איסוף אוטומטי של נתוני ביצועים ממקורות שונים. נכון לעכשיו, יש כלים רבים למדידת ביצועי האתר בהיקפים שונים (מעבדה ושדה), כמו דוח חוויית המשתמש של Chrome, ‏ PageSpeed Insights או WebPageTest. ‫AWP מציעה שילוב עם מגוון כלי ביקורת בהגדרה פשוטה, כך שתוכלו לעקוב באופן רציף אחר ביצועי האתר במקום אחד.

הפרסום של הנחיות בנושא Web Vitals מצביע על כך שחשוב יותר ויותר לבצע מעקב צמוד ופעיל אחרי דפי אינטרנט. המהנדסים שיצרו את הכלי הזה מבצעים ביקורות ביצועים כבר שנים, והם יצרו את AWP כדי להפוך לאוטומטית חלק ידני, חוזר וגוזל זמן מהפעילויות היומיומיות שלהם. היום, AWP הגיע לרמת בגרות גבוהה והוא מוכן לשיתוף נרחב כדי שכל אחד יוכל ליהנות מהאוטומציה שהוא מציע.

הכלי זמין במאגר הציבורי AutoWebPerf ב-GitHub.

למה משמשת AWP?

יש כמה כלים וממשקי API שזמינים למעקב אחרי הביצועים של דפי אינטרנט, אבל רובם חושפים נתונים שנמדדו בזמן מסוים. כדי לעקוב אחרי אתר בצורה מספקת ולשמור על ביצועים טובים של דפים מרכזיים, מומלץ למדוד באופן רציף את המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) לאורך זמן ולעקוב אחרי המגמות.

‫AWP מקל על התהליך הזה באמצעות מנוע ושילובים מוכנים מראש של API, שאפשר להגדיר אותם באופן פרוגרמטי כדי להפוך שאילתות חוזרות לאוטומטיות ב-API שונים של מעקב אחר ביצועים.

לדוגמה, באמצעות AWP אפשר להגדיר בדיקה יומית בדף הבית כדי לתעד את נתוני השדה מ-CrUX API ואת נתוני המעבדה מדוח Lighthouse מ-PageSpeed Insights. אפשר לכתוב את הנתונים האלה ולשמור אותם לאורך זמן, למשל ב-Google Sheets, ואז להציג אותם בלוח הבקרה של Data Studio. ה-AWP מבצע אוטומטית את החלק המורכב של התהליך, ולכן הוא פתרון מצוין למעקב אחרי מגמות ב-Lab ובשטח לאורך זמן. פרטים נוספים זמינים בקטע המחשה חזותית של תוצאות הביקורת ב-Data Studio בהמשך המאמר).

סקירה כללית של הארכיטקטורה

‫AWP היא ספרייה מבוססת-מודולים עם שלושה סוגים שונים של מודולים:

  • המנוע
  • מודולים של מחברים
  • מודולים של gatherer

המנוע מקבל רשימה של בדיקות ממחבר (לדוגמה, מקובץ CSV מקומי), מריץ ביקורות ביצועים באמצעות אוספי נתונים נבחרים (כמו PageSpeed Insights) וכותב את התוצאות למחבר הפלט (לדוגמה, Google Sheets).

תרשים של הארכיטקטורה של AWP.

ב-AWP יש מספר מחברים ואיסופים שהוטמעו מראש:

אוטומציה של ביקורות באמצעות 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

במאגר AWP GitHub אפשר למצוא דרכים נוספות לאוטומציה של ביקורות יומיות ואיסוף תוצאות.

המחשה חזותית של תוצאות הביקורת ב-Data Studio

בנוסף למדידה רציפה של מדדי חוויית המשתמש הבסיסיים (Core Web Vitals), חשוב להעריך את המגמות ולגלות רגרסיות פוטנציאליות באמצעות מדדים של משתמשים אמיתיים (RUM) או נתונים מהדוח על חוויית המשתמש ב-Chrome‏ (CrUX) שנאספים על ידי AWP. שימו לב שהנתונים בדוח חוויית המשתמש של Chrome‏ (CrUX) הם נתונים מצטברים של 28 ימים, ולכן מומלץ להשתמש גם בנתוני RUM שלכם בנוסף לנתוני CrUX, כדי שתוכלו לזהות רגרסיות מוקדם יותר.

‫Data Studio הוא כלי חינמי להצגה חזותית של נתונים שאפשר לטעון אליו בקלות מדדי ביצועים ולהציג מגמות כתרשימים. לדוגמה, בתרשימי סדרות הזמן שלמטה מוצגים מדדי Core Web Vitals על סמך נתונים מדוח חוויית המשתמש של Chrome. באחד מהתרשימים מוצגת עלייה במדד יציבות חזותית (CLS) בשבועות האחרונים, כלומר יש רגרסיות ביציבות הפריסה בדפים מסוימים. בתרחיש הזה, כדאי לתת עדיפות למאמצים לניתוח הבעיות הבסיסיות בדפים האלה.

צילום מסך של תוצאות Core Web Vitals ב-Data Studio.

כדי לפשט את התהליך מקצה לקצה, החל מאיסוף נתונים ועד להצגתם החזותית, אפשר להריץ את 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 ומדדי ביצועים אחרים. בשלב הזה, AWP מכסה את תרחישי השימוש הנפוצים ביותר, ובעתיד יתווספו לה עוד תכונות שיענו על תרחישי שימוש נוספים.

מידע נוסף זמין במאגר AutoWebPerf.