حفاظ‌های رشد: پیاده‌سازی مانیتورینگ و هشداردهی Core Web Vitals در پایپ‌لاین‌های CI/CD

عملکرد تنها یک ویژگی اختیاری در توسعه وب مدرن نیست؛ بلکه بخشی حیاتی از تجربه کاربر، رتبه‌بندی سئو و نرخ تبدیل کسب‌وکار است. با معرفی Core Web Vitals توسط گوگل، اندازه‌گیری عملکرد از یک تمرین واکنشی به یک نیاز پیشگیرانه تبدیل شده است. با این حال، تکیه بر ممیزی‌های دستی دیگر برای تیم‌هایی که از ادغام پیوسته و استقرار پیوسته (CI/CD) استفاده می‌کنند، کافی نیست. در این مقاله، بررسی می‌کنیم که چگونه می‌توان مانیتورینگ و هشداردهی Core Web Vitals را مستقیماً درون پایپ‌لاین‌های CI/CD خود خودکار کرد تا افت‌های عملکرد پیش از رسیدن به محیط تولید شناسایی شوند.

چرا عملکرد را به CI/CD یکپارچه کنیم؟

آزمون‌های عملکرد سنتی اغلب پس از استقرار یا در محیط‌های ایزوله‌ای انجام می‌شوند که شرایط دنیای واقعی را منعکس نمی‌کنند. با یکپارچه‌سازی بررسی‌های Core Web Vitals در پایپ‌لاین CI/CD خود، یک «بودجه عملکرد» برای هر درخواست تغییر (Pull Request) ایجاد می‌کنید. این رویکرد تضمین می‌کند که:

• افت‌های عملکرد زودتر شناسایی شوند: تغییراتی در کد که باعث افت LCP (بزرگ‌ترین نقاشی محتوایی)، FID (تأخیر ورودی اول) یا CLS (جابجایی تجمعی چیدمان) می‌شوند، بلافاصله علامت‌گذاری می‌شوند.
• عملکرد به یک مسئولیت مشترک تبدیل شود: توسعه‌دهندگان بازخورد فوری درباره تأثیر عملکرد کد خود دریافت می‌کنند.
• اعتماد به استقرار افزایش یابد: بررسی‌های خودکار یک شبکه ایمنی در برابر افت‌های ناخواسته عملکرد فراهم می‌کنند.

انتخاب ابزار مناسب

در حالی که Lighthouse استاندارد طلایی برای تولید گزارش‌های عملکرد است، اجرای آن در محیط مرورگر بدون رابط کاربری (headless) درون یک پایپ‌لاین CI/CD می‌تواند از نظر منابع سنگین باشد. برای بررسی‌های سبک‌تر و سریع‌تر، ابزارهایی مانند puppeteer، playwright یا سرویس‌های تخصصی مانند WebPageTest API گزینه‌های عالی هستند. در عوض، lighthouse-ci یک ابزار خط فرمان (CLI) قدرتمند است که به طور خاص برای این منظور طراحی شده است.

در این راهنما، بر یکپارچه‌سازی lighthouse-ci از طریق GitHub Actions تمرکز خواهیم کرد، زیرا این ابزار تعادلی روان بین معیارهای دقیق و سهولت یکپارچه‌سازی ارائه می‌دهد.

راه‌اندازی پایپ‌لاین

برای شروع، باید Lighthouse CI CLI را به عنوان یک وابستگی توسعه (dev dependency) در پروژه خود نصب کنید. این کار به شما امکان می‌دهد ممیزی‌ها را به صورت محلی و در محیط CI اجرا کنید.

npm install --save-dev @lhci/cli

سپس، یک فایل پیکربندی به نام .lighthouserc.json ایجاد کنید تا بودجه‌های عملکرد خود را تعریف کنید. این فایل به ابزار CI می‌گوید که کدام معیارها را ردیابی کند و آستانه‌های قابل قبول چه میزان هستند.

{
  "ci": {
    "collect": {
      "numberOfRuns": 3,
      "settings": {
        "preset": "desktop"
      }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "first-input-delay": ["error", { "maxNumericValue": 100 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "filesystem"
    }
  }
}

در این پیکربندی، ما تأیید می‌کنیم که دسته عملکرد کلی باید حداقل نمره 0.9 را کسب کند. همچنین محدودیت‌های عددی سخت‌گیرانه‌ای برای LCP (2.5 ثانیه)، FID (100 میلی‌ثانیه) و CLS (0.1) تنظیم کرده‌ایم. اگر هر یک از این آستانه‌ها نقض شوند، ساخت CI با شکست مواجه خواهد شد.

یکپارچه‌سازی با GitHub Actions

حال بیایید این موارد را به پایپ‌لاین CI/CD خود متصل کنیم. یک فایل گردش کار (workflow) در .github/workflows/performance.yml ایجاد کنید. این اسکریپت در هر درخواست تغییر فعال شده، معیارها را جمع‌آوری کرده و نتایج را گزارش می‌دهد.

name: Performance CI

on: [pull_request]

jobs:
  lighthouse-ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run local server
        run: npm start &
        working-directory: ./
        continue-on-error: true

      - name: Audit URLs
        run: npx @lhci/cli@0.9.x collect --url=http://localhost:3000

برای اطمینان از اینکه پایپ‌لاین بازخورد عملیاتی ارائه می‌دهد، باید پلاگین Lighthouse CI را نیز پیکربندی کنید تا نظراتی را در درخواست تغییر پست کند. این کار دیدگاه فوری به توسعه‌دهندگان می‌دهد که کدام معیارهای خاص شکست خورده‌اند و به چه میزان.

هشداردهی و مانیتورینگ پیشرفته

در حالی که شکست دادن یک ساخت برای جلوگیری از ادغام کدهای نامناسب موثر است، اما به ردیابی روندها در طول زمان یا هشدار در مورد ناهنجاری‌های محیط تولید کمک نمی‌کند. برای مانیتورینگ جامع، در نظر بگیرید که با سرویس‌هایی مانند Google Lighthouse CI API یکپارچه شوید تا گزارش‌ها را به یک داشبورد آپلود کنید. سپس می‌توانید هشدارهایی را در Slack یا ایمیل تنظیم کنید اگر استقرار منجر به افت قابل توجهی در نمرات Core Web Vitals نسبت به خط مبنا شود.

نتیجه‌گیری

پیاده‌سازی مانیتورینگ Core Web Vitals در پایپ‌لاین CI/CD شما، عملکرد را از یک مفهوم انتزاعی به یک معیار کیفیت قابل اندازه‌گیری و اجرایی تبدیل می‌کند. با خودکار کردن این بررسی‌ها، به تیم خود قدرت می‌دهید تا سریع‌تر منتشر کند بدون آنکه از تجربه کاربری کاسته شود. با افزودن یک معیار واحد شروع کنید و به تدریج بودجه‌های عملکرد خود را با بلوغ اپلیکیشن خود گسترش دهید. نتیجه، یک وب‌اپلیکیشن قوی‌تر، پرسرعت‌تر و کاربرپسندتر خواهد بود.