تست عملکرد فرانت‌اند: یکپارچه‌سازی Lighthouse CI برای بهبود مستمر

در چشم‌انداز دیجیتال امروزی، عملکرد وب‌سایت از اهمیت بالایی برخوردار است. زمان بارگذاری کند، مشکلات دسترسی‌پذیری و سئوی ضعیف می‌تواند به طور قابل توجهی بر تجربه کاربر و در نتیجه، بر نتایج کسب‌وکار تأثیر بگذارد. تست عملکرد فرانت‌اند به بخش جدایی‌ناپذیر چرخه عمر توسعه نرم‌افزار مدرن تبدیل شده است و اطمینان می‌دهد که وب‌سایت‌ها و برنامه‌های وب برای مخاطبان جهانی سریع، قابل اعتماد و کاربرپسند هستند. این مقاله به بررسی یکپارچه‌سازی Lighthouse CI، یک ابزار قدرتمند متن‌باز، در خط لوله یکپارچه‌سازی مداوم (CI) شما برای خودکارسازی تست عملکرد فرانت‌اند و پیشبرد بهبود مستمر می‌پردازد.

چرا تست عملکرد فرانت‌اند مهم است؟

قبل از پرداختن به Lighthouse CI، بیایید درک کنیم که چرا تست عملکرد فرانت‌اند حیاتی است:

• تجربه کاربری: یک وب‌سایت سریع و واکنش‌گرا تجربه کاربری بهتری را فراهم می‌کند که منجر به افزایش تعامل و کاهش نرخ پرش (bounce rate) می‌شود. تصور کنید یک مشتری بالقوه در توکیو، ژاپن، در تلاش برای خرید محصولی از یک سایت تجارت الکترونیک با بارگذاری کند است. به احتمال زیاد، او سایت را رها کرده و به دنبال گزینه‌های جایگزین خواهد بود.
• رتبه سئو: موتورهای جستجو مانند گوگل، سرعت و عملکرد وب‌سایت را به عنوان فاکتورهای رتبه‌بندی در نظر می‌گیرند. وب‌سایت‌های سریع‌تر تمایل دارند در نتایج جستجو رتبه بالاتری کسب کنند و ترافیک ارگانیک بیشتری را جذب کنند. ابتکار Core Web Vitals گوگل بر اهمیت فاکتورهایی مانند Largest Contentful Paint (LCP)، First Input Delay (FID) و Cumulative Layout Shift (CLS) برای سئو تأکید دارد.
• دسترسی‌پذیری: بهبود عملکرد اغلب منجر به دسترسی‌پذیری بهتر برای کاربران دارای معلولیت می‌شود. کد و تصاویر بهینه‌سازی شده می‌تواند تجربه کاربری را برای کاربرانی که به صفحه‌خوان‌ها متکی هستند یا پهنای باند محدودی دارند، بهبود بخشد.
• نرخ تبدیل: یک وب‌سایت سریع‌تر می‌تواند مستقیماً بر نرخ تبدیل تأثیر بگذارد. مطالعات نشان داده‌اند که حتی تأخیر یک ثانیه‌ای در زمان بارگذاری صفحه می‌تواند منجر به کاهش قابل توجهی در تبدیل‌ها شود. کاربری را در بمبئی، هند، در نظر بگیرید که سعی در رزرو پرواز دارد. یک فرآیند رزرو کند می‌تواند باعث شود او خرید را رها کرده و رقیب دیگری را انتخاب کند.
• بهینه‌سازی منابع: تست عملکرد به شناسایی مناطقی که منابع می‌توانند بهینه‌سازی شوند کمک می‌کند و منجر به صرفه‌جویی در هزینه‌های زیرساخت سرور و استفاده از پهنای باند می‌شود.

معرفی Lighthouse CI

Lighthouse CI یک ابزار متن‌باز و خودکار است که برای یکپارچه‌سازی بی‌نقص با خط لوله CI/CD شما طراحی شده است. این ابزار Lighthouse، یک ابزار حسابرسی محبوب توسعه‌یافته توسط گوگل، را اجرا می‌کند و بینش‌هایی در مورد عملکرد، دسترسی‌پذیری، سئو، بهترین شیوه‌ها و انطباق با Progressive Web App (PWA) وب‌سایت شما ارائه می‌دهد. Lighthouse CI به شما کمک می‌کند:

• خودکارسازی حسابرسی‌های عملکرد: حسابرسی‌های Lighthouse را به طور خودکار با هر کامیت یا پول رکوئست اجرا کنید.
• پیگیری عملکرد در طول زمان: معیارهای عملکرد را در طول زمان نظارت کرده و پسرفت‌ها را در مراحل اولیه شناسایی کنید.
• تعیین بودجه‌های عملکرد: بودجه‌های عملکرد را تعریف کنید و در صورت تجاوز از آن‌ها، بیلد را ناموفق کنید.
• یکپارچه‌سازی با سیستم‌های CI/CD: با سیستم‌های محبوب CI/CD مانند GitHub Actions، GitLab CI، CircleCI و Jenkins یکپارچه شوید.
• همکاری در مورد مشکلات عملکرد: گزارش‌های Lighthouse را به اشتراک بگذارید و با تیم خود برای حل مشکلات عملکرد همکاری کنید.

راه‌اندازی Lighthouse CI

در اینجا یک راهنمای گام به گام برای راه‌اندازی Lighthouse CI در پروژه شما آورده شده است:

۱. نصب Lighthouse CI

CLI Lighthouse CI را با استفاده از npm یا yarn به صورت سراسری نصب کنید:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

۲. پیکربندی Lighthouse CI

یک فایل lighthouserc.js در دایرکتوری ریشه پروژه خود برای پیکربندی Lighthouse CI ایجاد کنید. در اینجا یک نمونه پیکربندی آمده است:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

بیایید این پیکربندی را بررسی کنیم:

• collect.url: آرایه‌ای از URLها برای حسابرسی. این مثال صفحه اصلی و صفحه «درباره ما» را حسابرسی می‌کند. شما باید تمام صفحات حیاتی وب‌سایت خود را با در نظر گرفتن موارد استفاده مختلف، شامل کنید. به عنوان مثال، یک سایت تجارت الکترونیک ممکن است شامل صفحه اصلی، صفحات لیست محصولات، صفحات جزئیات محصول و فرآیند تسویه حساب باشد.
• collect.startServerCommand: دستوری برای راه‌اندازی سرور توسعه شما. این دستور در صورتی ضروری است که Lighthouse CI نیاز به اجرا در برابر یک محیط توسعه محلی داشته باشد.
• collect.numberOfRuns: تعداد دفعاتی که حسابرسی‌های Lighthouse برای هر URL اجرا می‌شود. اجرای چندین حسابرسی به کاهش نوسانات در شرایط شبکه و سایر عوامل کمک می‌کند.
• assert.assertions: مجموعه‌ای از ادعاها (assertions) برای تأیید نتایج حسابرسی Lighthouse. هر ادعا یک متریک یا دسته‌بندی و یک آستانه را مشخص می‌کند. اگر آستانه رعایت نشود، بیلد ناموفق خواهد شد. این مثال آستانه‌هایی را برای دسته‌بندی‌های عملکرد، دسترسی‌پذیری، بهترین شیوه‌ها و سئو تعیین می‌کند. همچنین آستانه‌هایی برای معیارهای خاص مانند First Contentful Paint (FCP)، Largest Contentful Paint (LCP)، Total Blocking Time (TBT) و Cumulative Layout Shift (CLS) تعیین می‌کند.
• upload.target: مشخص می‌کند که گزارش‌های Lighthouse کجا آپلود شوند. temporary-redirect گزارش‌ها را به یک مکان ذخیره‌سازی موقت آپلود می‌کند و یک URL برای دسترسی به آن‌ها فراهم می‌کند. گزینه‌های دیگر شامل استفاده از سرور Lighthouse CI یا راه‌حل‌های ذخیره‌سازی ابری مانند Google Cloud Storage یا Amazon S3 است.

۳. یکپارچه‌سازی با سیستم CI/CD شما

مرحله بعدی، یکپارچه‌سازی Lighthouse CI در خط لوله CI/CD شما است. در اینجا نمونه‌ای از نحوه یکپارچه‌سازی آن با GitHub Actions آورده شده است:

یک فایل .github/workflows/lighthouse.yml در مخزن خود ایجاد کنید:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

این گردش کار مراحل زیر را انجام می‌دهد:

• کد را چک‌اوت می‌کند.
• Node.js را راه‌اندازی می‌کند.
• وابستگی‌ها را نصب می‌کند.
• Lighthouse CI را اجرا می‌کند. این مرحله ابتدا برنامه را بیلد می‌کند (npm run build)، سپس lhci autorun را اجرا می‌کند که حسابرسی‌های Lighthouse را انجام داده و نتایج را با آستانه‌های پیکربندی شده مقایسه می‌کند.

این گردش کار را با سیستم CI/CD و نیازمندی‌های پروژه خاص خود تطبیق دهید. به عنوان مثال، اگر از GitLab CI استفاده می‌کنید، یک فایل .gitlab-ci.yml با مراحل مشابه پیکربندی خواهید کرد.

۴. اجرای Lighthouse CI

تغییرات خود را کامیت کرده و به مخزن خود پوش کنید. خط لوله CI/CD به طور خودکار Lighthouse CI را اجرا خواهد کرد. اگر هر یک از ادعاها ناموفق شود، بیلد ناموفق خواهد شد و بازخورد ارزشمندی را به توسعه‌دهندگان ارائه می‌دهد. گزارش‌های Lighthouse CI در URL ارائه شده توسط سیستم CI/CD در دسترس خواهند بود.

پیکربندی پیشرفته و سفارشی‌سازی

Lighthouse CI طیف گسترده‌ای از گزینه‌های پیکربندی و امکانات سفارشی‌سازی را ارائه می‌دهد. در اینجا برخی از ویژگی‌های پیشرفته آورده شده است:

۱. استفاده از سرور Lighthouse CI

سرور Lighthouse CI یک داشبورد متمرکز برای پیگیری معیارهای عملکرد در طول زمان، مدیریت پروژه‌ها و همکاری در مورد مشکلات عملکرد فراهم می‌کند. برای استفاده از سرور Lighthouse CI، باید یک نمونه از آن را راه‌اندازی کرده و فایل lighthouserc.js خود را برای آپلود گزارش‌ها به سرور پیکربندی کنید.

ابتدا، سرور را مستقر کنید. گزینه‌های مختلفی برای استقرار وجود دارد، از جمله Docker، Heroku و ارائه‌دهندگان ابری مانند AWS و Google Cloud. برای دستورالعمل‌های دقیق در مورد استقرار سرور، به مستندات Lighthouse CI مراجعه کنید.

پس از راه‌اندازی سرور، فایل lighthouserc.js خود را برای اشاره به سرور به‌روز کنید:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

YOUR_LHCI_SERVER_URL را با URL سرور Lighthouse CI خود و YOUR_LHCI_SERVER_TOKEN را با توکن تولید شده توسط سرور جایگزین کنید. این توکن خط لوله CI شما را با سرور احراز هویت می‌کند.

۲. تعیین بودجه‌های عملکرد

بودجه‌های عملکرد، آستانه‌های قابل قبول برای معیارهای خاص را تعریف می‌کنند. Lighthouse CI به شما امکان می‌دهد بودجه‌های عملکرد را تعیین کرده و در صورت تجاوز از آن بودجه‌ها، بیلد را ناموفق کنید. این کار به جلوگیری از پسرفت عملکرد کمک می‌کند و تضمین می‌کند که وب‌سایت شما در محدوده‌های عملکرد قابل قبول باقی بماند.

شما می‌توانید بودجه‌های عملکرد را در فایل lighthouserc.js خود با استفاده از ویژگی assert.assertions تعریف کنید. به عنوان مثال، برای تعیین بودجه عملکرد برای First Contentful Paint (FCP)، می‌توانید ادعای زیر را اضافه کنید:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

این ادعا در صورتی که FCP بیشتر از ۲۵۰۰ میلی‌ثانیه باشد، بیلد را ناموفق خواهد کرد.

۳. سفارشی‌سازی پیکربندی Lighthouse

Lighthouse CI به شما امکان می‌دهد پیکربندی Lighthouse را برای مطابقت با نیازهای خاص خود سفارشی کنید. می‌توانید تنظیمات مختلف Lighthouse را پیکربندی کنید، مانند:

• onlyAudits: لیستی از حسابرسی‌ها برای اجرا را مشخص کنید.
• skipAudits: لیستی از حسابرسی‌ها برای نادیده گرفتن را مشخص کنید.
• throttling: تنظیمات محدودسازی شبکه (throttling) را برای شبیه‌سازی شرایط مختلف شبکه پیکربندی کنید.
• formFactor: فاکتور فرم (دسکتاپ یا موبایل) را برای شبیه‌سازی مشخص کنید.
• screenEmulation: تنظیمات شبیه‌سازی صفحه نمایش را پیکربندی کنید.

برای سفارشی‌سازی پیکربندی Lighthouse، می‌توانید یک فلگ --config-path را به دستور lhci autorun ارسال کنید که به یک فایل پیکربندی سفارشی Lighthouse اشاره دارد. برای لیست کامل گزینه‌های پیکربندی، به مستندات Lighthouse مراجعه کنید.

۴. حسابرسی صفحات نیازمند احراز هویت

حسابرسی صفحات نیازمند احراز هویت نیازمند رویکردی کمی متفاوت است. شما باید راهی برای احراز هویت به Lighthouse CI قبل از اجرای حسابرسی‌ها فراهم کنید. این کار می‌تواند با استفاده از کوکی‌ها یا با اسکریپت‌نویسی فرآیند ورود انجام شود.

یک رویکرد رایج، استفاده از فلگ --extra-headers برای ارسال کوکی‌های احراز هویت به Lighthouse CI است. شما می‌توانید کوکی‌ها را پس از ورود به وب‌سایت از ابزارهای توسعه‌دهنده مرورگر خود دریافت کنید.

به عنوان جایگزین، می‌توانید از یک اسکریپت Puppeteer برای خودکارسازی فرآیند ورود و سپس اجرای حسابرسی‌های Lighthouse بر روی صفحات احراز هویت شده استفاده کنید. این رویکرد انعطاف‌پذیری بیشتری فراهم می‌کند و به شما امکان می‌دهد سناریوهای پیچیده احراز هویت را مدیریت کنید.بهترین شیوه‌ها برای تست عملکرد فرانت‌اند با Lighthouse CI

برای به حداکثر رساندن مزایای Lighthouse CI، این بهترین شیوه‌ها را دنبال کنید:

• Lighthouse CI را به طور منظم اجرا کنید: Lighthouse CI را در خط لوله CI/CD خود ادغام کنید تا حسابرسی‌ها به طور خودکار با هر کامیت یا پول رکوئست اجرا شوند. این کار تضمین می‌کند که پسرفت‌های عملکرد زود هنگام شناسایی و به سرعت برطرف می‌شوند.
• بودجه‌های عملکرد واقع‌بینانه تعیین کنید: بودجه‌های عملکردی را تعریف کنید که چالش‌برانگیز اما قابل دستیابی باشند. با بودجه‌های محافظه‌کارانه شروع کنید و به تدریج با بهبود عملکرد وب‌سایت، آن‌ها را سخت‌گیرانه‌تر کنید. در نظر بگیرید که بودجه‌های مختلفی را برای انواع مختلف صفحات، بسته به پیچیدگی و اهمیت آن‌ها، تعیین کنید.
• بر روی معیارهای کلیدی تمرکز کنید: معیارهای کلیدی عملکرد را که بیشترین تأثیر را بر تجربه کاربری و نتایج کسب‌وکار دارند، اولویت‌بندی کنید. Core Web Vitals گوگل (LCP، FID و CLS) نقطه شروع خوبی هستند.
• مشکلات عملکرد را بررسی و برطرف کنید: هنگامی که Lighthouse CI مشکلات عملکرد را شناسایی می‌کند، آن‌ها را به طور کامل بررسی کرده و راه‌حل‌های مناسب را پیاده‌سازی کنید. از گزارش‌های Lighthouse برای شناسایی علل ریشه‌ای مشکلات و اولویت‌بندی تأثیرگذارترین اصلاحات استفاده کنید.
• عملکرد را در طول زمان نظارت کنید: معیارهای عملکرد را در طول زمان پیگیری کنید تا روندها و الگوها را شناسایی کنید. از سرور Lighthouse CI یا سایر ابزارهای نظارتی برای تجسم داده‌های عملکرد و شناسایی زمینه‌های بهبود استفاده کنید.
• تیم خود را آموزش دهید: اطمینان حاصل کنید که تیم شما اهمیت عملکرد فرانت‌اند و نحوه استفاده مؤثر از Lighthouse CI را درک می‌کند. آموزش و منابعی را برای کمک به آن‌ها در بهبود مهارت‌ها و دانش خود فراهم کنید.
• شرایط شبکه جهانی را در نظر بگیرید: هنگام تعیین بودجه‌های عملکرد، شرایط شبکه در نقاط مختلف جهان را در نظر بگیرید. کاربران در مناطقی با سرعت اینترنت پایین‌تر ممکن است تجربه‌ای متفاوت از کاربران در مناطقی با سرعت بالاتر داشته باشند. از ابزارها برای شبیه‌سازی شرایط مختلف شبکه در طول تست استفاده کنید.
• تصاویر را بهینه‌سازی کنید: بهینه‌سازی تصاویر یک جنبه حیاتی از عملکرد فرانت‌اند است. از ابزارهایی مانند ImageOptim، TinyPNG یا مبدل‌های آنلاین برای فشرده‌سازی و بهینه‌سازی تصاویر بدون از دست دادن کیفیت استفاده کنید. از فرمت‌های تصویری مدرن مانند WebP استفاده کنید که فشرده‌سازی و کیفیت بهتری نسبت به فرمت‌های سنتی مانند JPEG و PNG ارائه می‌دهند. بارگذاری تنبل (lazy loading) را برای تصاویری که بلافاصله در ویوپورت قابل مشاهده نیستند، پیاده‌سازی کنید.
• کد را کوچک و فشرده کنید: کدهای HTML، CSS و JavaScript خود را برای کاهش حجم فایل‌ها کوچک‌سازی (minify) کنید. از ابزارهایی مانند UglifyJS، Terser یا کوچک‌سازهای آنلاین استفاده کنید. فشرده‌سازی Gzip یا Brotli را روی سرور خود فعال کنید تا حجم فایل‌های منتقل شده را بیشتر کاهش دهید.
• از کش مرورگر بهره‌برداری کنید: سرور خود را طوری پیکربندی کنید که هدرهای کش مناسب را برای دارایی‌های ایستا مانند تصاویر، فایل‌های CSS و JavaScript تنظیم کند. این کار به مرورگرها اجازه می‌دهد تا این دارایی‌ها را کش کرده و از دانلود مکرر آن‌ها خودداری کنند.

نتیجه‌گیری

یکپارچه‌سازی Lighthouse CI در گردش کار توسعه شما یک گام حیاتی به سوی ساخت وب‌سایت‌هایی با عملکرد بالا، دسترسی‌پذیر و سئو-پسند است. با خودکارسازی تست عملکرد فرانت‌اند و پیگیری عملکرد در طول زمان، می‌توانید مشکلات عملکرد را در مراحل اولیه شناسایی و برطرف کنید، تجربه کاربری را بهبود بخشید و نتایج کسب‌وکار را بهبود دهید. Lighthouse CI را بپذیرید و بهبود مستمر عملکرد را به یک ارزش اصلی در فرآیند توسعه خود تبدیل کنید. به یاد داشته باشید که عملکرد وب‌سایت یک تلاش یک‌باره نیست، بلکه فرآیندی مداوم است که نیاز به توجه و بهینه‌سازی دائمی دارد. عوامل فرهنگی و منطقه‌ای را در نظر بگیرید تا تجربه‌ای بی‌نقص را برای تمام کاربران خود، صرف نظر از موقعیت مکانی یا دستگاهشان، تضمین کنید. با پیروی از بهترین شیوه‌های ذکر شده در این مقاله، می‌توانید اطمینان حاصل کنید که وب‌سایت شما تجربه‌ای سریع، قابل اعتماد و لذت‌بخش را برای کاربران در سراسر جهان ارائه می‌دهد.