בדיקת Core Web Vitals: נתח את מדדי חוויית הדף של גוגל

ב-2021 גוגל הפך את Core Web Vitals לפקטור דירוג רשמי כחלק מה-Page Experience Update. שלושת המדדים — LCP, INP ו-CLS — מודדים היבטים שונים של חוויית משתמש ריאלית. הכלי שלמעלה מנתח את האתר שלך ומציג את הציונים יחד עם אבחון ספציפי.

שלושת מדדי ה-Core Web Vitals

כל מדד מודד זווית שונה של חוויית המשתמש:

• LCP — Largest Contentful Paint: מתי האלמנט הגדול בדף (תמונת hero, כותרת ראשית, או וידאו) מוצג. גולשים תופסים דף כ"נטען" כשהתוכן הראשי גלוי. ספי LCP: מעולה <2.5s, דרוש שיפור 2.5-4s, גרוע >4s.
• INP — Interaction to Next Paint: כמה מהר הדף מגיב לכל האינטראקציות של המשתמש — לחיצות, הקלדות, גלילה. החליף את FID ב-2024. ספי INP: מעולה <200ms, דרוש שיפור 200-500ms, גרוע >500ms.
• CLS — Cumulative Layout Shift: כמה הפריסה הויזואלית קופצת בזמן הטעינה. דמיין שאתה לוחץ על כפתור ואז תמונה נטענת וזזת את הכפתור — קלקת על משהו אחר. ספי CLS: מעולה <0.1, דרוש שיפור 0.1-0.25, גרוע >0.25.

איך לשפר LCP

LCP הוא לרוב המדד הכי קל לשפר עם השפעה גדולה:

1. זהה מהו אלמנט ה-LCP שלך (בדרך כלל תמונת hero). ב-Chrome DevTools פתח Performance tab וחפש LCP.
2. ודא שהתמונה נטענת מהר: דחיסה ל-WebP, גדלים נכונים, fetchpriority="high"
3. הסר redirect chains — כל redirect מוסיף 100-300ms
4. השתמש ב-CDN כדי לשרת את הקובץ מהשרת הקרוב ביותר
5. שקול preload לאלמנט LCP: <link rel="preload" as="image" href="hero.webp">

איך לשפר CLS

CLS הוא לרוב הגורם הכי מפתיע כי הוא נגרם ממקורות בלתי צפויים:

• תמיד הגדר width ו-height על תגיות img (גם ב-CSS)
• הזמן שטח לפרסומות ואמבדים לפני שהם נטענים (aspect-ratio CSS)
• השתמש ב-font-display: optional או swap כדי למנוע FOUT (Flash of Unstyled Text)
• הימנע מהוספת תוכן מעל תוכן קיים לאחר הטעינה

Core Web Vitals ודירוג בפועל

מה שחשוב להבין: Core Web Vitals הם tiebreaker, לא גורם דירוג עצמאי. אם כל שאר הגורמים (תוכן, קישורים, סמכות) שווים, אתר עם Core Web Vitals מצוין ינצח. אבל אתר עם תוכן הרבה יותר טוב ו-Core Web Vitals בינוניים עדיין יכול לנצח. עם זאת, שיפור Core Web Vitals גם ישפר המרות ושיעורי נטישה — ולכן הוא שווה ביצוע ללא קשר לדירוג.