First Contentful Paint (FCP)

פיליפ וולטון
פיליפ וולטון

תמיכה בדפדפן

  • 60
  • 79
  • 84
  • 14.1

מקור

מהו FCP?

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

ציר הזמן של תוכנית FCP מ-google.com

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

תוכלו לראות שאמנם חלק מהתוכן עבר רינדור, אבל לא כולו עובד. יש להבחין, וחשוב להבחין בין First ContentfulPaint (FCP) ל-Largest Contentful Paint (LCP) – שמטרתה למדוד מתי הטעינה של התוכן הראשי של הדף הסתיימה.

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

כדי לספק חוויית משתמש טובה, אתרים צריכים לשאוף להצגת תוכן ראשוני (LCP) באורך של 1.8 שניות לכל היותר. כדי להגיע ליעד הזה עבור רוב המשתמשים, מומלץ למדוד את הסף האחוזון ה-75 של טעינות הדפים, שמפולח בין מכשירים ניידים ומחשבים.

ערכי FCP טובים הם 1.8 שניות או פחות, ערכים נמוכים גבוהים מ-3.0 שניות, וכל דבר שביניהם דורש שיפור

איך מודדים FCP

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

כלי שדה

כלי מעבדה

מדידת FCP ב-JavaScript

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

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

import {onFCP} from 'web-vitals';

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

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

איך לשפר את ה-FCP

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

כדי ללמוד איך לשפר את ה-FCP באופן כללי (לכל אתר), אפשר לעיין במדריכים הבאים:

יומן שינויים

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

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

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