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

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

آنتوان بیش
ژیلبرتو کوکی
Gilberto Cocchi
X GitHub
جاناتان چن

AutoWebPerf (AWP) چیست؟

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

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

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

تجسم نتایج حسابرسی در Data Studio

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

Data Studio یک ابزار تجسم رایگان است که می توانید به راحتی معیارهای عملکرد را در آن بارگیری کنید و روندها را به عنوان نمودار ترسیم کنید. برای مثال، نمودارهای سری زمانی زیر Core Web Vitals را بر اساس داده‌های گزارش Chrome 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 را بررسی کنید.

بعدش چی؟

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

در مخزن AutoWebPerf بیشتر بیاموزید.