Core Web Vitals הם המדדים שבהם גוגל בודקת איך האתר שלכם מרגיש לגולשים אמיתיים: כמה מהר התוכן העיקרי נטען, כמה מהר האתר מגיב ללחיצה, וכמה העמוד קופץ בזמן הטעינה. אחרי שנים של בניית אתרי וורדפרס, אני יכול להגיד שאתר איטי כמעט אף פעם לא איטי בגלל בעיה אחת. הוא איטי בגלל עשר החלטות קטנות שכל אחת מהן נראתה תמימה בזמן אמת.
במדריך הזה אני מסביר מה כל מדד בודק, מה נחשב תוצאה טובה, ומה בדיוק אני עושה, שלב אחרי שלב, כדי להביא אתר וורדפרס לציון ירוק במובייל ובדסקטופ. בלי קסמים, רק סדר עבודה נכון.
מה זה Core Web Vitals?
Core Web Vitals הם שלושה מדדים של גוגל לחוויית משתמש באתר: LCP מודד כמה מהר נטען התוכן הראשי (טוב: עד 2.5 שניות), INP מודד כמה מהר העמוד מגיב לפעולות הגולש (טוב: עד 200 מילישניות), ו-CLS מודד כמה העמוד זז וקופץ בזמן טעינה (טוב: עד 0.1). הציון נמדד על גולשים אמיתיים, בנפרד למובייל ולדסקטופ.
את הספים הרשמיים גוגל מפרסמת ב-web.dev. חשוב לדעת שהציון נקבע לפי האחוזון ה-75: כדי לקבל ירוק, לפחות שלושה רבעים מהביקורים בעמוד צריכים לעמוד בסף. לכן אתר שמהיר רק במחשב שלכם, על סיבים ועם קאש חם, עלול לקבל ציון צהוב או אדום במובייל.
1. שלושת מדדי Core Web Vitals בפירוט
| מדד | מה הוא מודד | טוב | דורש שיפור | גרוע |
|---|---|---|---|---|
| LCP | זמן טעינת האלמנט הגדול במסך הראשון | עד 2.5 שניות | 2.5 עד 4 שניות | מעל 4 שניות |
| INP | זמן התגובה ללחיצות והקלדות | עד 200ms | 200 עד 500ms | מעל 500ms |
| CLS | כמה אלמנטים זזים בזמן הטעינה | עד 0.1 | 0.1 עד 0.25 | מעל 0.25 |
1.1 LCP: הרגע שבו הגולש רואה שיש תוכן
ברוב אתרי העסקים האלמנט הגדול הוא תמונת הפתיחה או הכותרת הראשית. כל מה שמעכב אותם, שרת איטי, תמונה כבדה, פונט שעוד לא נטען או קובץ CSS ענק, מעכב את ה-LCP.
1.2 INP: המדד שהחליף את FID
INP החליף את המדד הקודם FID במרץ 2024. הוא בודק את כל הלחיצות במהלך הביקור, ולא רק את הראשונה. באתרי וורדפרס האויב העיקרי שלו הוא JavaScript כבד: סליידרים, אנימציות, צ'אטים, פיקסלים ותוספים שטוענים סקריפטים בכל עמוד.
1.3 CLS: הקפיצות שגורמות ללחיצה בטעות
זה הרגע שבו אתם מנסים ללחוץ על כפתור, ובדיוק אז נטענת תמונה מעליו ומזיזה אותו. הגורמים הנפוצים: תמונות בלי רוחב וגובה מוגדרים, פונטים שמחליפים את עצמם באמצע הטעינה, ובאנרים או חלונות קופצים שנכנסים לעמוד באיחור.
2. האם Core Web Vitals משפיעים על הדירוג בגוגל?
כן, אבל צריך להבין באיזה משקל. גוגל משתמשת במדדים האלה כחלק מהערכת חוויית העמוד, אבל רלוונטיות ואיכות התוכן עדיין חשובות יותר. אתר ירוק עם תוכן חלש לא יעקוף אתר צהוב עם תשובה מצוינת. אבל כששני אתרים קרובים ברמת התוכן, חוויה טובה יותר יכולה להכריע.
ויש גם את הצד שלא קשור לגוגל בכלל: גולשים שמחכים לעמוד שנטען לאט יוצאים ממנו לפני שראו את ההצעה שלכם. אתר מהיר משפר קודם כל את ההמרות, ורק אחר כך את הדירוג.
3. שלב ראשון בשיפור Core Web Vitals: תמונות
ברוב האתרים שאני בודק, הבעיה הראשונה שמציקה ל-LCP היא התמונות. זה גם השלב שנותן את השיפור הגדול ביותר במאמץ הקטן ביותר.
3.1 פורמט וגודל נכונים
- תמונות ב-WebP, וב-AVIF כשהשרת והתוסף תומכים.
- מידות שמתאימות למקום שבו התמונה מוצגת. אין סיבה להעלות תמונה ברוחב 4000 פיקסלים למקום של 600.
- ייצוא באיכות של כ-80%, שבדרך כלל לא ניתנת להבחנה בעין.
על ההבדלים בין הפורמטים כתבתי בהרחבה במדריך על תמונות בפורמט הדור הבא.
3.2 טעינה חכמה של תמונת הפתיחה
טעינה עצלה (Lazy Load) מצוינת לתמונות שמתחת למסך הראשון, והרסנית לתמונת הפתיחה. התמונה הראשית צריכה להיטען מיד, עם preload או fetchpriority גבוה, ובלי Lazy Load. זו אחת הטעויות הנפוצות ביותר שאני מוצא באתרי אלמנטור.
3.3 מידות מוגדרות נגד קפיצות
לכל תמונה מוגדרים רוחב וגובה, כדי שהדפדפן ישמור לה מקום מראש. זה הצעד הפשוט ביותר שמוריד CLS.
4. פונטים: הגורם הסמוי ל-LCP ו-CLS גרועים
- אירוח מקומי של הפונטים במקום טעינה משרתי גוגל.
- פורמט woff2 בלבד, שהוא הקל ביותר.
- שניים עד שלושה משקלים, לא כל המשפחה.
- font-display: swap כדי שהטקסט יופיע מיד.
- preload לפונט הראשי שמופיע במסך הראשון.
איך עושים את זה בפועל באלמנטור, עם צילומי מסך, הסברתי במדריך על הוספת פונטים מותאמים באלמנטור.
5. תוספים: פחות זה מהיר יותר
וורדפרס עצמה לא איטית. מה שמאט אותה הוא מה שמתקינים עליה.
- מסירים תוספים שלא בשימוש.
- מחליפים שלושה תוספים בינוניים בתוסף אחד טוב, או בכמה שורות קוד.
- בודקים מה כל תוסף טוען בעזרת Query Monitor.
- מוותרים על סליידרים כבדים במסך הראשון.
- באלמנטור: מקפידים על חבילת תוספות אחת לכל היותר, ומכבים רכיבים שלא בשימוש.
התוספים שאני כן מתקין בכל אתר מופיעים ברשימת התוספים שאני מתקין בכל אתר חדש.
6. קאש ואופטימיזציה של קוד
6.1 הגדרות קאש שאני מפעיל
אני עובד עם WP Rocket, ובשרתי LiteSpeed גם LiteSpeed Cache מצוין. ההגדרות שעושות את רוב ההבדל:
- קאש עמודים וטעינה מוקדמת של הקאש (Preload).
- הסרת CSS שלא בשימוש, שמקטינה משמעותית את הקבצים באתרי אלמנטור.
- השהיית JavaScript עד האינטראקציה הראשונה, שמשפרת מאוד את INP.
- כיווץ CSS ו-JS, ובדיקה ששום דבר לא נשבר אחרי כל שינוי.
6.2 קוד שלא צריך להיטען
- מכבה ספריות אייקונים שלמות ומשתמש ב-SVG במקומן.
- אנימציות ב-CSS במקום JavaScript, ורק כשהן באמת תורמות.
- סקריפטים של צד שלישי, כמו צ'אט ופיקסלים, נטענים בעיכוב.
7. אחסון: הבסיס שכל Core Web Vitals עומדים עליו
שרת איטי מוסיף זמן לפני שנשלח בייט אחד, ואת הזמן הזה שום תוסף לא מחזיר. מה אני בודק באחסון:
- דיסקי NVMe וגרסת PHP עדכנית ונתמכת.
- תמיכה ב-HTTP/2 או HTTP/3.
- קאש אובייקטים כמו Redis או Memcached.
- שרת קרוב לקהל, או CDN שמגיש את הקבצים מקרוב.
את האתרים שאני בונה אני מאחסן אצל Vangus. את השיקולים בבחירת אחסון פירטתי במדריך על איך בוחרים אחסון לאתר וורדפרס.
8. איך מודדים Core Web Vitals נכון
8.1 נתוני מעבדה מול נתוני שטח
PageSpeed Insights מציג שני דברים שונים. בחלק העליון נתוני שטח מגולשים אמיתיים ב-28 הימים האחרונים, וזה מה שגוגל מסתכלת עליו. בחלק התחתון ציון Lighthouse מבדיקת מעבדה אחת, שעוזרת למצוא בעיות אבל לא קובעת את הציון. באתרים קטנים לפעמים אין מספיק תנועה לנתוני שטח, ואז עובדים עם נתוני המעבדה.
8.2 דוח Core Web Vitals ב-Search Console
הדוח מקבץ עמודים דומים ומראה אילו קבוצות עמודים נכשלות ובאיזה מדד. זה המקום לראות את התמונה של כל האתר, ולא רק של עמוד הבית.
8.3 בדיקה בתנאים של הגולשים
אני בודק כל אתר גם מהטלפון, ברשת סלולרית ולא בווייפיי, וב-DevTools עם האטת מעבד ורשת. בדיקה רק מהמחשב המשרדי מסתירה את רוב הבעיות.
טעויות נפוצות בשיפור Core Web Vitals
- לרדוף אחרי 100 ב-Lighthouse. הציון שחשוב הוא נתוני השטח, לא המספר העגול.
- Lazy Load לתמונת הפתיחה. זה מעכב בדיוק את האלמנט ש-LCP מודד.
- עוד תוסף אופטימיזציה על תוסף אופטימיזציה. שני תוספי קאש באותו אתר שוברים זה את זה.
- לבדוק רק את עמוד הבית. עמודי מוצר ומאמרים בנויים אחרת ונכשלים על דברים אחרים.
- להתעלם מסקריפטים של צד שלישי. צ'אט, פיקסלים ווידג'טים חיצוניים הם לעתים הסיבה העיקרית ל-INP גרוע.
- לשכוח שהציון מתעדכן לאט. נתוני השטח מתבססים על 28 ימים, ולכן שיפור מופיע בהדרגה.
סיכום: Core Web Vitals ירוק הוא תוצאה של סדר עבודה
אין תוסף אחד שמביא אתר לירוק. מה שעובד הוא סדר: אחסון טוב, תבנית קלה, תמונות בפורמט ובגודל נכונים, פונטים מקומיים, מעט תוספים, קאש מוגדר נכון ומדידה על גולשים אמיתיים. כשכל אלה נכונים מההתחלה, הרבה יותר קל לשמור על הציון ממה לתקן אתר איטי בדיעבד.
את הסדר הזה אני מיישם בכל אתר שאני מעלה לאוויר, ובודק שוב אחרי חודש על נתוני שטח. אם האתר שלכם צהוב או אדום ונסיתם כבר כמה תוספים בלי הצלחה, דברו איתי ונמצא את המקור.
שאלות נפוצות על Core Web Vitals
מה זה Core Web Vitals?
Core Web Vitals הם שלושה מדדים של גוגל לחוויית משתמש: LCP למהירות טעינת התוכן הראשי, INP למהירות התגובה ללחיצות, ו-CLS ליציבות העמוד בזמן טעינה. הם נמדדים על גולשים אמיתיים, בנפרד למובייל ולדסקטופ.
מה הערכים הטובים ב-Core Web Vitals?
LCP עד 2.5 שניות, INP עד 200 מילישניות ו-CLS עד 0.1. כדי שעמוד יקבל ציון ירוק, לפחות 75% מהביקורים בו צריכים לעמוד בערכים האלה.
האם Core Web Vitals משפיעים על הדירוג בגוגל?
כן, הם חלק מהאוופן שבו גוגל מעריכה חוויית עמוד, אבל רלוונטיות ואיכות התוכן חשובות יותר. המדדים יכולים להכריע בין עמודים קרובים, ובנוסף אתר מהיר מעלה המרות.
מה משפיע הכי הרבה על LCP בוורדפרס?
ברוב המקרים תמונת הפתיחה: המשקל שלה, הפורמט והאם היא מקבלת Lazy Load בטעות. אחריה מהירות השרת, קבצי CSS כבדים וטעינת פונטים.
איך משפרים INP באתר וורדפרס?
מקטינים את כמות ה-JavaScript: מסירים תוספים מיותרים, משהים סקריפטים עד האינטראקציה הראשונה, מוותרים על סליידרים ואנימציות JS, וטוענים צ׳אטים ופיקסלים בעיכוב.
מה גורם ל-CLS גבוה?
תמונות בלי רוחב וגובה מוגדרים, פונטים שמחליפים את עצמם באמצע הטעינה, ובאנרים, פסי הודעות או חלונות שנכנסים לעמוד אחרי שהתוכן כבר מוצג.
למה הציון ב-PageSpeed שונה מהציון ב-Search Console?
PageSpeed מציג גם בדיקת מעבדה חד פעמית וגם נתוני שטח. Search Console מציג רק נתוני שטח מגולשים אמיתיים, מקובצים לפי קבוצות עמודים. נתוני השטח הם אלה שקובעים.
כמה זמן לוקח לראות שיפור אחרי תיקון?
בדיקת מעבדה מראה שיפור מיד. נתוני השטח מבוססים על 28 הימים האחרונים, ולכן השיפור מופיע בהדרגה ומתייצב בדרך כלל אחרי כארבעה שבועות.
