LCP (Largest Contentful Paint) מודד כמה זמן עובר מהרגע שהגולש מבקש את העמוד ועד שהאלמנט הגדול ביותר במסך — בדרך כלל תמונה ראשית, כותרת גדולה או בלוק טקסט — מוצג במלואו. זה המדד שהכי קרוב לתחושה של "העמוד נטען". לפי web.dev, היעד הוא LCP של 2.5 שניות ומטה ב-75% מהביקורים לפחות. שיפור LCP מתחיל בשאלה אחת: איפה הולך הזמן? גוגל מחלקת אותו לארבעה חלקים, וכל אחד דורש תיקון אחר.
ארבעת החלקים של LCP
לפי web.dev, זמן ה-LCP מתחלק לארבעה חלקים שמסתכמים יחד לזמן המלא:
| חלק | מה הוא | חלק מומלץ מהזמן |
|---|---|---|
| זמן לבייט הראשון (TTFB) | עד שהדפדפן מקבל את הבייט הראשון של ה-HTML | כ-40% |
| עיכוב בטעינת המשאב | מסוף ה-TTFB עד שהדפדפן מתחיל להוריד את תמונת ה-LCP | פחות מ-10% |
| משך טעינת המשאב | כמה זמן לוקח להוריד את התמונה עצמה | כ-40% |
| עיכוב ברינדור | מסיום ההורדה עד שהאלמנט מוצג | פחות מ-10% |
ההמלצה מראה איפה הבעיות בדרך כלל: שני החלקים ה"קטנים" — עיכוב בטעינה ועיכוב ברינדור — צריכים להיות כמעט אפס, וכשהם גדולים, זה סימן לבעיה בבנייה של העמוד ולא בשרת או בתמונה. web.dev גם מזהיר שקיצור חלק אחד יכול פשוט להעביר את הזמן לחלק אחר, ולכן צריך לטפל בכולם.
1. לקצר את זמן התגובה של השרת
אם השרת לוקח שנייה וחצי להחזיר HTML, אין שום דרך להגיע ל-LCP של 2.5 שניות. הכיוונים העיקריים: מטמון עמודים מלא, שרת שמתאים לעומס, צמצום הפניות (כל הפניה מוסיפה סבב בקשה), והימנעות מפרמטרים בכתובת שמונעים מה-CDN להגיש מהמטמון. פירוט במאמר TTFB וזמן תגובת השרת, ועל הגשת HTML מהקצה במאמר מטמון HTML ב-Cloudflare.
2. לגרום לדפדפן לגלות את התמונה מוקדם
זה החלק שהכי הרבה אתרים מפספסים. הדפדפן יכול להתחיל להוריד תמונה רק כשהוא יודע שהיא קיימת. אם התמונה מופיעה ב-HTML כתגית <img> רגילה — הוא מגלה אותה מיד. אבל אם היא:
- רקע שמוגדר בקובץ CSS,
- נטענת על ידי JavaScript (סליידר, בונה עמודים),
- או בטעינה עצלה —
הדפדפן מגלה אותה מאוחר, ונוצר "עיכוב בטעינת המשאב". web.dev מדגיש: לעולם לא לטעון את תמונת ה-LCP בטעינה עצלה — זה תמיד יוצר עיכוב מיותר. טעינה עצלה נכונה לתמונות שמתחת לקו הגלילה, לא לתמונה הראשית; ראו טעינה עצלה.
כשהתמונה חייבת להיות ב-CSS או ב-JavaScript, אפשר לספר עליה לדפדפן מראש עם preload:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
3. להעלות את העדיפות של התמונה
גם כשהדפדפן מגלה את התמונה מוקדם, הוא לא תמיד נותן לה עדיפות גבוהה. התכונה fetchpriority="high" על תגית התמונה אומרת לו שזו התמונה החשובה. לפי web.dev, בבדיקה של Google Flights, העדיפות הגבוהה לתמונת הרקע הורידה את ה-LCP מ-2.6 ל-1.9 שניות. התכונה נתמכת בכרום, באדג', בפיירפוקס ובספארי. web.dev גם מציין שסימון של יותר מתמונה אחת או שתיים מבטל את התועלת — אם הכול חשוב, שום דבר לא חשוב. המשלים: fetchpriority="low" לתמונות שנטענות מוקדם אבל לא נראות, כמו שקופיות נוספות בקרוסלה. על ההבדלים בין preload, preconnect ו-fetchpriority כתבתי במאמר רמזי טעינה.
4. להקטין את התמונה
משך ההורדה תלוי בגודל הקובץ. התמונה הראשית צריכה להיות במידות שבהן היא מוצגת (לא תמונה ברוחב 4000 פיקסלים שמוצגת ב-1200), בפורמט מודרני כמו WebP או AVIF, דחוסה, ומוגשת מ-CDN עם מדיניות מטמון ארוכה. srcset מאפשר לטלפון לקבל גרסה קטנה ולמחשב גרסה גדולה. פירוט במאמר אופטימיזציה לתמונות, ועל שירותים שעושים את זה אוטומטית — CDN לתמונות.
5. לא לחסום את הרינדור
התמונה ירדה, אבל עדיין לא מוצגת? בדרך כלל הדפדפן מחכה ל-CSS או ל-JavaScript שחוסמים את ההצגה, או שה-main thread עסוק במשימות ארוכות. הפתרונות: CSS קריטי מוטמע, דחיית CSS לא חיוני, סקריפטים עם defer, ופירוק משימות JavaScript ארוכות. ראו משאבים שחוסמים רינדור.
איך יודעים מה אלמנט ה-LCP
PageSpeed Insights ו-Lighthouse מציגים את האלמנט שנבחר כ-LCP, וגם את הפירוק לארבעת החלקים. האלמנט יכול להיות שונה בין מובייל למחשב: במחשב זו אולי תמונה רחבה, ובטלפון — כותרת. כדאי לבדוק את שניהם, ובכל סוג עמוד בנפרד: דף בית, מאמר ועמוד מוצר בנויים מתבניות שונות.
שאלות נפוצות
האלמנט הגדול אצלי הוא טקסט — איך משפרים?
אז אין משאב להוריד, והחלקים החשובים הם TTFB ועיכוב ברינדור: שרת מהיר, CSS שלא חוסם, ופונט שנטען מהר או מוצג קודם בפונט חלופי. ראו טעינת פונטים.
מה עם סליידר בראש העמוד?
סליידר שנבנה ב-JavaScript מעכב בדרך כלל את התמונה הראשונה, ולפעמים גם גורם לתזוזות. אם הוא חייב להישאר, השקופית הראשונה צריכה להיות תמונה רגילה ב-HTML עם עדיפות גבוהה, והשאר בעדיפות נמוכה.
LCP איטי הוא כמעט תמיד שילוב של שרת, תבנית ותמונות — ולכן הוא מתוקן הכי טוב כשמסתכלים על שלושתם יחד. פירוט בעמוד שיפור מהירות אתר, או כתבו לי.
אהבתם את המאמר?
