הצגת התוכן הראשוני (FCP)

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

ב-Lighthouse מוצג משך הזמן ל-FCP בשניות:

הציון של Lighthouse במדד 'הצגת תוכן ראשוני (FCP)' מודגש בקטע 'מדדים'
הציון של Lighthouse להצגת תוכן ראשוני (FCP)

מה המדד FCP מודד

מדד ה-FCP מודד את משך הזמן שלוקח לדפדפן לבצע רינדור לחלק הראשון של תוכן ה-DOM אחרי שמשתמש מנווט לדף. תמונות, רכיבי <canvas> שאינם לבנים ורכיבי SVG בדף נחשבים לתוכן DOM. כל מה שנמצא בתוך iframe לא נכלל.

איך נקבע הציון שלכם ב-FCP על ידי Lighthouse

הציון של FCP הוא השוואה בין זמן ה-FCP של הדף לבין זמני ה-FCP של אתרים אמיתיים, על סמך נתונים מ-HTTP Archive. לדוגמה, אתרים שמניבים ביצועים ב-99% העליון מבצעים רינדור של FCP תוך כ-1.2 שניות. אם זמן ה-FCP של האתר הוא 1.2 שניות, הציון של ה-FCP הוא 99. במאמר איך נקבעים ציונים של מדדים מוסבר איך מוגדרים ערכי הסף של ציונים ב-Lighthouse.

בטבלה הבאה מוסבר איך לפרש את הציון של 'שיעור צפייה מלא' בנייד:

משך זמן FCP
(בשניות)
קודי צבעים
0 עד 1.8 ירוק (מהיר)
1.8-3 כתום (בינוני)
מעל 3 אדום (איטי)
הסף של Lighthouse לאירועי FCP בניידים

ביוזמת Web Vitals מומלצים אותם ערכי סף ללא קשר למכשיר, והם מבוססים בעיקר על ערכי הסף בנייד. עם זאת, מאחר ש-Lighthouse הוא כלי Lab, כדאי להחמיר את הקריטריונים כשבודקים מכשירים מהירים יותר למחשב. הכלי משתמש בערכים סף שונים.

בטבלה הבאה מוסבר איך לפרש את הציון של FCP במחשב:

משך זמן FCP
(בשניות)
קודי צבעים
0 עד 0.9 ירוק (מהיר)
0.9-1.6 כתום (בינוני)
מעל 1.6 אדום (איטי)
הסף של Lighthouse לזמן טעינה ראשוני בדפדפנים למחשב

איך לשפר את הציון של FCP

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

מדידת FCP במכשירים של משתמשים אמיתיים

במאמר מדידת FCP ב-JavaScript מוסבר איך למדוד את האירוע הזה בפועל במכשירים של המשתמשים.

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

איך לשפר את ציון הביצועים הכולל

אם אין לכם סיבה ספציפית להתמקד במדד מסוים, בדרך כלל עדיף להתמקד בשיפור הציון הכולל של הביצועים.

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

Lighthouse: הקטע &#39;אבחון&#39; שבו מוצגות כמה ביקורות וההשפעה שלהן
Lighthouse: הקטע 'אבחון'

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

משאבים