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

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

Antoine Bisch
Gilberto Cocchi
Gilberto Cocchi
X GitHub
Jonathan Chen

מה זה AutoWebPerf (AWP)?

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

  • המנוע
  • מודולים של מחבר
  • מודולים של 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

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

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

צילום מסך של תוצאות מדדי הליבה לבדיקת חוויית המשתמש באתר ב-Data Studio.

כדי לפשט את התהליך מקצה לקצה מאיסוף נתונים ועד לתצוגה חזותית, תוכלו להריץ את AWP עם רשימה של כתובות URL כדי לייצא את התוצאות באופן אוטומטי ל-Google Sheets, באמצעות הפקודה הבאה:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

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

מה השלב הבא?

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

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