Core Web Vitals הם שלושה מדדי ביצועים שגוגל בודקת בכל אתר: טעינת תוכן מרכזי תוך 2.5 שניות, תגובה לפעולת גולש תוך 200 מילישניות, ותזוזת תוכן לא צפויה בציון שלא עולה על 0.1. המדדים האלה מתבססים על נתוני אמת של משתמשים בפועל, ולא על סימולציה אחת שרצה במחשב שלכם.
הנתונים נבדקים לפי אחוזון 75 של כלל כניסות המשתמשים לדף, בחלוקה נפרדת בין מכשירים ניידים למחשבים שולחניים. כדי לעבור את ההערכה, עמוד חייב להשיג ציון תקין בכל שלושת המדדים במקביל. אם עמדתם ביעדים של שני מדדים ונכשלתם בשלישי, הדף כולו מוגדר כמי שלא עמד בתקן.
זה קשוח.
מדד LCP מהירות טעינת התוכן
המדד הראשון הוא Largest Contentful Paint. הוא מודד כמה זמן עובר מתחילת הטעינה ועד שהאלמנט הגדול ביותר שנמצא בתוך שטח המסך מוצג במלואו. בחישוב נכללים בעיקר תמונות, תגי וידאו או בלוקים של טקסט רגיל.
גוגל מחשבת רק את השטח הגלוי לעין בתוך גבולות הדפדפן. שוליים פנימיים, מסגרות ושוליים חיצוניים שנקבעו בגיליונות סגנון אינם נכללים בחישוב השטח. אם תמונה הוקטנה מגודלה המקורי, החישוב לוקח את הגודל הקטן מבין השניים. בנוסף, אלמנטים שקופים לחלוטין או כאלה שמכסים את כל שטח המסך נפסלים מהחישוב.
ציון תקין של המדד הוא 2.5 שניות או פחות. תוצאה בין 2.5 שניות לבין 4.0 שניות דורשת שיפור, ומעל 4.0 שניות מוגדרת כחוויית טעינה ירודה. בזמן הטעינה, הדפדפן מפיק דיווח ביצועים ראשוני עבור הטקסט, ומחליף אותו בדיווח חדש כאשר תמונת הנושא הראשית מסיימת לרדת.
לא הייתי בונה עמודי בית שתלויים בקובצי וידאו כבדים ברקע. הם חונקים את מהירות הטעינה של גולשים בנייד.
מדד INP מהירות תגובה לאינטראקציה
מדד Interaction to Next Paint בודק את תגובת הדף לאורך כל משך השהות של הגולש, ולא רק בלחיצה הראשונה. לפי נתוני שימוש של דפדפן Chrome, כ-90% מזמן השהייה של משתמש מתרחש לאחר שלב הטעינה הראשוני. המדד בודק רק פעולות קלט ישירות: לחיצות עכבר, הקשות במסך מגע או הקלדות במקלדת.
המדד מחשב את הזמן שחולף מרגע הלחיצה ועד שהדפדפן מציג למשתמש את הפריים הבא במסך. הזמן הזה כולל שלושה חלקים רצופים: השהיית הקלט הראשונית, משך הזמן שבו רצים קטעי הקוד שהוגדרו לאירוע, וההשהיה עד לעיבוד הוויזואלי על המסך. המטרה היא להציג חיווי גרפי מידי על הפעולה.
סף תקין עומד על 200 מילישניות או פחות. טווח שבין 200 ל-500 מילישניות דורש שיפור, ותוצאה מעל 500 מילישניות נחשבת גרועה. בדפים עתירי אינטראקציות, גוגל מתעלמת מהלחיצה האיטית ביותר עבור כל 50 לחיצות שנרשמו, כדי שקפיצה חד-פעמית לא תהרוס את כל הציון של העמוד.
המדד הזה נכנס כחלופה מלאה למדד First Input Delay הוותיק. המדד הקודם מדד אך ורק את השהיית הקלט הראשונה של הדף, והתעלם ממה שקורה בהמשך הגלישה.
מדד CLS יציבות ויזואלית
מדד Cumulative Layout Shift מודד תזוזות תוכן לא צפויה שמתרחשות מול עיני הגולש. תופעה כזו נוצרת כאשר רכיבים נטענים באופן א-סינכרוני או כשתמונות עולות ללא מידות מוגדרות מראש, ודוחפות בלוקים קיימים כלפי מטה בזמן שמישהו מנסה לקרוא או להקליק על כפתור באתר.
חישוב הציון הוא מכפלה של שני נתונים: חלק ההשפעה וחלק המרחק. חלק ההשפעה בודק איזה אחוז משטח המסך הושפע מהתזוזה של האלמנט הלא יציב. חלק המרחק מודד מה המרחק המרבי שהאלמנט זז ביחס לגובה או לרוחב של המסך. הציון הסופי מחושב עבור חלון זמן רצוף של עד חמש שניות שבו התרחשו השיבושים.
ציון תקין הוא 0.1 ומטה. תוצאה שבין 0.1 ל-0.25 מחייבת עבודת ייצוב, ומעל 0.25 נחשבת ירודה. אם אלמנט חדש לחלוטין מתווסף לדף מבלי להזיז אלמנטים קיימים ממקומם, הפעולה אינה נספרת כפגיעה בציון.
| מדד | היבט נבדק | ערך תקין | דרוש שיפור | ערך ירוד |
|---|---|---|---|---|
| LCP | מהירות טעינת תוכן | עד 2.5 שניות | 2.5 עד 4.0 שניות | מעל 4.0 שניות |
| INP | מהירות תגובה לפעולה | עד 200 מילישניות | 200 עד 500 מילישניות | מעל 500 מילישניות |
| CLS | יציבות ויזואלית של מבנה | עד 0.1 | 0.1 עד 0.25 | מעל 0.25 |
כלים למדידה ולניטור האתר
נתוני השטח נאספים דרך Chrome User Experience Report ישירות מתוך דפדפנים של מבקרים אמיתיים. את התוצאות המצטברות האלה תראו בתוך Google Search Console תחת דוח Core Web Vitals, וכן בכלי הבדיקה PageSpeed Insights. כלים אלה חושפים בדיוק היכן עמודי האתר שלכם מתקשים לעמוד ברף הנדרש.
בדיקות מעבדה אפשר לבצע מתוך סביבת המפתחים של Chrome DevTools או בעזרת כלי Lighthouse. בדיקת מעבדה מבודדת בעיות מקומיות לפני פרסום האתר, אך רק נתוני שטח אמיתיים מכריעים את הציון של גוגל. כדאי לדעת כי Lighthouse אינו מודד ישירות את INP במעבדה, ומציג במקומו את מדד Total Blocking Time.
זה שווה את המאמץ רק אם אתם מקבלים תנועה ממשתמשים אמיתיים ומנטרים אותם ברציפות. כדי למדוד עצמאית, משתמשים בספריית web-vitals הזמינה ב-GitHub, מפעילים פונקציות ייעודיות כמו onLCP או onINP, ושולחים את הנתונים ישירות לשרת בעזרת הפקודה sendBeacon.
המדדים כולם נמצאים כעת בשלב Stable במחזור החיים הרשמי של הפרויקט. ההגדרות שלהם אינן משתנות יותר מפעם אחת בשנה, וכל עדכון כזה מלווה בתיעוד מוקדם ומסודר.
סדר הפעולות לתיקון האתר
- בדקו דוחות ב-Search Console
- אתרו כתובות שנכשלו באחוזון 75
- זהו אלמנט עיקרי בבדיקת LCP
- הגדירו מידות רוחב וגובה לתמונות
- פצלו מקטעי קוד ארוכים ב-JavaScript
מקורות
- web.devhttps://web.dev/articles/vitals
- web.devhttps://web.dev/articles/lcp
- web.devhttps://web.dev/articles/inp
- web.devhttps://web.dev/articles/cls
- developers.google.comhttps://developers.google.com/search/docs/appearance/core-web-vitals
המדריך נכתב מהמקורות שלמעלה בתאריך הפרסום. מחירים ותנאים משתנים; לפני החלטה כספית בודקים מול המקור. מצאתם טעות? כתבו.