הגדרת תקציב ביצועים לאתר שלך

הגדרת תקציב ביצועים לאתר שלך

תארו לעצמכם: לאחר שחרור גרסה, LCP קופץ מ-2.1 ל-3.8 שניות, וההמרות יורדות ב-12%. ללא תקציב ביצועים, תגלו זאת רק כעבור שבוע מדוח PageSpeed Insights. תקציב ביצועים הוא שער אוטומטי ב-CI/CD: הבנייה נכשלת אם חורגים מהתקציב. אנו מגדירים שער כזה תוך 2–3 ימים. המהנדסים שלנו מוסמכים על ידי Google עם ניסיון של 5+ שנים באופטימיזציה של Core Web Vitals.

תקציב ביצועים אינו רק אוסף של מדדים; זוהי תרבות של בקרת איכות לכל שחרור. הוא מונע הידרדרות שבדיקות ידניות מפספסות. לדוגמה, אחד הלקוחות שלנו גילה שהוספת וידג'ט חדש הגדילה את CLS ב-0.15 — התקציב תפס זאת בשלב ה-PR, והשחרור לא עלה לייצור. לפי Google, חברות שיישמו תקציב ביצועים הפחיתו את זמני הטעינה ב-40%, מה שהוביל להכנסה נוספת ממוצעת של 200,000 דולר בשנה. דוח Google Web Vital.

מדדים עיקריים ויעדים

דוגמה לתקציב לאתר מסחר אלקטרוני: LCP < 2.0s, CLS < 0.05, INP < 150ms, TTFB < 400ms, חבילת JS < 150KB gzip, משקל כולל < 800KB. ערכים אלה נגזרו מניתוח האחוזון ה-90 של תעבורה אמיתית ב-30 הימים האחרונים.

השוואת כלים להגדרת תקציב

מדוע תקציב ביצועים קריטי לכל שחרור?

כל מדד משפיע ישירות על חוויית המשתמש ועל תוצאות עסקיות. LCP > 2.5s מגדיל את שיעור הנטישה ב-32% לפי Google. INP > 200ms גורם לאתר להרגיש איטי. CLS > 0.1 גורם ללחיצות מקריות על אלמנטים שגויים. TTFB > 600ms מצביע על בעיות שרת. חריגה מכל אחד מהתקציבים הללו היא אות לעצור את השחרור. תקציב ביצועים המבוסס על Lighthouse CI מדויק פי 10 מבדיקות ידניות, וחוסך עלויות משמעותיות בתיקון בעיות לאחר שחרור. הערכה המבוססת על פרויקטים של הסטודיו.

באיזו תדירות כדאי לעדכן את תקציב הביצועים?

התקציב אינו סטטי. אנו ממליצים לבחון אותו מחדש כל 3–6 חודשים או לאחר שינויים ארכיטקטוניים משמעותיים (לדוגמה, מעבר ל-SSR, הוספת ספריות חדשות). כמו כן, התאימו את הספים אם אתם מבחינים שהמדדים טובים יותר באופן עקבי — הדקו את התקציב כדי לעודד אופטימיזציה נוספת.

כיצד לשלב תקציב ביצועים ב-CI/CD?

Lighthouse CI: תקציבים למדדים

// .lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/catalog",
        "http://localhost:3000/checkout"
      ],
      "numberOfRuns": 3,
      "settings": {
        "preset": "desktop",
        "throttlingMethod": "simulate"
      }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.85 }],
        "categories:accessibility": ["error", { "minScore": 0.90 }],
        "categories:seo": ["warn", { "minScore": 0.90 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "total-blocking-time": ["warn", { "maxNumericValue": 300 }],
        "uses-optimized-images": ["warn"],
        "unused-javascript": ["warn", { "maxNumericValue": 20000 }],
        "render-blocking-resources": ["warn"]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

Bundlesize: תקציב לגודל JS/CSS

// bundlesize.config.json
{
  "files": [
    {
      "path": ".next/static/chunks/main-*.js",
      "maxSize": "60 kB"
    },
    {
      "path": ".next/static/chunks/pages/index-*.js",
      "maxSize": "50 kB"
    },
    {
      "path": ".next/static/chunks/pages/catalog-*.js",
      "maxSize": "80 kB"
    },
    {
      "path": ".next/static/css/*.css",
      "maxSize": "30 kB"
    }
  ]
}

GitHub Actions: בדיקת תקציב

# .github/workflows/performance-budget.yml
name: Performance Budget
on: [pull_request]
jobs:
  lighthouse-ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci && npm run build
      - name: Start server
        run: npm start &
      - name: Wait for server
        run: npx wait-on http://localhost:3000
      - name: Run Lighthouse CI
        run: npx lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
  bundlesize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci && npm run build
      - name: Check bundle size
        run: npm run bundlesize
        env:
          CI_REPO_OWNER: ${{ github.repository_owner }}
          CI_REPO_NAME: ${{ github.event.repository.name }}
          CI_PULL_REQUEST: ${{ github.event.pull_request.number }}
          CI_COMMIT_SHA: ${{ github.sha }}
          BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

ניטור ייצור: SpeedCurve / DebugBear

לניטור רציף של Core Web Vitals בתעבורה אמיתית, אנו משתמשים ב-RUM (Real User Monitoring):

// Сбор Web Vitals из реального браузера
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

function sendToAnalytics(metric: any) {
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify({
      name: metric.name,
      value: metric.value,
      id: metric.id,
      page: window.location.pathname,
    }),
    headers: {
      'Content-Type': 'application/json'
    },
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

-- P75 Core Web Vitals за последние 24 часа
SELECT name, PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY value) AS p75, COUNT(*) AS samples
FROM web_vitals
WHERE created_at >= now() - interval '24 hours'
GROUP BY name;

הגישה שלנו להגדרה

אנו מתחילים בביקורת של המדדים הנוכחיים באמצעות Lighthouse CI ו-WebPageTest. אנו מגדירים יעדים ריאליים המבוססים על מטרות עסקיות. אנו מגדירים את Lighthouse CI ו-bundlesize, ומשלבים אותם ב-GitHub Actions. אנו מאמנים את הצוות שלך לקרוא דוחות ולהגיב לחריגות מהתקציב. אנו מבטיחים שלאחר ההגדרה, התקציב לא יחרוג ללא ידיעתך.

מה כלול בעבודה (תוצרים)

• תיעוד תקציב ביצועים עם ספים לכל מדד.
• קונפיגורציות Lighthouse CI ו-bundlesize לסטאק שלך (Next.js, Vue, React).
• זרימת עבודה של GitHub Actions לבדיקות אוטומטיות בכל PR.
• אינטגרציה עם ניטור RUM (SpeedCurve או DebugBear).
• לוח מחוונים עם מדדי P75 לאורך 24 שעות.
• הדרכת צוות לקריאת דוחות ותגובה לחריגות.

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

הגדרת תקציב ביצועים ב-CI עם Lighthouse CI ו-bundlesize, כולל ניטור RUM: 2–3 ימי עבודה. העלות מחושבת באופן אישי לפי מורכבות הפרויקט ומספר העמודים המרכזיים. העלות האופיינית נעה בין 1,500 ל-4,000 דולר. לקוחות בדרך כלל חוסכים 50,000 דולר בשנה על ידי מניעת הידרדרות ביצועים.

קבעו פגישת ייעוץ — נבחן את הפרויקט שלך ונציע את הפתרון האופטימלי. צרו קשר כדי להגדיר תקציב ביצועים ולהגן על האתר שלכם מפני הידרדרות ביצועים.