First Contentful Paint (FCP)

Philip Walton

תמיכה בדפדפן

  • 60
  • 79
  • 84
  • 14.1

מקור

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

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

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

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

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

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

ערכי FCP טובים הם 1.8 שניות או פחות, ערכים נמוכים גבוהים מ-3.0 שניות, וכל דבר שביניהם דורש שיפור
ערכי 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 תואם לזמן ה-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 שמשמשים למדידת מדדים, ולפעמים גם בהגדרות של המדדים עצמם. כתוצאה מכך, לפעמים צריך לבצע שינויים, והם עשויים להופיע כשיפורים או רגרסיות בדוחות הפנימיים ובמרכזי הבקרה.

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

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