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

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

מה זה Core Web Vitals ולמה זה חשוב

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

LCP - מהירות הצגת התוכן העיקרי

LCP מודד מתי האלמנט הגדול ביותר בחלון הצפייה הופך לגלוי. באתר תדמית זו כמעט תמיד תמונת הכותרת או הכותרת הראשית עצמה.

חמש הסיבות שאנחנו מוצאים כמעט תמיד, לפי סדר ההשפעה:

1. תמונת hero כבדה. קובץ JPEG של 2MB שהועלה ישירות מהמצלמה. המרה ל-WebP והתאמת מידות מורידה את זה ב-90% בלי הבדל נראה לעין.
2. גופנים חוסמי רינדור. שלוש משפחות מ-CDN חיצוני, שהטקסט ממתין להן.
3. CSS חוסם. קובץ סגנון של 200KB שחייב לרדת במלואו לפני שמשהו מוצג.
4. זמן תגובת שרת איטי. אחסון משותף זול שמחזיר את ה-HTML הראשון אחרי שנייה שלמה.
5. סקריפטים של צד שלישי. צ׳אטים, פיקסלים ובאנרי עוגיות שנטענים לפני התוכן.

INP - תגובתיות לאינטראקציה

INP החליף את FID ב-2024, והוא מחמיר יותר: במקום למדוד רק את האינטראקציה הראשונה, הוא בוחן את כל האינטראקציות לאורך הביקור ומדווח על הגרועות שבהן.

INP גבוה כמעט תמיד אומר דבר אחד - יותר מדי JavaScript שרץ ב-thread הראשי. כשהדפדפן עסוק בהרצת קוד, הוא לא יכול להגיב ללחיצה.

מה שעוזר בפועל:

• הסירו ספריות שאתם לא באמת משתמשים בהן. אתר תדמית טיפוסי לא צריך jQuery, ולרוב גם לא ספריית סליידר.
• טענו סקריפטים עם defer כדי שלא יחסמו את הפירוק של ה-HTML.
• דחו סקריפטים של צד שלישי עד אחרי האינטראקציה הראשונה של המשתמש.
• הימנעו מאנימציות שמשנות מאפייני פריסה. הנפישו transform ו-opacity בלבד.

CLS - יציבות ויזואלית

זה המדד שהכי מרגיזים גולשים: אתם עומדים ללחוץ על כפתור, באנר נטען מעליו, והלחיצה נוחתת על משהו אחר. CLS מכמת בדיוק את זה.

ארבעה גורמים מסבירים כמעט את כל המקרים:

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

איך למדוד נכון (ולמה Lighthouse משקר לכם)

יש שני סוגי נתונים, וחשוב לא לבלבל ביניהם:

נתוני מעבדה - Lighthouse ו-PageSpeed Insights מריצים סימולציה על מכשיר וירטואלי בתנאי רשת מוגדרים. הם מצוינים לאיתור בעיות ולבדיקה חוזרת אחרי תיקון, אבל הם לא משקפים את המשתמשים שלכם.

נתוני שדה - מה שמשתמשים אמיתיים חוו בפועל, ב-28 הימים האחרונים. אלה הנתונים שגוגל משתמשת בהם לדירוג, והם מופיעים בדוח "חוויית עמוד" ב-Search Console.

ההשלכה המעשית: אל תרדפו אחרי הציון במעבדה. אתר יכול להראות 100 ב-Lighthouse ולהיכשל בשדה, אם למשל רוב המשתמשים שלכם גולשים ברשת סלולרית איטית ממכשירים ישנים. התחילו תמיד מהשדה, השתמשו במעבדה כדי לאבחן.

סדר הפעולות המומלץ

זה הסדר שאנחנו עובדים בו, מסודר לפי יחס השפעה למאמץ. רוב האתרים משיגים את עיקר השיפור בשלושת הראשונים:

1. תמונות. המרה ל-WebP, התאמת מידות, width/height, ו-lazy loading לכל מה שלא בחלון הראשון.
2. גופנים. משפחה אחת, אחסון עצמי, preload ו-font-display: swap.
3. ניקוי JavaScript. הסרת ספריות שלא בשימוש ו-defer על השאר.
4. CSS. הסרת סגנונות מתים והטמעת הקריטי בלבד.
5. שרת ומטמון. אחסון סביר, דחיסה, וכותרות מטמון ארוכות לנכסים.
6. צד שלישי. ביקורת מה באמת נחוץ, ודחייה של השאר.

מה מיוחד באתרים בעברית

שלושה דברים שנוגעים ספציפית לאתרים עבריים:

• הגופן העברי הוא לרוב הנכס הכבד ביותר. קובץ מלא של משפחה עברית יכול להגיע ל-200KB. תת־קבוצה שמכילה רק את הטווח העברי יורדת לכ-12KB.
• טעינת שלוש משפחות היא הנורמה, וזו טעות. ראינו אינספור אתרים שטוענים שלוש משפחות בחמישה משקלים כל אחת - חמישה־עשר קבצים לפני שמוצג טקסט.
• ה-LCP הוא לרוב הכותרת ולא תמונה. באתרים עבריים רבים ה-hero הוא טיפוגרפי, ולכן הגופן הוא הנתיב הקריטי. preload על קובץ הגופן משפר את ה-LCP ישירות.

שורה תחתונה

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

אנחנו מודדים את המדדים האלה לפני כל עלייה לאוויר בכל אתר שאנחנו בונים, ומטפלים בהם כחלק מעבודת הקידום באתרים קיימים. אם אתם לא בטוחים איפה האתר שלכם עומד - שלחו לנו קישור ונסתכל.