First Contentful Paint (FCP)

Philip Walton

תמיכה בדפדפנים

  • Chrome: ‏ 60.
  • Edge: ‏ 79.
  • Firefox: ‏ 84.
  • Safari: ‏ 14.1.

מקור

מהו FCP?

המדד 'הצגת תוכן ראשוני (FCP)' מודד את הזמן מהרגע שבו המשתמש מנווט לדף בפעם הראשונה ועד לרגע שבו חלק כלשהו מתוכן הדף עבר עיבוד במסך. במדד הזה, 'תוכן' מתייחס לטקסט, לתמונות (כולל תמונות רקע), לאלמנטי <svg> או לאלמנטי <canvas> שאינם לבנים.

ציר הזמן של FCP מ-google.com
בציר הזמן הזה של הטעינה, ה-FCP מתרחש בפריים השני, כי זהו הזמן שבו רכיבי הטקסט והתמונה הראשונים עוברים רינדור במסך.

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

תבחינו שחלק מהתוכן עבר רינדור, אבל לא כל התוכן. חשוב להבחין בין הצגת התוכן הראשונית לבין הצגת התוכן הגדולה ביותר (LCP) – המדד הזה נועד למדוד מתי הסתיימה הטעינה של התוכן הראשי בדף.

מהו ציון FCP טוב?

כדי לספק חוויית משתמש טובה, באתרים צריך לשאוף לזמן של 1.8 שניות או פחות ל-First Contentful Paint. כדי לוודא שאתם עומדים ביעד הזה עבור רוב המשתמשים, סף טוב למדידה הוא הפרמטר 75th percentile של טעינת הדפים, שמפולח לפי מכשירים ניידים ומחשבים.

ערכים טובים של משך זמן FCP הם 1.8 שניות או פחות, ערכים גרועים הם יותר מ-3.0 שניות וכל ערך בטווח שביניהם צריך שיפור
ערכים טובים של FCP הם 1.8 שניות או פחות. ערכים נמוכים הם ערכים של יותר מ-3.0 שניות

איך מודדים את מדד FCP

אפשר למדוד את FCP במעבדה או בשטח, והוא זמין בכלים הבאים:

כלים לשדה

כלי Labs

מדידת אירועי FCP ב-JavaScript

כדי למדוד את זמן הטעינה הראשוני ב-JavaScript, אפשר להשתמש ב-Paint Timing API. בדוגמה הבאה מוסבר איך ליצור PerformanceObserver שמקשיב לרשומה paint בשם first-contentful-paint ומתעדה אותה במסוף.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

בקטע הקוד הקודם, הרשומה first-contentful-paint ביומן תציין מתי הרכיב הראשון עם תוכן נצבע. עם זאת, בחלק מהמקרים הרשומה הזו לא תקפה למדידת FCP.

בקטע הבא מפורטים ההבדלים בין מה שמדווח ב-API לבין אופן החישוב של המדד.

ההבדלים בין המדד לבין ה-API

  • ה-API ישלח רשומה first-contentful-paint לדפים שנטענו בכרטיסייה ברקע, אבל צריך להתעלם מהדפים האלה כשמחשבים את ה-FCP (צריך להביא בחשבון את זמני ה-first paint רק אם הדף היה בחזית כל הזמן).
  • ה-API לא מדווח על רשומות first-contentful-paint כשהדף משוחזר מהמטמון לדף הקודם/הבא, אבל במקרים כאלה צריך למדוד את FCP כי המשתמשים חווים אותם כביקור נפרד בדף.
  • יכול להיות שה-API לא ידווח על תזמוני צביעה מ-iframes ממקורות שונים, אבל כדי למדוד כראוי את זמן הטעינה הראשוני, צריך להביא בחשבון את כל המסגרות. פריימים משניים יכולים להשתמש ב-API כדי לדווח על זמני הצביעה שלהם לפריים ההורה לצורך צבירת נתונים.
  • ה-API מודד את FCP מתחילת הניווט, אבל בדפים שעברו רינדור מראש צריך למדוד את FCP מ-activationStart כי זהו הזמן של FCP כפי שהמשתמש חווה אותו.

במקום לזכור את כל ההבדלים העדינים האלה, מפתחים יכולים להשתמש בספריית JavaScript של web-vitals כדי למדוד את FCP, והיא מטפלת בהבדלים האלה בשבילכם (במקרים שבהם הדבר אפשרי – שימו לב שהבעיה של iframe לא מכוסה):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

אפשר לעיין בקוד המקור של onFCP() כדי לראות דוגמה מלאה למדידת FCP ב-JavaScript.

איך משפרים את FCP

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

כדי ללמוד איך לשפר את זמן הטעינה הכולל באופן כללי (בכל אתר), אפשר לעיין במדריכי הביצועים הבאים:

יומן שינויים

מדי פעם מתגלים באגים בממשקי ה-API המשמשים למדידת המדדים, ולפעמים בהגדרות של המדדים עצמם. לכן, לפעמים צריך לבצע שינויים, והשינויים האלה יכולים להופיע בדוחות הפנימיים ובלוחות הבקרה שלכם כשיפורים או נסיגות.

כדי לעזור לכם לנהל את הנושא, כל השינויים בהטמעה או בהגדרה של המדדים האלה יופיעו ביומן השינויים הזה.

אם יש לכם משוב לגבי המדדים האלה, אתם יכולים לשלוח אותו לקבוצת Google‏ web-vitals-feedback.