نظارت بر عملکرد و سرعت سایت با Lighthouse CI
Lighthouse CI مجموعهای از ابزارها برای استفاده از لایت هاوس در طول فرایند یکپارچهسازی مداوم است. Lighthouse CI را میتوان به طرق مختلف در فرایند توسعه وبسایت گنجاند. این مقاله موضوعات زیر را پوشش میدهد:
آنچه در این مقاله می‌خوانیم
مقدمه
Lighthouse CI مجموعهای از ابزارهای رایگان است که استفاده از Lighthouse را برای نظارت بر عملکرد تسهیل میکند. یک گزارش Lighthouse یک تصویر فوری از عملکرد یک صفحه وب در زمان اجرا را ارائه میدهد. Lighthouse CI نشان میدهد که چگونه این یافته‌ها در طول زمان تغییر کرده‌اند. این کار می‌تواند برای شناسایی تأثیر تغییرات یک کد خاص یا اطمینان از برآورده شدن آستانه‌های عملکرد در طول فرایندهای یکپارچهسازی مداوم مورداستفاده قرار گیرد. اگرچه نظارت بر عملکرد رایج‌ترین مورداستفاده برای Lighthouse CI است، اما میتوان از آن برای نظارت بر سایر جنبه‌های گزارش Lighthouse استفاده کرد – به‌عنوان‌مثال، SEO یا دسترسی پذیری.
Lighthouse CI CLI
رابط خط فرمان Lighthouse CI تمامی قابلیتهای اصلی این ابزار را در خود جا داده است (توجه: این ابزار جدا از Lighthouse CLI است). Lighthouse CI CLI مجموعهای از دستورها را برای استفاده از Lighthouse CI ارائه میدهد. به‌عنوان‌مثال، دستور autorun چندین اجرای هم‌زمان Lighthouse را اجرا و گزارش را برای ذخیره‌سازی آپلود میکند. این رفتار را میتوان با ارسال پرچم‌ها (flag) اضافی یا تنظیم فایل پیکربندی lighthouserc.js، سفارشی کرد.
اگرچه اصلی‌ترین روش به‌کارگیری لایت هاوس استفاده نسخه خط فرمان (Lighthouse CI) است اما رویکردهای دیگری برای استفاده از آن نیز وجود دارد:
- اجرای Lighthouse CI به‌عنوان بخشی از یکپارچگی مداوم (continuous integration)
- استفاده از GitHub Action برای بررسی همه درخواست‌ها
- کنترل عملکرد و سرعت سایت در طول زمان از طریق داشبورد ارائه شده توسط سرور Lighthouse.
همه این رویکردها بر اساس Lighthouse CI CLI ساخته شده‌اند.
اگر به دنبال جایگزینی برای Lighthouse CI هستید میتوانید از سرویس‌های کنترل عملکرد شخص ثالث یا اسکریپت شخصی خودتان برای جمع‌آوری دادههای عملکرد و سرعت در طول فرایند CI استفاده کنید.
استفاده از Lighthouse CI به صورت لوکال (local)
در این بخش نحوه اجرا و نصب Lighthouse CI CLI به‌صورت محلی (مثلاً بر روی ویندوز 11) و نحوه پیکربندی lighthouserc.js را توضیح می‌دهیم. اجرای Lighthouse CI CLI به‌صورت محلی ساده‌ترین راه برای بررسی صحت پیکربندی lighthouserc.js است.
1- نصب Lighthouse CI CLI
برای نصب پکیج Lighthouse CI CLI در محیط خط فرمان دستور زیر را اجرا کنید (ما این پکیج را در CMD ویندوز 11 نصب کرده‌ایم)
npm install -g @lhci/cli
Lighthouse CI با قراردادن یک فایل lighthouserc.js در ریشه مخزن پروژه شما پیکربندی می‌شود. این فایل اجباری است و حاوی اطلاعات پیکربندی مربوط به Lighthouse CI است. اگرچه میتوان Lighthouse CI را برای استفاده بدون مخزن git نیز پیکربندی کرد اما دستورالعمل‌های این مقاله فرض را بر این می‌گیرد که شما از git استفاده می‌کنید.
2- ایجاد فایل lighthouserc.js
در ریشه repository خود، یک فایل پیکربندی lighthouserc.js ایجاد کنید.
3- تنظیمات فایل پیکربندی
کد زیر را به lighthouserc.js اضافه کنید. این کد یک پیکربندی خالی Lighthouse CI است. در مراحل بعدی تنظیمات خودمان را به این پیکربندی اضافه خواهید کرد.
module.exports = {
ci: {
collect: {
/* Add configuration here */
},
upload: {
/* Add configuration here */
},
},
};
4- تنظیمات سرور
Lighthouse CI در هر بار اجرا سروری را برای سرویس دادن به سایت شما راه‌اندازی میکند. این سرور همان چیزی است که Lighthouse را قادر می‌سازد تا سایت شما را حتی زمانی که هیچ سرور دیگری در حال اجرا نیست بارگذاری کند. هنگامی که Lighthouse CI به پایان رسید، به طور خودکار سرور را خاموش میکند. برای اطمینان از اینکه سرویس به‌درستی کار میکند، باید خصوصیات staticDistDir یا startServerCommand را پیکربندی کنید.
اگر سایت شما استاتی است، ویژگی staticDistDir را به شیء ci.collect اضافه کنید تا مشخص کنید فایل‌های استاتیک شما در کجا قرار دارند. Lighthouse CI از سرور اختصاصی خود برای ارائه این فایل‌ها هنگام تست سایت شما استفاده میکند. اگر سایت شما static نیست، ویژگی startServerCommand را به شیء ci.collect اضافه کنید.
// Static site example
collect: {
staticDistDir: './public',
}
// Dynamic site example
collect: {
startServerCommand: 'npm run start',
}
5- افزودن ادرس صفحات مورد نظر
برای اجرای Lighthouse CI بر روی یک آدرس خاص باید آن را در خاصیت url کلاس ci.collect وارد کنیم. مقدار ویژگی url باید به‌صورت آرایه‌ای از آدرس‌ها وارد شود. این آرایه می‌تواند شامل یک یا چند URL باشد. به طور پیش‌فرض، Lighthouse CI سه بار لایت هاوس را بر روی هر URL اجرا میکند.
collect: {
// ...
url: ['http://localhost:8080']
}
توجه: این URLها باید توسط سروری که در مرحله قبل پیکربندی کرده‌اید قابل‌دسترس باشند.
6- تعیین مکان ذخیره گزارش Lighthouse
ویژگی target را به شیء ci.upload اضافه کنید و مقدار را روی “temporary-public-storage” تنظیم کنید. با این کار گزارش‌های Lighthouse جمع‌آوری‌شده توسط Lighthouse CI در یک فضای ذخیره‌سازی عمومی موقت آپلود خواهد شد. گزارش به مدت هفت روز در آنجا باقی می‌ماند و سپس به طور خودکار حذف می‌شود. در این مثال از گزینه آپلود «فضای عمومی موقت» استفاده می‌کنیم زیرا راه‌اندازی آن سریع است. برای اطلاعات بیشتر در مورد روش‌های دیگر ذخیره گزارش‌های Lighthouse، به مستندات مراجعه کنید.
upload: {
target: 'temporary-public-storage',
}
محل ذخیره سازی گزارش چیزی مشابه آدرس زیر خواهد بود:
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
7- اجرای Lighthouse CI CLI
با استفاده از دستور autorun در خط فرمان Lighthouse CI CLI را اجرا کنید. این دستور Lighthouse را سه بار اجرا کرده و گزارش نهایی آن را آپلود میکند.
lhci autorun
اگر Lighthouse CI را به‌درستی پیکربندی کرده باشید، اجرای این دستور باید خروجی مشابه این تصویر زیر تولید کند.
✅ .lighthouseci/ directory writable ✅ Configuration file found ✅ Chrome installation found ⚠️ GitHub token not set Healthcheck passed! Started a web server on port 65324... Running Lighthouse 3 time(s) on http://localhost:65324/index.html Run #1...done. Run #2...done. Run #3...done. Done running Lighthouse! Uploading median LHR of http://localhost:65324/index.html...success! Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html No GitHub token set, skipping GitHub status check. Done running autorun.
میتوانید اخطار تنظیم نشدن GitHub (⚠️ GitHub token not set) را در خروجی کنسول نادیده بگیرید. توکن GitHub تنها زمانی ضروری است که بخواهید از Lighthouse CI با یک GitHub Action استفاده کنید. نحوه تنظیم یک اکشن گیت‌هاب در ادامه این مقاله توضیح داده شده است.
گزارش خروجیِ url شما در آدرس انتهایی این گزارش است (آدرسی که با https://storage.googleapis.com شروع می‌شود). برای مشاهده گزارش نهایی Lighthouse به این آدرس بروید.
8- افزایش تعداد اجراهای تست لایت هاوس
به‌صورت پیش‌فرض دستور autorun برای هر آدرس در لیست آدرس‌ها 3 بار فرایند بررسی lighthouse را انجام میدهد. شما میتوانید با تغییر پارامتر numberOfRuns این تعداد را بیشتر و یا کمتر کنید.
برای این‌کار در فایل lighthouserc.js مقدار پارامتر numberOfRuns را تنظیم کنید برای مثال در کد زیر ما تعداد دفعات اجرای تست را بر روی 5 تنظیم کرده‌ایم.
module.exports = {
// ...
collect: {
numberOfRuns: 5
},
// ...
},
};
برای آشنایی با سایر گزینه های پیکربندی، به مستندات پیکربندی Lighthouse CI مراجعه کنید.
استفاده از سایر ابزارهای CI برای اجرای Lighthouse
ابزارهای زیادی برای یکپارچه سازی پیوسته وجود دارند که می‌تونید با استفاده از آنها و لایت هاوس گزارش عملکرد سایت خود را بیازمایید، در ادامه لیستی از مهمترین ابزارهای یکپارچه سازی پیوسته سیستم را می‌بینید:
- Jenkins
- TeamCity
- Bamboo
- Buddy
- GitLab CI
- CircleCI
- TravisCI
Lighthouse CI را میتوان با ابزار CI موردعلاقه خودتان استفاده کنید. توضیح همه این ابزارها از حوصله این مقاله خارج است برای آشنایی بیشتر میتوانید به بخش Configure Your CI Provider در مستندات Lighthouse CI مراجعه کنید، این مستندات شامل نمونه کدهایی است که نشان میدهد چگونه Lighthouse CI را در فایل‌های پیکربندی ابزارهای متداول CI قرار دهید. این نمونه کدها نحوه اجرای لایت هاوس را برای جمع‌آوری و گزارش اندازه‌گیری عملکرد در طول فرایند CI نشان می‌دهند.
راه اندازی GitHub Action برای اجرای Lighthouse CI
برای ادامه این مقاله فرض کرده ایم که شما با git، GitHub و GitHub Pull Requests آشنایی دارید.
یکی از روش‌های اجرای Lighthouse CI استفاده از GitHub Action است، با اجرای آن، هر بار که یک تغییر در کد به مخزن گیت‌هاب ارسال می‌شود یک گزارش لایت هاوس از کد جدید ایجاد میکند. بنابراین شما میتوانید در طول فرایند توسعه از وضعیت کارایی و عملکرد صفحات خود اطمینان حاصل نمایید.
1- در مسیر ریشه مخزن (repository) خود در گیت‌هاب، پوشه‌ای به نام github/workflows ایجاد کنید. گردشکار (workflows) پروژه شما در این پوشه قرار می‌گیرد. گردشکار (workflows) فرایندی است که در یک زمانِ از پیش تعیین شده اجرا می‌شود (مثلاً زمانی که کد جدیدی ارسال شود) و می‌تواند از یک یا چندین عمل تشکیل شده شود.
2- در پوشه github/workflows فایل جدیدی با نام lighthouse-ci.yaml ایجاد کنید. این فایل حاوی تنظیمات پیکربندی گردشکار مورد نظر است. برای شروع کد زیر را در آن کپی کنید.
name: Build project and run Lighthouse CI
on: [push]
jobs:
lhci:
name: Lighthouse CI
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Use Node.js 10.x
uses: actions/setup-node@v1
with:
node-version: 10.x
- name: npm install
run: |
npm install
- name: run Lighthouse CI
run: |
npm install -g @lhci/cli@0.3.x
lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
این پیکربندی یک گردشکار متشکل از یک کار واحد را تنظیم میکند و هر زمان کد جدیدی به مخزن ارسال گردد، اجرا می‌شود. این کار چهار مرحله دارد:
- مخزنی که Lighthouse CI در آن اجرا خواهد شد را بررسی کنید.
- Node را نصب و پیکربندی کنید.
- بسته های npm مورد نیاز را نصب کنید.
- Lighthouse CI را اجرا کنید و نتایج را در ذخیره‌سازی عمومی موقت آپلود کنید.
3- این تغییرات را انجام داده و آنها را به GitHub ارسال کنید. اگر مراحل بالا را به‌درستی انجام داده باشید، با ارسال کد به GitHub، گردشکاری که به‌تازگی اضافه کرده‌اید، اجرا می‌شود.
4- برای اطمینان از اینکه Lighthouse CI به‌درستی راه‌اندازی شده و همچنین برای مشاهده گزارشی که ایجاد کرده است، به تب Actions پروژه خود بروید. شما باید پروژه Build و گردشکار Run Lighthouse CI را در زیر آخرین commit خود مشاهده کنید.
میتوانید از تب Actions به گزارش مربوط به یک commit خاص بروید. روی commit کلیک کنید و گردشکار Lighthouse CI انتخاب کنید، سپس نتایج مرحله Lighthouse CI را مشاهده کنید.
اکنون شما توانستید با موفقیت یک GitHub Action را برای اجرای Lighthouse CI راه‌اندازی کنید. با این روش میتوانید در طی فرایند توسعه با هر تغییری که توسعه‌دهنده بر روی سایت اعمال میکند را برای مطابقت با بودجه به‌صورت خودکار بررسی کنید.
فعال کردن status check (بررسی وضعیت) در گیت‌هاب
Status check در گیت هاب به شما اطلاع میدهد که آیا شرایط خاصی برای معیار مشخصی در یک مخزن مطابقت دارد یا خیر. در ادامه شیوه تنظیم کردن این امکان در گیت هاب را توضیح می‌دهیم.
برای فعال سازی status check در گیت هاب مراحل زیر را دنبال کنید:
- به صفحه برنامه Lighthouse CI GitHub بروید و روی Configure کلیک کنید.
- اگر می‌خواهید Lighthouse CI را در همه مخازن خود فعال کنید، همه مخازن را انتخاب کنید و اگر فقط می‌خواهید از آن در مخازن خاصی استفاده کنید، فقط مخازن موردنظر را انتخاب کنید، سپس روی Install & Authorize کلیک کنید.
- توکن نمایش‌داده‌شده را کپی کنید. در مرحله بعد از آن استفاده خواهیم کرد.
- برای افزودن توکن، به صفحه تنظیمات مخزن GitHub خود بروید، روی Secrets کلیک کنید، سپس روی Add a new secret کلیک کنید.
- فیلد Name را روی LHCI_GITHUB_APP_TOKEN قرار دهید و قسمت Value را روی توکنی که در مرحله آخر کپی کردید تنظیم کنید و سپس روی دکمه Add Secret کلیک کنید.
- status check آماده استفاده است.
استفاده از سرور Lighthouse CI برای مشاهده و مقایسه تاریخچه گزارشات
سرور Lighthouse CI یک داشبورد برای کاوش در تاریخچه گزارش‌های Lighthouse ارائه میدهد. همچنین می‌تواند به‌عنوان یک بانک اطلاعاتی خصوصی و طولانی‌مدت برای گزارش‌های Lighthouse استفاده شود.
سرور Lighthouse CI بهترین گزینه برای کاربرانی است که در استقرار و مدیریت زیرساخت‌های خود راحت هستند. برای اطلاعات در مورد راه‌اندازی سرور Lighthouse CI، از جمله دستورالعمل‌های Heroku و Docker به این دستورالعمل‌ها مراجعه کنید.