מהו FCP?
המדד 'הצגת תוכן ראשוני (FCP)' מודד את הזמן שחלף מהרגע שהמשתמש ניווט לדף בפעם הראשונה ועד לרגע שבו חלק כלשהו מתוכן הדף עובר רינדור במסך. במדד הזה, 'תוכן' הוא טקסט, תמונות (כולל תמונות רקע), רכיבי <svg>
או רכיבי <canvas>
שאינם לבנים.
![ציר הזמן של FCP מ-google.com](https://web.dev/static/articles/fcp/image/fcp-timeline-googlecom.png?authuser=5&hl=he)
בציר הזמן של הטעינה המתואר בתמונה הקודמת, שיטת FCP מתרחשת בפריים השני. באותו זמן, רכיבי הטקסט והתמונה הראשונים עוברים עיבוד למסך.
תוכלו לראות שחלק מהתוכן עבר עיבוד, אבל לא כולו עבר רינדור. זוהי הבחנה חשובה בין First הצגת תוכן מבוסס-תוכן לבין המהירות שבה נטען Largest Contentful Paint (LCP), שהמטרה שלה היא למדוד את הטעינה של התוכן הראשי.
מהו ציון FCP טוב?
כדי לספק חוויית משתמש טובה, אתרים צריכים לכלול לפחות 1.8 שניות של תוכן ראשוני (FP) כדי לוודא שאתם עומדים ביעד הזה עבור רוב המשתמשים, סף טוב למדידה הוא האחוזון ה-75 של טעינות דפים, המפולחים במכשירים ניידים ובמחשבים.
איך מודדים FCP
אפשר למדוד FCP בשיעור ה-Lab או בשדה, והוא זמין בכלים הבאים:
כלים לשטח
- PageSpeed Insights
- חוויית המשתמש ב-Chrome דיווח
- Search Console (מהירות) דיווח)
- ספריית JavaScript של
web-vitals
כלים לשיעור 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 באופן כללי (בכל אתר), אפשר לעיין במדריכים הבאים בנושא ביצועים:
- ביטול משאבים שחוסמים עיבוד
- לצמצם את שירות ה-CSS
- הסרת שירות CSS שלא נמצא בשימוש
- הסרת JavaScript שלא נמצא בשימוש
- קישור מראש למקורות הנדרשים
- קיצור זמני התגובה של השרת (TTFB)
- הימנעות מהפניות אוטומטיות של דפים מרובים
- טעינה מראש של בקשות עיקריות
- נמנעים ממטענים ייעודיים (payloads) עצומים ברשת
- הצגה של נכסים סטטיים באמצעות מדיניות מטמון יעילה
- להימנע מנפח DOM גדול מדי
- צמצום עומק הבקשות הקריטיות
- מוודאים שהטקסט נשאר גלוי במהלך טעינת ה-webfont
- לשמור על מספר קטן של בקשות ולצמצם את גודל ההעברות
יומן שינויים
מדי פעם מתגלים באגים בממשקי ה-API שמשמשים למדידת מדדים, ולפעמים גם בהגדרות של המדדים עצמם. כתוצאה מכך, לפעמים צריך לבצע שינויים, והשינויים יכולים להופיע כשיפורים או כרגרסיות בדוחות הפנימיים ובלוחות הבקרה.
כדי לעזור לכם לנהל את זה, כל השינויים בהטמעה או בהגדרה של המדדים האלה יופיעו ביומן השינויים הזה.
אם יש לכם משוב על המדדים האלה, אתם יכולים לשלוח אותו בקבוצת Google בנושא web-vitals-feedback.