בדיקות Lighthouse CI אוטומטיות בכל פריסה

אתה דוחף פיצ'ר, הכל ירוק, אבל שבוע לאחר מכן LCP במובייל קופץ מ-2.5 שניות ל-6 שניות. רגרסיה חדרה לייצור — נשמע מוכר? ראינו את זה עשרות פעמים. הפתרון הוא להריץ Lighthouse CI אוטומטית על כל דיפלוי. אתה תופס ירידות במדדים ב-CI, לא בייצור, ויודע בדיוק איזו קומיט גרמה לירידה. רקורד העבודה שלנו: מעל 50 אינטגרציות מוצלחות, חוסכים ללקוחות אלפי שקלים בבדיקות ידניות. השקעה טיפוסית להקמה: $1,500-$3,000 תלוי במורכבות, עם חיסכון חודשי של עד $800 בעלויות בדיקות ידניות. עם ניסיון של 5+ שנים במומחיות ביצועי ווב, אנחנו מספקים תוצאות מוכחות. ה-Lighthouse CI האוטומטי שלנו רץ על כל דיפלוי CI/CD, ומבטיח שמדדי Core Web Vitals כמו LCP ו-CLS יישארו בטווחים הנדרשים.

אוטומציה מזהה רגרסיות פי 3 מהר יותר מבדיקות ידניות ומבטלת שגיאות אנוש. במקום בדיקות שבועיות, כל שינוי מאומת עם חסימת build כאשר חריגה מהספים. הזמן לזיהוי בעיה יורד מיומיים לשעתיים. תיעוד Lighthouse CI ממליץ על גישה זו לשמירה על Core Web Vitals.

כיצד להגדיר ריצות Lighthouse אוטומטיות בדיפלוי

סטack מינימלי: CI/CD (GitHub Actions, GitLab CI) + Lighthouse CI CLI + אחסון לתוצאות. אנחנו משתמשים בשרת LHCI מתארח עצמאית להיסטוריה והשוואות baseline. התצורה מוגדרת ב-.lighthouserc.js.

module.exports = {
  ci: {
    collect: {
      url: [
        'http://localhost:3000/',
        'http://localhost:3000/about',
        'http://localhost:3000/catalog',
        'http://localhost:3000/product/test-product',
      ],
      numberOfRuns: 3,
      startServerCommand: 'npm run start:ci',
      startServerReadyPattern: 'ready on',
      startServerReadyTimeout: 30000,
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.8 }],
        'categories:accessibility': ['error', { minScore: 0.9 }],
        'categories:best-practices': ['warn', { minScore: 0.85 }],
        'categories:seo': ['error', { minScore: 0.9 }],
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'total-blocking-time': ['warn', { maxNumericValue: 300 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'speed-index': ['warn', { maxNumericValue: 3400 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};"}

תהליך עבודה של GitHub Actions:

---
name: Lighthouse CI
on:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/[email protected]
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
          LHCI_TOKEN: ${{ secrets.LHCI_TOKEN }}

מה האוטומציה מספקת

אוטומציה הופכת את Lighthouse מבדיקה חד-פעמית לתהליך רציף. טבלת השוואה:

שרת LHCI מתארח עצמאית מציע היסטוריה והשוואות baseline.

למה לבחור בשרת LHCI מתארח עצמאית?

שרת מתארח עצמאית שומר דוחות בתשתית שלך, מאפשר השוואת PR מול הענף הראשי, ומציג מגמות. אין תלות בשירותים חיצוניים — כל הנתונים בשליטתך. בנוסף, ניתן להגדיר התראות כאשר Core Web Vitals יורדים מתחת לספים.

מדדים קריטיים למסחר אלקטרוני

לחנות מקוונת, המדדים המרכזיים הם Largest Contentful Paint (LCP) ≤ 2.5 שניות, Cumulative Layout Shift (CLS) ≤ 0.1, ו-Total Blocking Time (TBT) ≤ 200 אלפיות השנייה. Lighthouse CI אוטומטי מאמת אותם על כל דיפלוי, ומבטיח ששינויים לא פוגעים בחוויית המשתמש. לדוגמה, לאחר הוספת באנר חדש, LCP עלה ב-0.5 שניות — CI חסם את ה-build, והתיקון נפרס לפני שהגיע לייצור. עם ניטור זה, 95% מהרגרסיות נתפסות תוך 10 דקות.

תהליך העבודה שלנו

1. ניתוח — זיהוי עמודים מרכזיים וספי מדדים (לדוגמה, עמוד מוצר, קטלוג, דף הבית למרקטפלייס).
2. עיצוב — בחירת הסטack (GitHub Actions, GitLab CI, מתארח עצמאית) וארכיטקטורת אחסון.
3. יישום — הגדרת module.exports = { ci: { collect: { url: [ 'http://localhost:3000/', 'http://localhost:3000/about', 'http://localhost:3000/catalog', 'http://localhost:3000/product/test-product', ], numberOfRuns: 3, startServerCommand: 'npm run start:ci', startServerReadyPattern: 'ready on', startServerReadyTimeout: 30000, }, assert: { assertions: { 'categories:performance': ['warn', { minScore: 0.8 }], 'categories:accessibility': ['error', { minScore: 0.9 }], 'categories:best-practices': ['warn', { minScore: 0.85 }], 'categories:seo': ['error', { minScore: 0.9 }], 'first-contentful-paint': ['warn', { maxNumericValue: 2000 }], 'largest-contentful-paint': ['error', { maxNumericValue: 2500 }], 'total-blocking-time': ['warn', { maxNumericValue: 300 }], 'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }], 'speed-index': ['warn', { maxNumericValue: 3400 }], }, }, upload: { target: 'temporary-public-storage', }, }, }; , תהליך עבודה CI, הוספת התראות Slack או Telegram.
4. בדיקות — ריצה על PRs, כוונון ספים, ביטול חיוביות שגויות.
5. תיעוד והדרכה — העברת קבצי תצורה, כתיבת הוראות צוות, והקמת דשבורד.

התראות על ירידות

LHCI לא שולח התראות Slack באופן טבעי, אז אנחנו מוסיפים שלב CI:

---
- name: Check Lighthouse results and notify if: always()
  run: |
    RESULT=$(cat .lighthouseci/manifest.json | jq -r '.[0].summary.performance')
    SCORE=$(echo "$RESULT * 100" | bc | cut -d. -f1)
    if [ "$SCORE" -lt "80" ]; then
      curl -X POST ${{ secrets.SLACK_WEBHOOK }} \
        -H 'Content-Type: application/json' \
        -d "{\"text\": \":warning: Lighthouse Performance score dropped to ${SCORE}/100 on \`${{ github.ref_name }}\"",\"attachments\": [{\"color\": \"danger\",\"text\": \"Commit: ${{ github.sha }}\ Actor: ${{ github.actor }}\"}]}"
    fi

בעיות הגדרה נפוצות

בדיקת ביקורות ספציפיות

מעבר לציוני קטגוריה, אנחנו מגדירים בדיקות לביקורות בודדות כמו - name: Check Lighthouse results and notify if: always() run: | RESULT=$(cat .lighthouseci/manifest.json | jq -r '.[0].summary.performance') SCORE=$(echo "$RESULT * 100" | bc | cut -d. -f1) if [ "$SCORE" -lt "80" ]; then curl -X POST ${{ secrets.SLACK_WEBHOOK }} \ -H 'Content-Type: application/json' \ -d "{\"text\": \":warning: Lighthouse Performance score dropped to ${SCORE}/100 on \`${{ github.ref_name }}\"",\"attachments\": [{\"color\": \"danger\",\"text\": \"Commit: ${{ github.sha }}\ Actor: ${{ github.actor }}\"}]}" fi , startServerCommand, ו-numberOfRuns. זה נותן שליטה מדויקת יותר מציון כולל.

לוח זמנים ותוצרים

הקמה בסיסית ב-GitHub Actions עם אחסון זמני אורכת 2–4 שעות. עם שרת מתארח עצמאית והתראות, צפו ל-1–2 ימי עסקים. מערכת מלאה עם היסטוריה, השוואות ואינטגרציית סקירה אורכת 3–5 ימי עסקים.

• תצורת Lighthouse CI מותאמת לריפוזיטורי שלך.
• פריסת שרת LHCI מתארח עצמאית (אם נדרשת היסטוריה).
• אינטגרציית Slack/Telegram להתראות.
• ספים לכל מדדי Core Web Vitals.
• תיעוד והדרכת צוות.

הצוות שלנו עובד על ביצועי ווב למעלה מ-5 שנים והשלים 50+ אינטגרציות Lighthouse CI לפרויקטים החל מדפי נחיתה ועד מרקטפלייסים. אנחנו מבטיחים שקיפות: אתה מקבל גישה מלאה לתצורות ולהיסטוריית שינויים.

קבל פתרון מפתח. צור קשר להערכת פרויקט. החבילה כוללת תצורה מלאה, תיעוד ותמיכה ל-30 יום. בקש הגדרת Lighthouse CI — זה לוקח משעתיים. תיהנה מייעוץ ארכיטקטוני וחסוך עד 3 שעות בשבוע (בערך $200 לשבוע בזמן מפתח).