Largest Contentful Paint, או בקיצור LCP, הוא הזמן שעובר עד שהאלמנט הגדול בראש העמוד מוצג במלואו. ברוב האתרים זו התמונה הראשית או הכותרת הגדולה. גוגל מחשיבה זמן של עד 2.5 שניות כטוב. זה המדד שהכי קרוב לתחושה של הגולש שהעמוד נטען, ולכן הוא הראשון שאני בודק באתר איטי.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
מה LCP מודד בפועל
הדפדפן מסמן תוך כדי הטעינה מה האלמנט הגדול ביותר שמופיע במסך הראשון, בלי לגלול. כשהאלמנט הזה מוצג במלואו, הזמן נרשם. אם אחר כך נטען אלמנט גדול יותר, הוא מחליף את הקודם. המדידה נעצרת ברגע שהגולש לוחץ או גולל.
LCP הוא אחד משלושת המדדים שגוגל קוראת להם Core Web Vitals. שני האחרים בודקים כמה מהר העמוד מגיב ללחיצה וכמה הוא קופץ בזמן הטעינה, אבל LCP הוא היחיד שמודד את מה שהגולש מחכה לראות.
מה נחשב ציון טוב
| זמן | מה הוא אומר |
|---|---|
| עד 2.5 שניות | טוב |
| 2.5 עד 4 שניות | צריך שיפור |
| מעל 4 שניות | גרוע |
גוגל בודקת את הזמן על 75 אחוז מהכניסות לעמוד, בנפרד לטלפון ולמחשב. כלומר, גם רוב הגולשים עם טלפון ישן וקליטה בינונית צריכים לראות את התוכן הראשי בתוך 2.5 שניות, ולא רק מי שגולש מהמחשב במשרד.
ארבעת החלקים של הזמן
גוגל מפרקת את זמן הופעת התוכן הראשי לארבעה חלקים. כדאי להכיר אותם, כי כל אחד מהם מצביע על סוג אחר של בעיה, ומי שמנסה לשפר בלי לדעת איזה חלק ארוך מבזבז זמן על החלק הלא נכון.
הזמן עד שהשרת עונה
מהלחיצה ועד שהשרת מתחיל לשלוח את העמוד. כאן משפיעים האחסון והמטמון. לפי גוגל, החלק הזה יכול לקחת כ-40 אחוז מהזמן כולו. אם הוא ארוך, הצעד הראשון הוא זיכרון מטמון ואחסון טוב, ולא שום שינוי בעמוד.
העיכוב עד שהדפדפן מגלה את התמונה
הזמן שעובר עד שהדפדפן בכלל מתחיל להוריד את התמונה הראשית. הוא אמור להיות קצר מאוד. הוא מתארך כשהתמונה מוגדרת כרקע בקובץ העיצוב, כשהיא נטענת בעצלות, או כשסקריפט מוסיף אותה רק אחרי הטעינה.
הזמן להוריד את התמונה
כאן משפיע משקל התמונה. תמונה ראשית של חצי מגה בטלפון עם קליטה בינונית לוקחת זמן, ולכן זה המקום שבו הקטנת משקל התמונה והמרה לפורמט מודרני עושות את ההבדל הגדול ביותר.
העיכוב עד שהתמונה מוצגת
התמונה כבר הגיעה, אבל הדפדפן עוד לא מציג אותה, כי הוא מחכה לקובצי עיצוב, לפונטים או לסקריפטים שחוסמים את הציור. גם החלק הזה אמור להיות קצר מאוד.
מקרה מהאתר הזה
בדף הבית של האתר הזה, האלמנט הגדול בראש העמוד הוא תמונת רקע שמוגדרת בקובץ העיצוב. תמונה כזו הדפדפן מגלה מאוחר, רק אחרי שהוא קרא את העיצוב, ולכן העיכוב בחלק השני היה ארוך. הפתרון היה לבקש מהדפדפן להתחיל להוריד אותה מיד, בעדיפות גבוהה, עוד לפני שהוא מגיע אליה בקוד.
וכאן גם הלקח השני: הבדיקה במעבדה של PageSpeed העריכה שהתוכן הראשי מופיע אחרי 4.2 שניות, ובדפדפן אמיתי עם האטה של טלפון בינוני הוא הופיע אחרי 1.2. ההערכה מניחה שכל הקבצים מתחרים על אותה רשת איטית. לכן את ההחלטות אני מקבל לפי נתונים של גולשים אמיתיים, כשיש מספיק כאלה.
הטעויות הנפוצות שמאריכות את הזמן
ברוב האתרים שאני בודק, הזמן הארוך מגיע מאותן כמה טעויות. כולן ניתנות לתיקון בלי לשנות את העיצוב.
טעינה עצלה של התמונה הראשית היא הטעות הכי נפוצה: תוספים מסמנים את כל התמונות לטעינה עצלה, כולל זו שבראש העמוד, והדפדפן מחכה איתה. עוד טעויות נפוצות הן סליידר בראש העמוד שמציג את התמונה רק אחרי שהסקריפט שלו רץ, תמונה ראשית במידות של מצלמה, וחלון הסכמה לעוגיות שהופך בעצמו לאלמנט הגדול ביותר.
שאלות ותשובות על זמן הופעת התוכן הראשי
איך יודעים מה האלמנט הגדול בעמוד?
ב PageSpeed Insights, בחלק של האבחון, מופיע האלמנט שנמדד, עם צילום שלו ופירוט של ארבעת החלקים. אפשר לראות את זה גם בכלי המפתחים של Chrome, בלשונית הביצועים. לפעמים מתגלה שהאלמנט הוא בכלל לא מה שחשבתם, למשל פסקת טקסט או באנר.
למה הזמן במובייל ארוך יותר מבמחשב?
כי הטלפון איטי יותר בעיבוד והחיבור שלו פחות יציב, ולפעמים גם האלמנט עצמו שונה: במחשב זו כותרת, ובטלפון תמונה שתופסת את כל המסך. רוב הגולשים בישראל מגיעים מהטלפון, ולכן את המדידה החשובה עושים במובייל.
האם להוריד את התמונה הראשית כדי לשפר את הזמן?
בדרך כלל לא צריך. תמונה ראשית קלה, בפורמט מודרני, שנטענת מוקדם ובעדיפות גבוהה, מופיעה מהר. הורדה שלה עלולה לפגוע במסר ובעיצוב בשביל שיפור קטן. רק אם כל השאר כבר מטופל והזמן עדיין ארוך, שווה לשקול גרסה פשוטה יותר בטלפון.
האם LCP משפיע על המיקום בגוגל?
הוא חלק מהמדדים שגוגל משתמשת בהם כדי להעריך את חוויית הגולש בעמוד. הוא לא יקפיץ עמוד חלש למעלה, אבל עמוד שהתוכן הראשי שלו מופיע אחרי חמש שניות מאבד גולשים עוד לפני שהם קראו מילה, וזה פוגע גם בהמרות.
הצעד הבא
הדרך המהירה לשפר את הזמן היא לדעת איזה מארבעת החלקים ארוך, ולטפל רק בו. שלחו לי את הכתובת, אמדוד את העמודים החשובים בטלפון, ואגיד לכם מה מעכב את התוכן הראשי ומה הדרך הזולה ביותר לקצר אותו.
