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

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

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.

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

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

הצגת תוצאות הביקורת ב-Data Studio

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

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

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

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