Core Web Vitals

מהם Core Web Vitals?

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

Google מסכמת בכמה מילים על מה Core Web Vitals מתמקדים:

• ›

  חוויית טעינה

• ›

  אינטראקטיביות

• ›

  יציבות ויזואלית של תוכן הדף

Largest Contentful Paint או LCP

ה-LCP או Largest Contentful Paint הוא מדד שאומר לנו את זמן הטעינה של פיסת התוכן ה"גדולה ביותר" שגלויה למשתמש כדי להיות זמינה ושימושית. במילים אחרות, Google אומרת שהאלמנטים הממוקמים במה שאנחנו מכירים כ-"Above the Fold" צריכים להיטען מהר ולהיות קריאים, וכך להיות זמינים למשתמש כדי שיוכל לקיים אינטראקציה איתם.

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

סיווג סטטוס LCP לפי זמנים. תמונה © web.dev

איזה זמן Google מחשיבה כאופטימלי?

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

איך אני יכול לדעת את ה-LCP של URL?

בדפדפן Chrome עצמו, דרך הרצת ביקורת Lighthouse, יש לנו אפשרות לדעת מה Google מחשיבה כתוכן הגדול ביותר לטעון. הנה איך:

אילו גורמים יכולים להשפיע על טעינת LCP?

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

• ›

  תגובת השרת

• ›

  שאילתות מסד נתונים

• ›

  תגובות API שלוקח להן זמן להיפתר

• ›

  CSS או JS שחוסמים רינדור

• ›

  איטיות בטעינת משאבים אחרים

• ›

  תמונות לא מאופטמות

• ›

  וכו'

First Input Delay או FID

ה-FID או First Input Delay הוא מדד שמציין כמה זמן הדף לוקח להגיב כשהמשתמש מקיים אינטראקציה עם אחד מהאלמנטים.

מדדים שנלקחו מ-Pagespeed

בכלי Pagespeed, ש-Google העמידה לרשות כולם לפני זמן מה, אנחנו יכולים לראות את ההתייחסות למדד הזה. ערכים שנחשבים טובים צריכים להיות מתחת ל-100 ms.

סיווג סטטוס First Input Delay (FID) לפי זמנים. תמונה © web.dev

הסיבות העיקריות לבעיות במדד הזה (FID) מגיעות מהרצת JavaScript, אז נצטרך לזהות איזה חלק בקוד גורם לדף לקחת זמן להגיב לאינטראקציה. אישית חוויתי את הבעיה הזו עם טעינות JS של פרסום.

Cumulative Layout Shift או CLS

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

Google מחשיבה (טוב, Google וכל משתמש) שזה מאוד מעצבן שכאשר התחלנו לקיים אינטראקציה עם דף (בין אם זה קריאה, גלילה וכו'), אלמנט שנטען מאוחר יותר מזיז את מיקום המשתמש ביחס לתוכן, ומאלץ אותו לתקן ע"י גלילה.

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

למה Core Web Vitals חשובים?

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

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

המדדים האלו הם אינדיקטורים ש-Google נותנת לנו כדי להצביע אילו חלקים באתר עלולים להוות בעיה למשתמש אבל... האם זה אומר שהם חשובים?

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

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

האם Core Web Vitals משפיעים על דירוגים?

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

אנחנו רק צריכים לזכור איך היא טיפלה ב-Mobile First Index ובהודעות המקדימות. במקרה הזה, ובהתייחסות שוב למאמר ממאי, היא מזהירה שתהיה הודעה מקדימה של לפחות 6 חודשים, אז... האם יהיה עדכון בסוף השנה הבאה?

כלים לאופטימיזציה של Core Web Vitals

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

Lighthouse

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

תמונה שנלקחה מתוצאות ביקורת Lighthouse

Page Speed Insights

Page Speed Insights היא אפשרות נוספת ש-Google מספקת לנו כדי לקבל את נתוני הביצועים של האתר שלנו. הכלי הזה אפילו מציג לנו גרפים של המדדים החשובים ביותר ואת הסטטוס שלהם. Page Speed Insights מבוסס על דוח חוויית משתמש שמטרתו להשיג נתונים בהשוואה לאתרים אחרים.

מדדים שמציע Page Speed Insights

Chrome UX

Chrome User Experience Report הוא סט נתונים ש-Google מספקת על התנהגות המשתמשים ברחבי העולם דרך Chrome. כדי לגשת לנתונים האלו צריך להשתמש ב-Big Query, וגם להיות בעל חשבון Google Cloud.

דרך Google Data Studio, הם הקלו על הגישה ויש להם הכל מוכן למחצה עבורנו בDashboard הזה

Chrome Dev Tools

אנחנו יכולים לנתח מדדי Core Web Vitals לא רק עם Lighthouse; אם נצלול לכלי המפתחים של Chrome, אנחנו יכולים להגיע לאותן מסקנות. לדוגמה, בלשונית "Performance", אם נבצע הקלטה או טעינה חדשה, נוכל לקבל מידע יקר ערך על איך ה-URL שלנו מתנהג.

צילום מסך שנלקח באפשרות Performance של Chrome Dev Tools

Web.Dev

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

בנוסף, ב-Chrome Store יש לנו תוסף שנותן לנו את המידע הזה בעת כניסה לכל URL:

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

צילום מסך של התוצאות שמספק תוסף Web Vitals

Search Console

Search Console הוא כלי הכרחי לכל בעל אתר. נוספה תכונה שעוזרת לנו לראות אילו URLs יש להם בעיות עם 3 המדדים האלו (LCP, FID ו-CLS). בתפריט בצד שמאל, יש לנו את האפשרות "Core Web Vitals". כשנבחר באפשרות הזו, יופיעו שני גרפים שמציגים את התוצאות של URLs לפי מכשיר. אם נבחר את המכשיר (desktop או mobile), נראה בפירוט אילו URLs יש להם בעיות.

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

מסקנות

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

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