תוכן עניינים

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

מהם Core Web Vitals?

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

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

כיום Google משתמשת בשלושה מדדי Core Web Vitals:‏ Largest Contentful Paint ‏(LCP),‏ Interaction to Next Paint ‏(INP) ו-Cumulative Layout Shift ‏(CLS). כל מדד בוחן חלק אחר של חוויית המשתמש, ולכן שיפור באחד מהם אינו מבטיח בהכרח ששני האחרים ישתפרו גם הם.

מדוע Core Web Vitals חשובים?

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

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

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

Core Web Vitals רלוונטיים גם לקידום אתרים במנועי חיפוש (SEO).‏ Google משתמשת באותות של חוויית עמוד במערכות הדירוג שלה, אך ציונים טובים ב-Core Web Vitals אינם מבטיחים דירוג גבוה יותר. תוכן רלוונטי וגורמים רבים נוספים נותרים חשובים. לכן, שיפור מדדים אלה צריך להיחשב חלק מאסטרטגיה רחבה יותר לבניית אתר שימושי, נגיש ואמין.

מהם שלושת מדדי Core Web Vitals?

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

  • מהו Largest Contentful Paint ‏(LCP)?

Largest Contentful Paint ‏(LCP) מודד כמה זמן לוקח לתמונה או לבלוק הטקסט הגדולים ביותר הנראים באזור התצוגה הראשוני להופיע. מדד זה עוזר להעריך מתי התוכן העיקרי של העמוד הופך לגלוי למשתמש.

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

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

כדי לשפר את LCP, בעלי אתרים יכולים לנקוט את הצעדים הבאים:

    • אופטימיזציה של תמונות: הקטינו את גודל קובצי התמונות והשתמשו בפורמטים מודרניים כגון WebP או AVIF כאשר הדבר מתאים.
    • שיפור זמני התגובה של השרת: השתמשו במשאבי אחסון יעילים, במטמון (caching) וברשת להפצת תוכן (CDN) כאשר הם מתאימים לאתר.
    • מתן עדיפות לתוכן העיקרי: ודאו שהדפדפן יכול לגלות תמונות חשובות ישירות מקוד ה-HTML, ותנו עדיפות לטעינתן כשיש בכך צורך.
    • צמצום משאבים החוסמים את הרינדור: בצעו אופטימיזציה לקובצי CSS ו-JavaScript המונעים מהדפדפן להציג את התוכן העיקרי.
    • הימנעות מטעינה עצלה (lazy loading) של תמונת ה-LCP: אם תמונה צפויה להיות רכיב ה-LCP, דחיית הטעינה שלה עלולה לגרום לעמוד להיראות איטי יותר.

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

  • מהו Interaction to Next Paint ‏(INP)?

Interaction to Next Paint ‏(INP) מודד עד כמה האתר מגיב כאשר משתמשים מבצעים בו פעולות. הוא בוחן את העיכוב בין אינטראקציה של המשתמש, כמו לחיצה על כפתור או הקשה על מקש, לבין העדכון החזותי הבא שהדפדפן מציג.

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

INP עוזר לזהות בעיות מסוג זה באמצעות מדידת התגובתיות של העמוד לאורך כל ביקור המשתמש. בניגוד ל-First Input Delay ‏(FID), שמדד רק את העיכוב עד שהדפדפן החל לעבד את האינטראקציה הראשונה, INP מתייחס לחוויית האינטראקציה הרחבה יותר לאורך כל חיי העמוד. ציון INP טוב הוא 200 אלפיות שנייה או פחות. ערכים הגבוהים מ-200 אלפיות שנייה ועד 500 אלפיות שנייה זקוקים לשיפור, וערכים מעל 500 אלפיות שנייה נחשבים גרועים.

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

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

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

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

  • מהו Cumulative Layout Shift ‏(CLS)?

Cumulative Layout Shift ‏(CLS) מודד את היציבות החזותית של עמוד אינטרנט. הוא מתמקד בשינויים בלתי צפויים במיקום של רכיבים גלויים בזמן שהעמוד מוצג.

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

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

הטכניקות הבאות יכולות לעזור לשפר את CLS:

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

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

What Are the Three Core Web Vitals Metrics

מהם ערכי הסף המומלצים של Core Web Vitals?

Google מספקת ערכי סף מוגדרים כדי לעזור לבעלי אתרים לקבוע אם העמודים שלהם מציעים חוויית משתמש טובה. ערכי סף אלה מחלקים את הביצועים לשלוש קטגוריות: טוב, זקוק לשיפור וגרוע.

Core Web Vital What It Measures Good Threshold Needs Improvement Poor
Largest Contentful Paint (LCP) Loading performance ≤ 2.5 seconds 2.5–4 seconds > 4 seconds
Interaction to Next Paint (INP) Interactivity ≤ 200 milliseconds 200–500 milliseconds > 500 milliseconds
Cumulative Layout Shift (CLS) Visual stability ≤ 0.1 0.1–0.25 > 0.25

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

Google ממליצה להעריך את Core Web Vitals לפי האחוזון ה-75 של ביקורי העמוד, כאשר תוצאות המובייל והדסקטופ נבחנות בנפרד. משמעות הדבר היא שלפחות 75% מהביקורים הנמדדים צריכים לעמוד בסף ה״טוב״ בכל אחד מהמדדים.

לדוגמה, נניח שלאתר יש ערך LCP של 2 שניות באחוזון ה-75. משמעות הדבר היא של-75% מביקורי העמוד הנמדדים יש LCP של 2 שניות או פחות, וזה עומד בסף המומלץ.

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

מהם הכלים למדידת Core Web Vitals?

ניתן למדוד את Core Web Vitals באמצעות מספר כלים ש-Google מספקת. כלים אלה עוזרים למפתחים להבין את ביצועי האתר ולזהות תחומים הזקוקים לשיפור.

  • PageSpeed Insights

PageSpeed Insights הוא אחד הכלים השימושיים ביותר לבדיקת Core Web Vitals. הוא מספק גם נתונים ממשתמשים אמיתיים, כאשר הם זמינים, וגם נתוני מעבדה שנאספו באמצעות בדיקה מדומה. בנוסף, הוא מציע המלצות לשיפור ביצועי העמוד.

  • Google Search Console

Google Search Console כולל דוח Core Web Vitals המציג אילו קבוצות עמודים מספקות חוויית משתמש טובה ואילו זקוקות לשיפור. הוא מבוסס על נתונים מהעולם האמיתי כדי לעזור לבעלי אתרים לזהות בעיות ביצועים במספר עמודים.

  • Chrome DevTools ו-Lighthouse

Chrome DevTools ו-Lighthouse עוזרים למפתחים לבדוק את ביצועי העמוד בסביבה מבוקרת. הם יכולים לזהות בעיות הקשורות להרצת JavaScript, לטעינת תמונות, לתזוזות פריסה ולגורמים נוספים המשפיעים על Core Web Vitals.

מה ההבדל בין נתוני שטח לנתוני מעבדה?

ניתן להעריך את Core Web Vitals באמצעות שני סוגי נתונים: נתוני שטח (field data) ונתוני מעבדה (lab data). הבנת ההבדל ביניהם עוזרת למפתחים לפרש את תוצאות הבדיקות ולבחור את הגישה הנכונה לשיפור ביצועי האתר.

  • נתוני שטח

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

נתונים אלה שימושיים במיוחד כדי להבין אם האתר עומד בערכי הסף המומלצים של Google עבור Core Web Vitals במצבים מהעולם האמיתי.

  • נתוני מעבדה

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

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

כיצד לשפר את Core Web Vitals

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

  • שיפור Largest Contentful Paint ‏(LCP)

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

  • שיפור Interaction to Next Paint ‏(INP)

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

  • שיפור Cumulative Layout Shift ‏(CLS)

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

לסיכום

Core Web Vitals עוזרים למפתחים להבין כיצד משתמשים חווים אתר מבחינת ביצועי טעינה, אינטראקטיביות ויציבות חזותית. באמצעות מדידת LCP,‏ INP ו-CLS, בעלי אתרים יכולים לזהות בעיות ביצועים ולתעדף שיפורים שיהפכו את העמודים שלהם לנוחים יותר לשימוש.

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

שאלות נפוצות

1. מה ההבדל בין נתוני שטח לנתוני מעבדה?

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

2. כיצד אפשר לשפר את ציוני Core Web Vitals שלי?

ניתן לשפר את Core Web Vitals באמצעות אופטימיזציה של תמונות, צמצום JavaScript מיותר, שיפור זמני התגובה של השרת, הפעלת מטמון ומניעת תזוזות פריסה בלתי צפויות.