Lighthouse CI: בקרת ביצועים אוטומטית בעת פריסה

לאחר הדיפלוי הבא, אתה מבחין בירידת ביצועים רק שבוע לאחר מכן — נשמע מוכר? בדיקות ידניות איטיות, יקרות, ולעיתים קרובות מפספסות רגרסיות. Lighthouse CI פותר את זה: הוא בודק אוטומטית כל PR ומונע מיזוג אם המדדים יורדים מתחת לספים שהוגדרו. יישמנו את זה על יותר מ-50 פרויקטים ואנחנו מאשרים: ההתקנה אורכת 1–2 ימים ומשתלמת כבר בחודש הראשון בכך שהיא מונעת ירידת Core Web Vitals. החיסכון בתקציב על בדיקות ידניות יכול להגיע ל-80%.

למה בדיקות ביצועים אוטומטיות הן חיוניות

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

שגיאות ש-Lighthouse CI מונע

• שאילתות N+1 – קריאות מסד נתונים בלתי צפויות שמאטות את TTFB.
• תמונות כבדות – חוסר ב-WebP ודחיסה.
• JS/CSS חוסמי רינדור – Critical Path לא מותאם.
• שינויי CLS – הוספות דינמיות ללא שמירת מקום.

איך אנחנו מגדירים Lighthouse CI: מהתקנה ועד דיפלוי

תהליך הגדרה שלב אחר שלב

1. ניתוח – הגדרת עמודים ומדדים קריטיים. בחירת URLs מייצגים: דף הבית, קטגוריות, דפי מוצר כדי לכסות תרחישי משתמש.
2. קונפיגורציה – יצירת lighthouserc.json עם ספים לכל עמוד.
3. אינטגרציה – הוספת workflow ב-GitHub Actions, GitLab CI, או Jenkins.
4. בדיקות – הרצה על staging והתאמת ספים לפי נתונים אמיתיים.
5. דיפלוי – הגדרת LHCI Server לאחסון היסטוריה וצפייה במגמות.

התקנה וקונפיגורציה

התקנת חבילות ויצירת lighthouserc.json:

npm install --save-dev @lhci/cli @lhci/utils 

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/about",
        "http://localhost:3000/pricing"
      ],
      "startServerCommand": "npm run start",
      "startServerReadyPattern": "ready on port",
      "numberOfRuns": 3,
      "settings": {
        "preset": "desktop",
        "throttling": {
          "rttMs": 40,
          "throughputKbps": 10240,
          "cpuSlowdownMultiplier": 1
        }
      }
    },
    "assert": {
      "preset": "lighthouse:recommended",
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.9}],
        "categories:accessibility": ["error", {"minScore": 0.9}],
        "categories:best-practices": ["warn", {"minScore": 0.9}],
        "categories:seo": ["error", {"minScore": 0.9}],
        "first-contentful-paint": ["warn", {"maxNumericValue": 2000}],
        "largest-contentful-paint": ["error", {"maxNumericValue": 2500}],
        "total-blocking-time": ["error", {"maxNumericValue": 300}],
        "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}],
        "speed-index": ["warn", {"maxNumericValue": 3400}],
        "uses-optimized-images": "warn",
        "uses-webp-images": "warn",
        "render-blocking-resources": "warn",
        "uses-text-compression": "error",
        "uses-long-cache-ttl": "warn"
      }
    },
    "upload": {
      "target": "lhci",
      "serverBaseUrl": "https://lhci.mysite.com",
      "token": "${LHCI_TOKEN}"
    }
  }
}

אינטגרציה עם GitHub Actions

הוספת workflow להרצה על כל PR:

---
# .github/workflows/lighthouse.yml
name: Lighthouse CI
on:
  pull_request:
    branches: [main]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run build
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
          LHCI_TOKEN: ${{ secrets.LHCI_TOKEN }}
      - name: Upload Lighthouse results
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: lighthouse-results
          path: .lighthouseci/
---

אחסון היסטוריה עם LHCI Server

פריסת LHCI Server באמצעות Docker Compose למעקב אחר מגמות:

---
services:
  lhci-server:
    image: patrickhulce/lhci-server:latest
    environment:
      LHCI_STORAGE__SQL_DATABASE_URL: "postgresql://lhci:secret@db/lhci"
    ports:
      - "9001:9001"
    volumes:
      - lhci_data:/data
  db:
    image: postgres:15
    environment:
      POSTGRES_DB: lhci
      POSTGRES_USER: lhci
      POSTGRES_PASSWORD: secret

לאחר ההשקה, צור פרויקט דרך npm install --save-dev @lhci/cli @lhci/utils או ה-API – זה מאפשר צפייה בגרפי מדדים.

ספים שונים לעמודים שונים

השתמש ב-// lighthouserc.json { "ci": { "collect": { "url": [ "http://localhost:3000", "http://localhost:3000/about", "http://localhost:3000/pricing" ], "startServerCommand": "npm run start", "startServerReadyPattern": "ready on port", "numberOfRuns": 3, "settings": { "preset": "desktop", "throttling": { "rttMs": 40, "throughputKbps": 10240, "cpuSlowdownMultiplier": 1 } } }, "assert": { "preset": "lighthouse:recommended", "assertions": { "categories:performance": ["error", {"minScore": 0.9}], "categories:accessibility": ["error", {"minScore": 0.9}], "categories:best-practices": ["warn", {"minScore": 0.9}], "categories:seo": ["error", {"minScore": 0.9}], "first-contentful-paint": ["warn", {"maxNumericValue": 2000}], "largest-contentful-paint": ["error", {"maxNumericValue": 2500}], "total-blocking-time": ["error", {"maxNumericValue": 300}], "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}], "speed-index": ["warn", {"maxNumericValue": 3400}], "uses-optimized-images": "warn", "uses-webp-images": "warn", "render-blocking-resources": "warn", "uses-text-compression": "error", "uses-long-cache-ttl": "warn" } }, "upload": { "target": "lhci", "serverBaseUrl": "https://lhci.mysite.com", "token": "${LHCI_TOKEN}" } } } כדי להגדיר דרישות אישיות לכל עמוד:

"assertMatrix": [
  {
    "matchingUrlPattern": ".*/$",
    "assertions": {
      "categories:performance": ["error", {"minScore": 0.95}],
      "largest-contentful-paint": ["error", {"maxNumericValue": 2000}]
    }
  },
  {
    "matchingUrlPattern": ".*/dashboard.*",
    "assertions": {
      "categories:performance": ["warn", {"minScore": 0.8}],
      "largest-contentful-paint": ["warn", {"maxNumericValue": 4000}]
    }
  }
]

אילו ספים כדאי להגדיר לעמודים שונים?

הספים תלויים בסוג העמוד. לדף הבית ודפי נחיתה מתאימים ערכים מחמירים (LCP < 2.5 שניות, CLS < 0.1). לפאנלים ניהוליים או דשבורדים אפשר להקל (LCP < 4 שניות). אנחנו עוזרים לקבוע ספים אופטימליים לפי אנליטיקה ויעדים עסקיים. צור קשר – נערוך ביקורת ונציע ערכים אופטימליים.

Performance Budget כגישה חלופית

במקום או בנוסף לספי Lighthouse, אפשר להשתמש ב-Performance Budget – מגבלות על גדלי משאבים. לדוגמה, הגבלת סקריפטים ל-300 KB, תמונות ל-500 KB, משקל כולל ל-1 MB. זה עובד דרך קובץ תקציב או הגדרות כלי build.

מה כלול בהתקנת Lighthouse CI במפתח?

• קונפיגורציה של lighthouserc.json עם ספים מותאמים לפרויקט שלך
• אינטגרציה עם CI/CD (GitHub Actions, GitLab CI, Jenkins)
• פריסת LHCI Server (Docker) לאחסון היסטורי
• דשבורד דוחות עם מגמות מדדים
• הדרכת צוות (שעה) והוראות להוספת עמודים חדשים
• שבועיים של תמיכה לאחר ההשקה

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

• # .github/workflows/lighthouse.yml name: Lighthouse CI on: pull_request: branches: [main] jobs: lighthouse: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 cache: npm - run: npm ci - run: npm run build - name: Run Lighthouse CI run: | npm install -g @lhci/cli lhci autorun env: LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} LHCI_TOKEN: ${{ secrets.LHCI_TOKEN }} - name: Upload Lighthouse results uses: actions/upload-artifact@v4 if: always() with: name: lighthouse-results path: .lighthouseci/ שגוי – ה-build ממתין לנצח
• חוסר ב-services: lhci-server: image: patrickhulce/lhci-server:latest environment: LHCI_STORAGE__SQL_DATABASE_URL: "postgresql://lhci:secret@db/lhci" ports: - "9001:9001" volumes: - lhci_data:/data db: image: postgres:15 environment: POSTGRES_DB: lhci POSTGRES_USER: lhci POSTGRES_PASSWORD: secret – תוצאות לא יציבות
• התעלמות מ-assertMatrix – תוכן טקסט כבד
• שכחת "assertMatrix": [ { "matchingUrlPattern": ".*/$", "assertions": { "categories:performance": ["error", {"minScore": 0.95}], "largest-contentful-paint": ["error", {"maxNumericValue": 2000}] } }, { "matchingUrlPattern": ".*/dashboard.*", "assertions": { "categories:performance": ["warn", {"minScore": 0.8}], "largest-contentful-paint": ["warn", {"maxNumericValue": 4000}] } } ] – אין תגובות ב-PR

לוח זמנים ועלות

לוח זמנים משוער: 1–2 ימי עבודה. העלות מחושבת באופן אישי לפי מספר העמודים ומורכבות הקונפיגורציה. השאר בקשה להתקנת Lighthouse CI – נעריך את הפרויקט שלך ונציע פתרון. קבל ייעוץ עכשיו.

אנחנו מבטיחים: לאחר ההתקנה, כל דיפלוי ייבדק אוטומטית, ורגרסיות ייחסמו. הניסיון שלנו ביישום על יותר מ-50 פרויקטים מאשר את היעילות של גישה זו.