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

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

Antoine Bisch
Gilberto Cocchi
Gilberto Cocchi
X GitHub
Jonathan Chen

מהו AutoWebPerf‏ (AWP)?

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

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

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

למה משמש AWP?

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

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

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

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

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

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

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