Core Web Vitals: מה המדדים אומרים ואיך משפרים

monitoring שלושת המדדים

• • LCP, Largest Contentful Paint: הזמן עד שהאלמנט הגדול ביותר בחלק הנראה של המסך מוצג, לרוב תמונה ראשית או כותרת. ערך טוב: עד 2.5 שניות.
• • INP, Interaction to Next Paint: כמה מהר העמוד מגיב ויזואלית לאינטראקציות לאורך כל הביקור, כמו לחיצה או הקלדה. החליף את FID במרץ 2024. ערך טוב: עד 200 מילישניות.
• • CLS, Cumulative Layout Shift: כמה אלמנטים זזים באופן לא צפוי בזמן הטעינה. ערך טוב: עד 0.1.

כדי שעמוד ייחשב "טוב", הערכים צריכים לעמוד בסף ב-75 אחוז מהביקורים, בנפרד למובייל ולדסקטופ.

lab_research נתוני שדה מול נתוני מעבדה

זה הבלבול הנפוץ ביותר. נתוני מעבדה, כמו הציון ב-Lighthouse, נמדדים בסימולציה אחת. נתוני שדה נאספים ממשתמשי Chrome אמיתיים, בדוח חוויית המשתמש של Chrome (CrUX), ומוצגים ב-PageSpeed Insights ובדוח Core Web Vitals ב-Search Console.

• • נתוני שדה הם מה שגוגל מסתכל עליו. הם משקפים מכשירים, רשתות ומיקומים אמיתיים.
• • נתוני מעבדה טובים לאבחון ולבדיקת תיקון לפני פרסום.
• • INP נמדד רק בשדה, כי הוא דורש אינטראקציות אמיתיות. במעבדה משתמשים במדד Total Blocking Time כאינדיקציה.
• • אתר קטן לפעמים לא מקבל נתוני שדה ברמת העמוד, ואז מופיעים נתונים ברמת האתר או שאין נתונים בכלל.

image איך משפרים LCP

• • תמונה ראשית אופטימלית: פורמט מודרני כמו WebP או AVIF, מידות נכונות, ובלי lazy loading לתמונה שבראש העמוד.
• • עדיפות טעינה: fetchpriority="high" לתמונה הראשית, ו-preload כשהיא נטענת מ-CSS.
• • זמן תגובת שרת: אחסון איטי, בלי מטמון או בלי CDN, מעכב הכל. על בחירת אחסון יש מדריך נפרד.
• • משאבים חוסמים: CSS ו-JavaScript שנטענים לפני התוכן. מצמצמים, דוחים ומטמיעים CSS קריטי.
• • גופנים: font-display מתאים וטעינה מוקדמת של הגופן הראשי.

touch_app איך משפרים INP

• • פחות JavaScript: כל סקריפט של צד שלישי, צ'אט, פיקסלים ווידג'טים, מתחרה על אותו תהליך.
• • משימות ארוכות: מפרקים קוד שרץ יותר מ-50 מילישניות לחלקים קטנים.
• • תגובה ויזואלית מיידית: מציגים שינוי מיד אחרי לחיצה, והעבודה הכבדה אחר כך.
• • DOM גדול: עמודים עם אלפי אלמנטים איטיים לעדכן. מצמצמים ומשתמשים בטעינה הדרגתית.

view_quilt איך משפרים CLS

• • מידות לתמונות ולווידאו: width ו-height או aspect-ratio, כדי שהדפדפן ישמור מקום.
• • מקום שמור לפרסומות ולבאנרים שנטענים מאוחר.
• • באנר עוגיות והודעות שמופיעים מעל התוכן ולא דוחפים אותו.
• • גופנים: החלפת גופן שמשנה את גודל הטקסט גורמת לקפיצה. מתאימים גופן חלופי במידות.

checklist סדר עבודה מומלץ

• • 1. דוח Core Web Vitals ב-Search Console, לפי קבוצות עמודים ולא עמוד בודד.
• • 2. בחירת תבנית עם הכי הרבה עמודים בעייתיים, למשל עמודי מוצר או מאמרים.
• • 3. אבחון במעבדה עם PageSpeed Insights וכלי המפתחים בדפדפן.
• • 4. תיקון ברמת התבנית, כך שכל העמודים מרוויחים.
• • 5. המתנה לנתוני שדה. הם מתעדכנים לאורך כ-28 יום, ולכן שיפור לא נראה מיד.

report מיתוסים נפוצים

• • "צריך ציון 100": אין בונוס על מאה. המטרה היא לעבור את הספים בנתוני השדה.
• • "מהירות היא גורם הדירוג העיקרי": רלוונטיות ואיכות תוכן חשובות הרבה יותר. Core Web Vitals הם שיקול נוסף, לא תחליף.
• • "פלאגין מטמון פותר הכל": מטמון עוזר לזמן תגובת השרת, אבל לא לתמונה כבדה, לסקריפטים של צד שלישי או לקפיצות פריסה.
• • "בדקתי במחשב שלי והכל מהיר": רוב המשתמשים גולשים בנייד, לפעמים ברשת איטית ובמכשיר ישן. נתוני השדה משקפים אותם.

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

check_circle סיכום

• • LCP עד 2.5 שניות, INP עד 200 מילישניות, CLS עד 0.1, ב-75 אחוז מהביקורים.
• • נתוני שדה קובעים, נתוני מעבדה משמשים לאבחון.
• • רוב הבעיות נובעות מתמונה ראשית כבדה, JavaScript של צד שלישי ואלמנטים בלי מקום שמור.
• • מתקנים ברמת התבנית וממתינים לעדכון נתוני השדה.

נכתב על ידי שמוליק דורינבאום, סמנכ״ל AI ודיגיטל בלאוס מדיה.