First Contentful Paint (FCP)

Philip Walton

תמיכה בדפדפן

  • 60
  • 79
  • 84
  • 14.1

מקור

מהו FCP?

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

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

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

תוכלו לראות שחלק מהתוכן עבר עיבוד, אבל לא כולו עבר רינדור. זוהי הבחנה חשובה בין First הצגת תוכן מבוסס-תוכן לבין המהירות שבה נטען Largest Contentful Paint (LCP), שהמטרה שלה היא למדוד את הטעינה של התוכן הראשי.

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

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

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

איך מודדים FCP

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

כלים לשטח

כלים לשיעור Lab

מדידת 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 כפי שראה המשתמש.

במקום לשנן את כל ההבדלים הקלים האלה, מפתחים יכולים להשתמש בספריית ה-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

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

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

יומן שינויים

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

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

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