نظارت بر عملکرد و سرعت سایت با Lighthouse CI

چگونه می توان Lighthouse را با استفاده از Lighthouse CI به یک سیستم یکپارچه سازی پیوسته مانند GitHub Actions اضافه کرد و به صورت دائم سرعت سایت خود را کنترل کنیم؟

اولین بودجه کارایی و سرعت سایت Performance budgets

Lighthouse CI مجموعه‌ای از ابزارها برای استفاده از لایت هاوس در طول فرایند یکپارچه‌سازی مداوم است. Lighthouse CI را می‌توان به طرق مختلف در فرایند توسعه وب‌سایت گنجاند. این مقاله موضوعات زیر را پوشش می‌دهد:

  • استفاده از نسخه خط فرمان Lighthouse CI.
  • پیکربندی ارائه‌دهنده CI برای اجرای Lighthouse CI.
  • راه‌اندازی GitHub Action و بررسی وضعیت Lighthouse CI این ابزار به طور خودکار نتایج لایت هاوس را در درخواست‌های GitHub نمایش می‌دهد.
  • ساخت داشبورد عملکرد و ذخیره داده‌ها برای گزارش‌های Lighthouse.

مقدمه

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
1- نصب Lighthouse CI CLI

Lighthouse CI با قراردادن یک فایل lighthouserc.js در ریشه مخزن پروژه شما پیکربندی می‌شود. این فایل اجباری است و حاوی اطلاعات پیکربندی مربوط به Lighthouse CI است. اگرچه می‌توان Lighthouse CI را برای استفاده بدون مخزن git نیز پیکربندی کرد اما دستورالعمل‌های این مقاله فرض را بر این می‌گیرد که شما از git استفاده می‌کنید.

2- ایجاد فایل lighthouserc.js

در ریشه repository خود، یک فایل پیکربندی lighthouserc.js ایجاد کنید.

2- ایجاد فایل  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 است، با اجرای آن، هر بار که یک تغییر در کد به مخزن گیت‌هاب ارسال می‌شود یک گزارش لایت هاوس از کد جدید ایجاد می‌کند. بنابراین شما می‌توانید در طول فرایند توسعه از وضعیت کارایی و عملکرد صفحات خود اطمینان حاصل نمایید.

راه اندازی GitHub Action برای اجرای Lighthouse CI
راه اندازی GitHub Action برای اجرای Lighthouse CI

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/[email protected]
      - name: Use Node.js 10.x
        uses: actions/[email protected]
        with:
          node-version: 10.x
      - name: npm install
        run: |
          npm install
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/[email protected]
          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 خود مشاهده کنید.

مشاهده اطلاعات commit شده بر اثر اجرای GitHub Action

می‌توانید از تب Actions به گزارش مربوط به یک commit خاص بروید. روی commit کلیک کنید و گردشکار Lighthouse CI انتخاب کنید، سپس نتایج مرحله Lighthouse CI را مشاهده کنید.

می‌توانید از تب Actions به گزارش مربوط به یک commit خاص بروید. روی commit کلیک کنید و گردشکار Lighthouse CI انتخاب کنید، سپس نتایج مرحله Lighthouse CI را مشاهده کنید.

اکنون شما توانستید با موفقیت یک GitHub Action را برای اجرای Lighthouse CI  راه‌اندازی کنید. با این روش می‌توانید در طی فرایند توسعه با هر تغییری که توسعه‌دهنده بر روی سایت اعمال می‌کند را برای مطابقت با بودجه به‌صورت خودکار بررسی کنید.

فعال کردن status check (بررسی وضعیت) در گیت‌هاب

Status check در گیت هاب به شما اطلاع می‌دهد که آیا شرایط خاصی برای معیار مشخصی در یک مخزن مطابقت دارد یا خیر. در ادامه شیوه تنظیم کردن این امکان در گیت هاب را توضیح می‌دهیم.

فعال کردن status check (بررسی وضعیت) در گیت‌هاب

برای فعال سازی status check در گیت هاب مراحل زیر را دنبال کنید:

  • به صفحه برنامه Lighthouse CI GitHub بروید و روی Configure کلیک کنید.
  • اگر می‌خواهید Lighthouse CI را در همه مخازن خود فعال کنید، همه مخازن را انتخاب کنید و اگر فقط می‌خواهید از آن در مخازن خاصی استفاده کنید، فقط مخازن موردنظر را انتخاب کنید، سپس روی Install & Authorize کلیک کنید.
  • توکن نمایش‌داده‌شده را کپی کنید. در مرحله بعد از آن استفاده خواهیم کرد.
  • برای افزودن توکن، به صفحه تنظیمات مخزن GitHub خود بروید، روی Secrets کلیک کنید، سپس روی Add a new secret کلیک کنید.
برای افزودن توکن، به صفحه تنظیمات مخزن 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 برای مشاهده تاریخچه گزارشات و مقایسه آنها
مقایسه دو گزارش Lighthouse در سرور Lighthouse CI
مقایسه دو گزارش Lighthouse در سرور Lighthouse CI
  1. انتخاب کنید که کدام تعهد را مقایسه کنید.
  2. مقداری امتیاز Lighthouse که بین دو commit تغییر کرده است.
  3. این بخش فقط معیارهایی را نشان می دهد که بین دو commit تغییر کرده است.
  4. پسرفت با رنگ صورتی برجسته شده‌اند.
  5. بهبودها با رنگ آبی مشخص شده‌اند.

سرور Lighthouse CI بهترین گزینه برای کاربرانی است که در استقرار و مدیریت زیرساخت‌های خود راحت هستند. برای اطلاعات در مورد راه‌اندازی سرور Lighthouse CI، از جمله دستورالعمل‌های  Heroku  و  Docker به این دستورالعمل‌ها مراجعه کنید.

سوالات متداول

🔗 مستندات نحوه ایجاد Lighthouse CI Server

🔗 نحوه راه اندازی سرور Lighthouse در Azure

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.