ممیزی خودکار با AutoWebPerf

یک ابزار ماژولار جدید که امکان جمع‌آوری خودکار داده‌های عملکرد از منابع مختلف را فراهم می‌کند.

گیلبرتو کوچی
Gilberto Cocchi
جاناتان چن
Jonathan Chen

AutoWebPerf (AWP) چیست؟

AutoWebPerf (AWP) ابزاری ماژولار است که امکان جمع‌آوری خودکار داده‌های عملکرد از منابع مختلف را فراهم می‌کند. در حال حاضر ابزارهای زیادی برای اندازه‌گیری عملکرد وب‌سایت در حوزه‌های مختلف ( آزمایشگاهی و میدانی ) مانند Chrome UX Report، 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 بخش سنگین کل فرآیند را خودکار می‌کند و آن را به یک راه حل عالی برای دنبال کردن روندهای آزمایشگاهی و میدانی در طول زمان تبدیل می‌کند. برای جزئیات بیشتر به بخش مصورسازی نتایج حسابرسی در Data Studio در زیر مراجعه کنید.

نمای کلی معماری

AWP یک کتابخانه مبتنی بر ماژولار است که سه نوع ماژول مختلف دارد:

  • موتور
  • ماژول‌های کانکتور
  • ماژول‌های جمع‌آوری‌کننده

موتور، فهرستی از تست‌ها را از یک رابط (مثلاً از یک فایل CSV محلی) می‌گیرد، ممیزی‌های عملکرد را از طریق گردآورنده‌های منتخب (مانند PageSpeed ​​Insights) اجرا می‌کند و نتایج را در رابط خروجی (مثلاً Google Sheets) می‌نویسد.

نموداری از معماری AWP.

AWP با تعدادی از گردآورنده‌ها و کانکتورهای از پیش پیاده‌سازی شده ارائه می‌شود:

خودکارسازی ممیزی‌ها با AWP

AWP ممیزی‌های عملکرد را از طریق پلتفرم‌های ممیزی مورد نظر شما مانند PageSpeed ​​Insights ، WebPageTest یا CrUX API خودکار می‌کند. AWP انعطاف‌پذیری لازم را برای انتخاب محل بارگذاری لیست تست‌ها و محل نوشتن نتایج ارائه می‌دهد.

برای مثال، می‌توانید با دستور زیر، حسابرسی‌هایی را برای لیستی از تست‌های ذخیره شده در یک Google Sheet اجرا کنید و نتایج را در یک فایل 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 job روزانه اجرا کند:

0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

می‌توانید روش‌های بیشتری برای خودکارسازی حسابرسی‌های روزانه و جمع‌آوری نتایج را در مخزن گیت‌هاب AWP بیابید.

مصورسازی نتایج حسابرسی در دیتا استودیو

در کنار اندازه‌گیری مداوم Core Web Vitals، مهم است که بتوانید روندها را ارزیابی کرده و رگرسیون‌های بالقوه را با معیارهای کاربر واقعی (RUM) یا داده‌های گزارش UX کروم (CrUX) که توسط AWP جمع‌آوری شده است، کشف کنید. توجه داشته باشید که گزارش UX کروم (CrUX) یک مجموعه متحرک ۲۸ روزه است، از این رو توصیه می‌شود از داده‌های RUM خود نیز به همراه CrUX استفاده کنید تا بتوانید رگرسیون‌ها را زودتر تشخیص دهید.

دیتا استودیو یک ابزار تجسم رایگان است که می‌توانید به راحتی معیارهای عملکرد را در آن بارگذاری کرده و روندها را به صورت نمودار رسم کنید. به عنوان مثال، نمودارهای سری زمانی زیر، Core Web Vitals را بر اساس داده‌های گزارش UX کروم نشان می‌دهند. یکی از نمودارها، افزایش تغییر چیدمان تجمعی را در هفته‌های اخیر نشان می‌دهد، که به معنای پسرفت در پایداری چیدمان برای صفحات خاص است. در این سناریو، شما می‌خواهید تلاش‌ها را برای تجزیه و تحلیل مشکلات اساسی این صفحات در اولویت قرار دهید.

تصویری از نتایج 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 ایجاد کنید که داده‌ها را مستقیماً از صفحه گسترده بارگذاری می‌کند و روندها را در یک نمودار سری زمانی ترسیم می‌کند. برای مراحل دقیق نحوه راه‌اندازی AWP با صفحات گسترده به عنوان منبع داده برای تجسم در Data Studio، به Google Spreadsheets API Connector مراجعه کنید.

بعدش چی؟

AWP روشی ساده و یکپارچه برای به حداقل رساندن تلاش‌ها برای راه‌اندازی یک خط لوله نظارت مداوم برای اندازه‌گیری Core Web Vitals و سایر معیارهای عملکرد ارائه می‌دهد. در حال حاضر، AWP رایج‌ترین موارد استفاده را پوشش می‌دهد و در آینده به ارائه ویژگی‌های بیشتر برای رسیدگی به سایر موارد استفاده ادامه خواهد داد.

برای اطلاعات بیشتر به مخزن AutoWebPerf مراجعه کنید.