הצגת התוכן הראשוני (FCP) היא אחד מששת המדדים שאחריהם מתבצע מעקב בקטע ביצועים בדוח Lighthouse. כל מדד מתעד היבט מסוים של מהירות הטעינה של דף.
ב-Lighthouse מוצג FCP בשניות:
![צילום מסך של הביקורת בנושא הצגת תוכן ראשוני (FCP) ב-Lighthouse](https://developer.chrome.google.cn/static/docs/lighthouse/performance/first-contentful-paint/image/a-screenshot-the-lightho-07286fe9106ca.png?authuser=5&hl=he)
מה מודדים FCP
מדד FCP מודד את משך הזמן שנדרש לדפדפן כדי לעבד את הקטע הראשון של תוכן ה-DOM אחרי שמשתמש עובר לדף שלכם.
תמונות, רכיבי <canvas>
שאינם לבנים וקובצי SVG בדף נחשבים לתוכן DOM. כל תוכן בתוך iframe לא נכלל.
איך מערכת Lighthouse קובעת את דירוג ה-FCP
ציון ה-FCP הוא השוואה בין זמן ה-FCP לבין זמן ה-FCP באתרים אמיתיים, על סמך נתונים מארכיון ה-HTTP. לדוגמה, אתרים שמניבים ביצועים באחוזון התשעים והתשעים מעבדים FCP תוך כ-1.2 שניות. אם ערך ה-FCP של האתר הוא 1.2 שניות, ציון ה-FCP הוא 99. ראו איך נקבעים ציוני המדדים כדי ללמוד איך מגדירים ערכי סף לציונים ב-Lighthouse.
הטבלה הבאה מראה איך לפרש את ציון ה-FCP:
זמן FCP (בשניות) |
קידוד צבעים |
---|---|
0-1.8 | ירוק (מהיר) |
3-1.8 | כתום (בינוני) |
יותר מ-3 | אדום (איטי) |
איך לשפר את דירוג ה-FCP
אחת הבעיות שחשובות במיוחד ל-FCP היא זמן הטעינה של הגופנים. כדאי לקרוא את הפוסט איך לוודא שהטקסט יישאר גלוי במהלך טעינת ה-webfont כדי לקבל מידע על דרכים להאיץ את טעינת הגופן.
מעקב אחר FCP במכשירים של משתמשים אמיתיים
בדף מדדי ביצועים שמתמקדים במשתמשים של Google מוסבר איך למדוד מתי בפועל FCP מתרחש במכשירים של המשתמשים. בקטע מעקב אחר FP/FCP מוסבר איך לגשת לנתוני FCP באופן פרוגרמטי ולשלוח אותם ל-Google Analytics.
מידע נוסף על איסוף מדדי משתמשים אמיתיים זמין במאמר הערכת ביצועי הטעינה בחיים האמיתיים באמצעות ניווט ותזמון משאבים.
איך לשפר את ציון הביצועים הכולל
אלא אם יש סיבה ספציפית להתמקד במדד מסוים, בדרך כלל עדיף להתמקד בשיפור של ציון הביצועים הכולל.
בקטע הזדמנויות בדוח Lighthouse אפשר לקבוע אילו שיפורים מניבים את הערך הגבוה ביותר לדף. ככל שההזדמנות גבוהה יותר, כך ההשפעה שלה על ציון הביצועים גדולה יותר. לדוגמה, בצילום המסך הבא של Lighthouse אפשר לראות שהסרת משאבים שחוסמים עיבוד תוביל לשיפור הגדול ביותר:
![Lighthouse: הקטע 'הזדמנויות'](https://developer.chrome.google.cn/static/docs/lighthouse/performance/interactive/image/lighthouse-opportunities-ec2197d9dce25_1920.png?authuser=5&hl=he)
בדף הנחיתה של ביקורות הביצועים מוסבר איך לטפל בהזדמנויות שזוהו בדוח Lighthouse.