FCP, או First Contentful Paint, הוא הזמן עד שמשהו ראשון מהתוכן מופיע על המסך: טקסט, לוגו או תמונה. זה הרגע שבו הגולש מבין שהעמוד בדרך ולא תקוע. לפי גוגל, זמן טוב הוא עד 1.8 שניות. הוא לא אחד משלושת המדדים שגוגל מדרגת לפיהם, אבל הוא מסמן בעיות שפוגעות בכל השאר.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
מה FCP מודד
FCP נרשם ברגע שהדפדפן מצייר את פיסת התוכן הראשונה: מילה, תמונה, אייקון או רקע בתוך אלמנט עם תוכן. רקע לבן או צבע בלבד לא נחשבים. עד הרגע הזה הגולש רואה מסך ריק, ולא יודע אם העמוד נטען או שהקישור שבור.
חשוב להבדיל בינו לבין זמן הופעת התוכן הראשי, LCP. הראשון מודד מתי משהו מופיע, השני מתי מופיע הדבר הגדול והחשוב. פער גדול ביניהם אומר בדרך כלל שהתמונה הראשית כבדה או מתגלה מאוחר. פער קטן אומר שהבעיה, אם יש, מוקדם יותר בדרך.
מה נחשב זמן טוב
| זמן | מה הוא אומר |
|---|---|
| עד 1.8 שניות | טוב |
| 1.8 עד 3 שניות | צריך שיפור |
| מעל 3 שניות | גרוע |
לפי גוגל, את הזמן בודקים על 75 אחוז מהכניסות לעמוד, בנפרד לטלפון ולמחשב. בגרסאות קודמות של המאמר הזה נכתב שהוא אחד מ Core Web Vitals, וזה לא נכון: הוא מדד עזר, והוא מופיע בכל דוח בדיקה כדי לעזור להבין את השאר.
מה מעכב את ההופעה הראשונה
לפני שהדפדפן מצייר משהו, הוא צריך את העמוד מהשרת, ואת כל קובצי העיצוב והסקריפטים שמוגדרים כחוסמים. כל אחד מהם מוסיף זמן. ברוב האתרים העיכוב מגיע משלושה מקומות.
שרת שעונה לאט
אם הבייט הראשון של העמוד מגיע אחרי שנייה, ההופעה הראשונה לא יכולה להיות לפני כן. זה הדבר הראשון לבדוק, ובאתר וורדפרס הפתרון הוא כמעט תמיד מטמון. פירטתי על זה במאמר על זמן התגובה של השרת.
קבצים שחוסמים את הציור
קובצי עיצוב גדולים וסקריפטים בראש העמוד גורמים לדפדפן לחכות לפני שהוא מצייר. הפתרון הוא להכניס לקוד העמוד רק את העיצוב של החלק העליון, לטעון את השאר אחר כך, ולדחות סקריפטים שלא נחוצים מיד.
פונטים
אם הדפדפן מחכה לפונט לפני שהוא מציג טקסט, ההופעה הראשונה מחכה איתו. באתר הזה בחרתי בכוונה שהטקסט יחכה לפונט, כי פונט הגיבוי רחב בהרבה וגרם לטקסט לקפוץ. כדי שההמתנה תהיה קצרה, קובץ הפונט שוקל פחות מ-8 קילובייט ונטען לפני כל השאר.
מה מדדתי באתר הזה
בדף הבית, בדיקת המעבדה של PageSpeed העריכה שה FCP מגיע אחרי 1.4 שניות. בדפדפן Chrome אמיתי, עם האטה של המעבד והרשת לרמה של טלפון בינוני, היא הגיעה אחרי כ-0.65 שניות. שני המספרים בטווח הטוב, אבל הפער מזכיר שהבדיקה במעבדה היא הערכה ולא מדידה.
שאלות ותשובות על ההופעה הראשונה
האם FCP משפיע על הדירוג בגוגל?
לא ישירות, כי הוא לא אחד משלושת המדדים שגוגל מדרגת לפיהם. אבל הוא קשור מאוד לזמן הופעת התוכן הראשי, שכן נבדק. עמוד שמופיע לראשונה אחרי שלוש שניות כמעט אף פעם לא יציג את התוכן הראשי בתוך 2.5.
למה הזמן ארוך יותר בטלפון?
כי לטלפון יש מעבד חלש יותר וחיבור פחות יציב, והוא צריך יותר זמן גם להוריד את הקבצים וגם לעבד אותם. רוב הגולשים בישראל מגיעים מהטלפון, ולכן את הזמן החשוב מודדים במובייל ולא במחשב.
מה ההבדל בין FCP ל LCP?
הראשון מודד מתי מופיע משהו כלשהו מהתוכן, השני מתי מופיע האלמנט הגדול בראש העמוד. בעמוד טוב הם קרובים זה לזה. כשיש ביניהם פער גדול, הבעיה היא כמעט תמיד בתמונה הראשית: היא כבדה, נטענת בעצלות או מתגלה מאוחר.
איך מקצרים את הזמן הכי מהר?
ברוב האתרים, מטמון עמודים ודחייה של סקריפטים שלא נחוצים בטעינה עושים את רוב העבודה. אחריהם בא טיפול בקובצי העיצוב. שינויים בעיצוב העמוד עצמו נדרשים רק לעתים רחוקות.
הצעד הבא
אם העמוד שלכם מופיע לראשונה אחרי יותר משתי שניות, משהו בדרך מעכב אותו. שלחו לי את הכתובת, ואבדוק אם זה השרת, הקבצים או הפונטים, ואגיד לכם מה התיקון שיקצר את הזמן הכי הרבה.
