הגדרת ניטור Time to Interactive (TTI)

הבעיה: הדף נראה טעון אך אינו מגיב ללחיצות

Time to Interactive (TTI) הוא הרגע שבו הדף לא רק מוצג אלא באמת מוכן לאינטראקציה. ההבדל בין "הדף נראה מוכן" ל"הדף מוכן" יכול להיות 5–15 שניות במכשירים איטיים. זה מסביר שיעורי נטישה גבוהים במובייל גם עם FCP טוב. אנחנו, צוות של מהנדסי ווב עם ניסיון של 10+ שנים באופטימיזציית ביצועים, עוזרים להקים ניטור TTI כך שתראו את התמונה האמיתית ותוכלו להגיב במהירות לרגרסיות. הגישה המובטחת שלנו מבטיחה הגדרה מדויקת ותובנות מעשיות.

כיצד TTI משפיע על המרות ועסקים

מחקר של Google: עלייה של שנייה אחת ב-TTI מפחיתה המרות במובייל ב-7–12% בהתאם לתחום. עבור אתר מסחר אלקטרוני עם 1,000 ביקורים במובייל ביום והזמנה ממוצעת של $50, זה $350–600 ליום בהפסדים פוטנציאליים עבור כל שנייה נוספת של TTI. לכן ניטור TTI צריך להיות מוגדר כמדד עסקי, מקושר לפלחי תנועה ומשפכי המרה. החל מ-$500 לניטור בסיסי, ההתקנה שלנו מחזירה את עצמה תוך ימים.

מה זה TTI ואיך הוא נמדד?

TTI הוא הרגע שבו אין Long Tasks (משימות ארוכות מ-50 אלפיות השנייה ב-thread הראשי) למשך 5 שניות והרשת במצב סרק (לא יותר מ-2 בקשות פעילות). Lighthouse מחפש את ה-Long Task האחרון בחלון השקט הזה ולוקח את סופו כ-TTI. השלכה מעשית: TTI נקבע ישירות על ידי כמות וגודל ה-JavaScript שמנותח ומופעל במהלך הטעינה, ועל ידי מה שה-JS עושה ב-thread הראשי. ניטור מתקדם כולל גם First Input Delay (FID) ו-Total Blocking Time (TBT) כדי לחזות את התחושה המשתמשית של היענות.

עבור מכשירים ניידים עם האטת CPU פי 4, הכפילו את התוצאות השולחניות שלכם בערך פי 3.

למה להשתמש ב-Lighthouse CI יחד עם Performance Observer?

Lighthouse CI הוא כלי אידיאלי לבדיקות רגרסיה בצינור CI/CD, בעוד Performance Observer מספק נתונים אמיתיים ממשתמשים אמיתיים (נתוני שטח). שילוב גישות אלה מאפשר לזהות במהירות רגרסיות ובו זמנית לעקוב אחר מדדים בפועל באתר. לניטור TTI אמין, שימוש בשתי השיטות יחד יעיל פי 3 יותר מאשר הסתמכות על מקור יחיד. Google ממליצה להשתמש בשתי השיטות לתמונה מלאה של ביצועים.

איך להקים ניטור TTI: מדריך שלב אחר שלב

שלב 1: הגדרת Lighthouse CI לניטור TTI

npm install --save-dev @lhci/cli 

התצורה npm install --save-dev @lhci/cli מדמה Moto G4 על 3G — פרופיל Lighthouse נייד סטנדרטי:

{ "ci": {
    "collect": {
      "url": [
        "https://staging.example.com/",
        "https://staging.example.com/product/example-product"
      ],
      "numberOfRuns": 5,
      "settings": {
        "formFactor": "mobile",
        "screenEmulation": {
          "mobile": true,
          "width": 390,
          "height": 844,
          "deviceScaleFactor": 3
        },
        "throttlingMethod": "simulate",
        "throttling": {
          "rttMs": 150,
          "throughputKbps": 1638.4,
          "cpuSlowdownMultiplier": 4
        }
      }
    },
    "assert": {
      "preset": "lighthouse:recommended",
      "assertions": {
        "interactive": ["error", { "maxNumericValue": 7300 }],
        "total-blocking-time": ["error", { "maxNumericValue": 300 }]
      }
    },
    "upload": {
      "target": "lhci",
      "serverBaseUrl": "https://lhci.example.com",
      "token": "$LHCI_TOKEN"
    }
  }
}

שלב 2: איסוף נתוני שטח לניטור TTI דרך Performance Observer

ה-API של הדפדפן אינו מספק TTI ישירות, ולכן אנו משתמשים ב-polyfill של Google:

import ttiPolyfill from 'tti-polyfill';

ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
  if (typeof gtag !== 'undefined') {
    gtag('event', 'performance', {
      event_category: 'Web Vitals',
      event_label: 'TTI',
      value: Math.round(tti),
      non_interaction: true,
    });
  }

  fetch('/api/metrics', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      metric: 'tti',
      value: tti,
      url: window.location.href,
      userAgent: navigator.userAgent,
      timestamp: Date.now(),
    }),
    keepalive: true,
  });
});

ה-polyfill מעריך TTI באמצעות Long Task API ו-Network Information API. זה מספיק לניטור מגמות.

שלב 3: אחסון מדדים ויזואליזציה

צרו טבלה לאחסון נתוני שטח:

CREATE TABLE performance_metrics (
    id BIGSERIAL PRIMARY KEY,
    url TEXT NOT NULL,
    metric VARCHAR(50) NOT NULL,
    value FLOAT NOT NULL,
    connection VARCHAR(20),
    device VARCHAR(20),
    country VARCHAR(2),
    recorded_at TIMESTAMPTZ DEFAULT NOW()
);
CREATE INDEX ON performance_metrics (metric, recorded_at);

שאילתה לדשבורד Grafana (מגמת p75 TTI לפי שעה):

SELECT date_trunc('hour', recorded_at) AS time,
       percentile_cont(0.75) WITHIN GROUP (ORDER BY value) AS p75_tti
FROM performance_metrics
WHERE metric = 'tti'
  AND recorded_at BETWEEN $__timeFrom() AND $__timeTo()
GROUP BY 1
ORDER BY 1;

הגדירו התראות ב-Grafana: תנאי — p75 TTI ב-24 השעות האחרונות חורג מ-p75 ב-7 הימים הקודמים ביותר משנייה אחת. זה מסנן אזעקות שווא ומגיב רק לרגרסיות מתמשכות.

טעויות נפוצות בניטור TTI

• שימוש רק בערכים שולחניים — TTI במובייל יכול להיות גבוה פי 3–4.
• הסתמכות על מדידות Lighthouse בודדות — יש צורך בסטטיסטיקה מלפחות 5 ריצות.
• אי פילוח נתוני שטח לפי סוג מכשיר וסוג חיבור — ממוצעים מסתירים בעיות.
• התעלמות מ-Total Blocking Time (TBT) — הוא מתאם עם TTI ועוזר לאתר את הבעיה.

מה כלול בעבודה?

• ביקורת TTI נוכחית (מעבדה ושטח).
• הגדרת Lighthouse CI עם ספים ואינטגרציית CI/CD.
• איסוף נתוני שטח דרך Performance Observer.
• יצירת מסד נתונים PostgreSQL ודשבורד Grafana.
• הגדרת התראות לרגרסיות.
• תיעוד והדרכת צוות.
• חודש תמיכה לאחר המסירה.

בגיבוי של 10+ שנות ניסיון בהנדסת ביצועי ווב, אנו מבטיחים הגדרת ניטור מדויקת ותובנות מעשיות. הגדרה בסיסית מתחילה ב-$500; מערכת מלאה עם התראות ופילוח היא $2,000 — חלק קטן מההפסדים היומיים הפוטנציאליים.

לוח זמנים וכיצד להזמין

הגדרת Lighthouse CI בסיסית — מיום עסקים אחד. מערכת עם נתוני שטח ו-Grafana — מ-3 עד 5 ימי עסקים. מחזור מלא עם התראות ופילוח — משבוע עד שבועיים. העלות מחושבת באופן אישי לפי היקף העבודה. צרו קשר לביקורת והערכת פרויקט — נספק הצעה תוך 24 שעות.