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

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

Lighthouse CI چیست؟

Lighthouse CI یک ابزار تست عملکرد خودکار و منبع‌باز است که به راحتی با خط لوله یکپارچه‌سازی و تحویل مداوم (CI/CD) شما ادغام می‌شود. این ابزار از ابزار ممیزی Lighthouse گوگل استفاده می‌کند تا بینش‌های عملی در مورد عملکرد، دسترسی‌پذیری، سئو و بهترین شیوه‌های وب‌سایت شما ارائه دهد. با گنجاندن Lighthouse CI در جریان کاری خود، می‌توانید به طور مداوم عملکرد وب‌سایت خود را نظارت کنید، افت عملکرد (regression) را ردیابی کرده و اطمینان حاصل کنید که هر تغییر در کد به تجربه کاربری بهتر کمک می‌کند. Lighthouse CI به یک ارائه‌دهنده ابری خاص وابسته نیست و می‌تواند با تنظیمات مختلفی استفاده شود. به عنوان مثال، می‌تواند درون یک کانتینر داکر روی سرویس‌هایی مانند Github Actions، Jenkins، CircleCI و بسیاری دیگر اجرا شود.

چرا از Lighthouse CI استفاده کنیم؟

پیاده‌سازی Lighthouse CI مزایای بسیاری را ارائه می‌دهد:

• شناسایی زودهنگام افت عملکرد: مشکلات عملکردی ناشی از تغییرات جدید در کد را قبل از رسیدن به محیط تولید شناسایی کنید.
• بهبود عملکرد وب‌سایت: بینش‌های عملی در مورد چگونگی بهینه‌سازی وب‌سایت خود برای سرعت، دسترسی‌پذیری و سئو به دست آورید.
• تجربه کاربری بهبود یافته: یک وب‌سایت سریع‌تر و کاربرپسندتر ارائه دهید که بازدیدکنندگان را درگیر نگه می‌دارد.
• کاهش نرخ پرش (Bounce Rate): زمان بارگذاری را بهینه کنید تا ناامیدی کاربران را کاهش داده و از ترک سایت توسط آنها جلوگیری کنید.
• افزایش نرخ تبدیل (Conversion Rates): یک وب‌سایت سریع‌تر معمولاً منجر به نرخ تبدیل بالاتر و نتایج تجاری بهتر می‌شود.
• تست عملکرد خودکار: تست عملکرد را برای نظارت مستمر در خط لوله CI/CD خود ادغام کنید.
• تصمیم‌گیری مبتنی بر داده: تلاش‌های بهینه‌سازی خود را بر اساس معیارهای عملکردی و بینش‌های ملموس بنا کنید.
• ردیابی عملکرد بلندمدت: عملکرد وب‌سایت خود را در طول زمان نظارت کنید تا روندها را شناسایی کرده و تأثیر بهینه‌سازی‌های خود را اندازه‌گیری کنید.

ویژگی‌های کلیدی Lighthouse CI

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

راه‌اندازی Lighthouse CI: راهنمای گام به گام

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

۱. نصب رابط خط فرمان (CLI) Lighthouse CI

ابتدا، باید رابط خط فرمان (CLI) Lighthouse CI را به صورت سراسری با استفاده از npm یا yarn نصب کنید:

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

              
                Copy
              
            
          

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

یک فایل lighthouserc.js در ریشه پروژه خود ایجاد کنید تا Lighthouse CI را پیکربندی نمایید. این فایل URLهایی که باید ممیزی شوند، قوانین اعتبارسنجی (assertion) و سایر گزینه‌های پیکربندی را تعریف می‌کند.

در اینجا یک مثال اولیه از فایل lighthouserc.js آمده است:

            module.exports = {
  ci:
   {
    collect: {
      url: ['http://localhost:3000', 'http://localhost:3000/about']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'temporary-public-storage'
    },
  },
};

            

              
                Copy
              
            
          

توضیح:

• collect.url: URLهایی را که باید توسط Lighthouse ممیزی شوند مشخص می‌کند. در این مثال، ما صفحه اصلی و صفحه «درباره ما» یک وب‌سایت در حال اجرا روی localhost:3000 را ممیزی می‌کنیم. به یاد داشته باشید که این را با URLهای مربوط به پروژه *شما* جایگزین کنید، که ممکن است شامل محیط‌های staging باشد.
• assert.preset: از پیش‌تنظیم lighthouse:recommended استفاده می‌کند که مجموعه‌ای از اعتبارسنجی‌های از پیش تعریف شده را بر اساس توصیه‌های Lighthouse اعمال می‌کند. این یک نقطه شروع خوب است، اما شما می‌توانید این اعتبارسنجی‌ها را در صورت نیاز سفارشی کنید.
• upload.target: مشخص می‌کند که نتایج Lighthouse CI کجا آپلود خواهند شد. temporary-public-storage برای تست و توسعه مفید است، اما برای محیط‌های تولید، معمولاً می‌خواهید از یک راه‌حل ذخیره‌سازی پایدارتر استفاده کنید (که بعداً مورد بحث قرار می‌گیرد).

۳. ادغام Lighthouse CI در خط لوله CI/CD

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

مثال با استفاده از GitHub Actions:

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

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
      - name: Install dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.11.x
          lhci autorun

            

              
                Copy
              
            
          

توضیح:

• on.push.branches: این گردش کار (workflow) را در هنگام push به شاخه main فعال می‌کند.
• on.pull_request: این گردش کار را در هنگام pull request فعال می‌کند.
• jobs.lighthouse.runs-on: سیستم عامل مورد استفاده برای این کار (job) را مشخص می‌کند (در این مورد Ubuntu).
• steps: مراحل اجرایی در این کار را تعریف می‌کند:
• actions/checkout@v3: مخزن را checkout می‌کند.
• actions/setup-node@v3: Node.js را راه‌اندازی می‌کند.
• npm ci: وابستگی‌ها را نصب می‌کند.
• Run Lighthouse CI: دستورات Lighthouse CI را اجرا می‌کند:
• npm install -g @lhci/cli@0.11.x: رابط خط فرمان Lighthouse CI را به صورت سراسری نصب می‌کند. *مهم*: همیشه توصیه می‌شود که یک نسخه خاص را قفل کنید.
• lhci autorun: Lighthouse CI را در حالت «autorun» اجرا می‌کند که به طور خودکار ممیزی‌ها را جمع‌آوری، بودجه‌های عملکرد را اعتبارسنجی و نتایج را آپلود می‌کند.

ملاحظات مهم برای ادغام CI/CD:

• راه‌اندازی سرور: قبل از اجرای lhci autorun، اطمینان حاصل کنید که وب سرور شما در حال اجرا است (مثلاً npm start). ممکن است لازم باشد یک مرحله به پیکربندی CI/CD خود اضافه کنید تا سرور خود را در پس‌زمینه راه‌اندازی کنید.
• مهاجرت‌های پایگاه داده (Database Migrations): اگر برنامه شما به پایگاه داده متکی است، اطمینان حاصل کنید که مهاجرت‌های پایگاه داده به عنوان بخشی از فرآیند CI/CD شما *قبل* از اجرای Lighthouse CI انجام می‌شود.
• متغیرهای محیطی: اگر برنامه شما به متغیرهای محیطی نیاز دارد، اطمینان حاصل کنید که این متغیرها به درستی در محیط CI/CD شما پیکربندی شده‌اند.

۴. اجرای Lighthouse CI

اکنون، هر زمان که تغییراتی را به شاخه main پوش کنید یا یک pull request ایجاد کنید، گردش کار Lighthouse CI به طور خودکار اجرا می‌شود. نتایج در رابط کاربری GitHub Actions در دسترس خواهند بود.

۵. مشاهده نتایج Lighthouse CI

نتایج Lighthouse CI در مکانی که در فایل lighthouserc.js شما مشخص شده است (مثلاً temporary-public-storage) آپلود خواهند شد. شما می‌توانید با دنبال کردن پیوند ارائه شده در خروجی CI/CD به این نتایج دسترسی پیدا کنید. این نتایج اطلاعات دقیقی در مورد عملکرد، دسترسی‌پذیری، سئو و بهترین شیوه‌های وب‌سایت شما ارائه می‌دهند.

پیکربندی Assertionها و بودجه‌های عملکرد

Lighthouse CI به شما امکان می‌دهد تا assertionها (اعتبارسنجی‌ها) و بودجه‌های عملکرد را پیکربندی کنید تا اطمینان حاصل شود که وب‌سایت شما به اهداف عملکردی‌تان می‌رسد. Assertionها قوانینی هستند که معیارهای عملکردی خاص (مانند First Contentful Paint، Largest Contentful Paint) را با آستانه‌های از پیش تعریف شده بررسی می‌کنند. بودجه‌های عملکرد، محدودیت‌های قابل قبول برای معیارهای مختلف عملکرد را تعریف می‌کنند.

در اینجا یک مثال از نحوه پیکربندی assertionها در فایل lighthouserc.js آورده شده است:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      assertions: {
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['warn', { maxNumericValue: 500 }],
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.8 }],
      }
    },
   upload: {
      target: 'temporary-public-storage'
    },
  }
};

            

              
                Copy
              
            
          

توضیح:

• first-contentful-paint: یک آستانه هشدار برای First Contentful Paint (FCP) در ۲۰۰۰ میلی‌ثانیه تنظیم می‌کند.
• largest-contentful-paint: یک آستانه هشدار برای Largest Contentful Paint (LCP) در ۲۵۰۰ میلی‌ثانیه تنظیم می‌کند.
• cumulative-layout-shift: یک آستانه هشدار برای Cumulative Layout Shift (CLS) در ۰.۱ تنظیم می‌کند.
• total-blocking-time: یک آستانه هشدار برای Total Blocking Time (TBT) در ۵۰۰ میلی‌ثانیه تنظیم می‌کند.
• categories:performance: یک آستانه هشدار برای امتیاز کلی دسته عملکرد در ۰.۹ تنظیم می‌کند.
• categories:accessibility: یک آستانه خطا برای امتیاز کلی دسته دسترسی‌پذیری در ۰.۸ تنظیم می‌کند.

سطوح Assertion:

• off: اعتبارسنجی را غیرفعال می‌کند.
• warn: در صورت شکست اعتبارسنجی، یک هشدار نمایش می‌دهد.
• error: در صورت شکست اعتبارسنجی، اجرای Lighthouse CI را ناموفق می‌کند.

سفارشی‌سازی Assertionها:

شما می‌توانید assertionها را برای پاسخگویی به نیازهای خاص خود سفارشی کنید. به عنوان مثال، ممکن است بخواهید آستانه‌های سخت‌گیرانه‌تری برای معیارهای عملکردی حیاتی تنظیم کنید یا assertionهایی را که به برنامه شما مربوط نیستند غیرفعال کنید.

انتخاب مقصد آپلود برای Lighthouse CI

گزینه upload.target در فایل lighthouserc.js شما مشخص می‌کند که نتایج Lighthouse CI کجا آپلود خواهند شد. مقصد temporary-public-storage برای تست و توسعه راحت است، اما برای محیط‌های تولید مناسب نیست زیرا داده‌ها پایدار نیستند.

در اینجا چند مقصد آپلود جایگزین آورده شده است:

• سرور Lighthouse CI: رویکرد توصیه شده برای محیط‌های تولید، استفاده از سرور Lighthouse CI است. سرور Lighthouse CI یک راه‌حل ذخیره‌سازی پایدار برای نتایج Lighthouse CI شما و همچنین یک رابط کاربری برای مشاهده و تحلیل داده‌های شما فراهم می‌کند. این سرور می‌تواند روی ارائه‌دهندگان ابری مختلف مستقر شود یا روی زیرساخت خودتان میزبانی شود.
• Google Cloud Storage: شما می‌توانید نتایج Lighthouse CI خود را در یک باکت Google Cloud Storage آپلود کنید. این یک راه‌حل مقرون‌به‌صرفه و مقیاس‌پذیر برای ذخیره‌سازی داده‌های شما است.
• Amazon S3: مشابه Google Cloud Storage، شما می‌توانید نتایج Lighthouse CI خود را در یک باکت Amazon S3 آپلود کنید.

راه‌اندازی سرور Lighthouse CI:

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

1. نصب سرور Lighthouse CI: شما می‌توانید سرور Lighthouse CI را با استفاده از npm یا yarn نصب کنید:

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

              
                Copy
              
            
          

2. پیکربندی پایگاه داده: سرور Lighthouse CI برای ذخیره داده‌های خود به یک پایگاه داده نیاز دارد. شما می‌توانید از انواع پایگاه‌های داده، از جمله PostgreSQL، MySQL و SQLite استفاده کنید. تنظیمات اتصال به پایگاه داده را در فایل .env پیکربندی کنید.
3. راه‌اندازی سرور Lighthouse CI: سرور Lighthouse CI را با استفاده از دستور lhci server راه‌اندازی کنید.
4. پیکربندی CLI Lighthouse CI برای استفاده از سرور: فایل lighthouserc.js خود را به‌روزرسانی کنید تا از سرور Lighthouse CI به عنوان مقصد آپلود استفاده کند:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'http://your-lhci-server.com',
      token: 'YOUR_LHCI_TOKEN'
    },
  }
};

            

              
                Copy
              
            
          

http://your-lhci-server.com را با URL سرور Lighthouse CI خود و YOUR_LHCI_TOKEN را با توکن دسترسی پروژه خود جایگزین کنید.

بهترین شیوه‌ها برای استفاده از Lighthouse CI

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

• اجرای Lighthouse CI بر روی هر تغییر کد: Lighthouse CI را در خط لوله CI/CD خود ادغام کنید تا ممیزی‌ها را بر روی هر تغییر کد اجرا کنید. این به شما کمک می‌کند تا افت عملکرد را زودتر تشخیص دهید.
• تنظیم بودجه‌های عملکرد: بودجه‌های عملکرد را تعریف کنید تا اطمینان حاصل شود که وب‌سایت شما در آستانه‌های عملکرد قابل قبول باقی می‌ماند.
• نظارت بر روندهای عملکرد: عملکرد وب‌سایت خود را در طول زمان ردیابی کنید تا روندها را شناسایی کرده و تأثیر بهینه‌سازی‌های خود را اندازه‌گیری کنید.
• اولویت‌بندی تلاش‌های بهینه‌سازی: ابتدا بر روی بهینه‌سازی مهم‌ترین معیارهای عملکردی تمرکز کنید.
• استفاده از داده‌های دنیای واقعی: از داده‌های دنیای واقعی برای اطلاع‌رسانی به تلاش‌های بهینه‌سازی خود استفاده کنید. به عنوان مثال، می‌توانید از Google Analytics برای شناسایی صفحاتی که بیشترین بازدید را توسط کاربران شما دارند استفاده کنید.
• تست بر روی دستگاه‌های واقعی: وب‌سایت خود را بر روی دستگاه‌های واقعی تست کنید تا اطمینان حاصل شود که در شرایط دنیای واقعی به خوبی عمل می‌کند.
• بررسی منظم نتایج Lighthouse CI: اطمینان حاصل کنید که به طور منظم نتایج Lighthouse CI را بررسی کرده و برای رفع هرگونه مشکل عملکردی که شناسایی می‌شود، اقدام کنید.
• بهینه‌سازی تصاویر: تصاویر خود را بهینه کنید تا حجم فایل آنها بدون کاهش کیفیت کاهش یابد. ابزارهایی مانند ImageOptim (macOS)، TinyPNG و ImageKit برای این کار مفید هستند.
• فشرده‌سازی CSS و JavaScript: فایل‌های CSS و JavaScript خود را فشرده (minify) کنید تا حجم آنها کاهش یابد. ابزارهایی مانند UglifyJS و CSSNano می‌توانند در این زمینه کمک کنند.
• استفاده از کش مرورگر: از کش مرورگر استفاده کنید تا تعداد درخواست‌هایی که وب‌سایت شما به سرور ارسال می‌کند کاهش یابد.
• استفاده از شبکه تحویل محتوا (CDN): از یک CDN برای توزیع محتوای وب‌سایت خود به سرورهای سراسر جهان استفاده کنید. این می‌تواند زمان بارگذاری را برای کاربران در مکان‌های جغرافیایی مختلف بهبود بخشد. سرویس‌هایی مانند Cloudflare و Amazon CloudFront از CDNهای محبوب هستند.
• به تعویق انداختن تصاویر خارج از صفحه (Defer Offscreen Images): بارگذاری تنبل (lazy loading) را برای تصاویری که بلافاصله روی صفحه قابل مشاهده نیستند، پیاده‌سازی کنید. این می‌تواند به طور قابل توجهی زمان بارگذاری اولیه صفحه را بهبود بخشد. از ویژگی loading="lazy" می‌توان برای بارگذاری تنبل ساده استفاده کرد.
• حذف منابع مسدودکننده رندر: منابعی را که رندر صفحه شما را مسدود می‌کنند شناسایی و حذف کنید. این اغلب شامل درون‌خطی کردن CSS حیاتی و به تعویق انداختن CSS و JavaScript غیرحیاتی است.
• کاهش زمان اجرای JavaScript: کد JavaScript خود را پروفایل کنید تا توابع کند را شناسایی و بهینه کنید. تکنیک‌هایی مانند تقسیم کد (code splitting) و حذف کدهای مرده (tree shaking) می‌توانند به کاهش میزان JavaScript که باید دانلود و اجرا شود کمک کنند.

تکنیک‌های پیشرفته Lighthouse CI

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

• ممیزی‌های سفارشی Lighthouse: شما می‌توانید ممیزی‌های سفارشی Lighthouse ایجاد کنید تا مشکلات عملکردی خاصی را که به برنامه شما مربوط است، تست کنید.
• پیکربندی Headless Chrome: Headless Chrome را برای استفاده از شبیه‌سازی‌های دستگاه خاص یا تنظیمات محدودیت شبکه (network throttling) پیکربندی کنید.
• ادغام با ابزارهای نظارت: Lighthouse CI را با ابزارهای نظارت موجود خود (مانند New Relic، Datadog) ادغام کنید تا دید جامع‌تری از عملکرد وب‌سایت خود داشته باشید.
• تست رگرسیون بصری: Lighthouse CI را با ابزارهای تست رگرسیون بصری ترکیب کنید تا تغییرات بصری را که ممکن است بر عملکرد تأثیر بگذارند، شناسایی کنید.

Lighthouse CI برای مخاطبان جهانی: ملاحظات برای وب‌سایت‌های بین‌المللی

هنگام استفاده از Lighthouse CI برای وب‌سایت‌هایی که مخاطبان جهانی را هدف قرار می‌دهند، موارد زیر را در نظر بگیرید:

• تست از مکان‌های مختلف: زمان پاسخ سرور می‌تواند بر اساس موقعیت مکانی کاربر به طور قابل توجهی متفاوت باشد. از یک CDN (شبکه تحویل محتوا) استفاده کنید و اجرای ممیزی‌های Lighthouse CI را از مناطق جغرافیایی مختلف در نظر بگیرید تا تصویر دقیق‌تری از عملکرد برای کاربران بین‌المللی خود به دست آورید. برخی از ارائه‌دهندگان CI/CD گزینه‌هایی برای تعیین موقعیت جغرافیایی اجراکننده (runner) ارائه می‌دهند.
• در نظر گرفتن شرایط شبکه: سرعت و تأخیر شبکه در سراسر جهان بسیار متفاوت است. شرایط مختلف شبکه را در طول ممیزی‌های Lighthouse CI خود شبیه‌سازی کنید تا بفهمید وب‌سایت شما تحت محدودیت‌های مختلف چگونه عمل می‌کند. Lighthouse به شما امکان می‌دهد اتصال شبکه را محدود کنید و اتصالات کندتر مانند 3G را شبیه‌سازی کنید.
• بومی‌سازی محتوا: اطمینان حاصل کنید که محتوای بومی‌سازی شده شما به درستی بهینه شده است. این شامل بهینه‌سازی تصویر برای زبان‌ها و مجموعه کاراکترهای مختلف و رمزگذاری مناسب برای جلوگیری از مشکلات نمایش است.
• بارگذاری فونت: بارگذاری فونت را برای زبان‌های مختلف بهینه کنید. استفاده از font-display: swap را برای جلوگیری از نامرئی بودن متن در حین بارگذاری فونت در نظر بگیرید.
• اسکریپت‌های شخص ثالث: مراقب اسکریپت‌های شخص ثالث باشید، زیرا آنها می‌توانند به طور قابل توجهی بر عملکرد تأثیر بگذارند، به ویژه برای کاربران در مناطقی با اتصالات شبکه کندتر. عملکرد اسکریپت‌های شخص ثالث را به طور منظم ممیزی کنید و استفاده از بارگذاری ناهمزمان یا میزبانی شخصی اسکریپت‌های حیاتی را در نظر بگیرید.
• بهینه‌سازی موبایل: استفاده از موبایل در بسیاری از نقاط جهان رایج است. اطمینان حاصل کنید که وب‌سایت شما برای دستگاه‌های تلفن همراه بهینه شده است و ممیزی‌های Lighthouse CI شما شامل تست‌های مخصوص موبایل باشد.

عیب‌یابی مشکلات رایج Lighthouse CI

در اینجا برخی از مشکلات رایجی که ممکن است هنگام استفاده از Lighthouse CI با آنها مواجه شوید و نحوه عیب‌یابی آنها آورده شده است:

• Lighthouse CI با خطای "Timeout" ناموفق می‌شود: این ممکن است در صورتی اتفاق بیفتد که بارگذاری وب‌سایت شما بیش از حد طول بکشد یا Lighthouse CI نتواند به وب‌سایت شما متصل شود. سعی کنید مقدار timeout را در فایل lighthouserc.js خود افزایش دهید یا لاگ‌های سرور وب‌سایت خود را برای خطاها بررسی کنید.
• Lighthouse CI نتایج متناقضی را گزارش می‌دهد: نتایج Lighthouse می‌توانند به دلیل شرایط شبکه یا عوامل دیگر بین اجراها کمی متفاوت باشند. چندین ممیزی را اجرا کنید تا میانگین پایدارتری به دست آورید.
• Lighthouse CI در آپلود نتایج ناموفق است: پیکربندی upload.target خود را بررسی کنید و اطمینان حاصل کنید که سرور Lighthouse CI شما در حال اجرا و در دسترس است. همچنین، بررسی کنید که توکن دسترسی صحیح را پیکربندی کرده‌اید.
• Lighthouse CI افت عملکرد غیرمنتظره‌ای را گزارش می‌دهد: تغییرات کدی را که قبل از شناسایی افت عملکرد انجام شده است، بررسی کنید. از گزارش‌های Lighthouse CI برای شناسایی معیارهای عملکردی خاصی که دچار افت شده‌اند استفاده کنید و تلاش‌های بهینه‌سازی خود را بر روی آن مناطق متمرکز کنید.

نتیجه‌گیری

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

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