Core Web Vitals מוסבר בפשטות¶
בטח ראיתם את המונח הזה בכל מדריך SEO או ביצועים, ואם אתם כמו רוב המתחילים, כנראה שדילגתם עליו כי הוא נשמע מסובך. חבל, כי זה בעצם רעיון פשוט מאוד שמוסתר מאחורי שם מפחיד. בואו נפרק את זה.
מה זה בכלל Core Web Vitals¶
זו קבוצה של שלושה מדדים שגוגל בחר, כדי לענות על שאלה אחת פשוטה - "האם החוויה של המשתמש באתר הזה טובה?". במקום להסתמך רק על תוכן וקישורים כמו בעבר, גוגל בפועל מודד את איך זה מרגיש לגלוש באתר שלכם, ומשתמש בזה כגורם ישיר בדירוג. שלושת המדדים בודקים שלושה דברים שונים - מהירות, יציבות, ותגובתיות.
המדד הראשון - LCP, כמה זמן עד שרואים תוכן¶
LCP (Largest Contentful Paint) מודד כמה זמן עובר מרגע הכניסה לדף עד שהאלמנט הכי גדול על המסך - בדרך כלל תמונה ראשית או כותרת גדולה - מוצג באופן מלא. גוגל רוצה לראות את זה תחת 2.5 שניות.
הסיבות הנפוצות ל-LCP איטי הן תמונות כבדות מדי, שרת שאיטי להגיב, או קוד ג'אווהסקריפט שחוסם את הטעינה. הפתרון הכי נפוץ - לדחוס תמונות, לטעון אותן בפורמטים מודרניים כמו WebP, ולוודא שהתמונה החשובה ביותר בדף נטענת מוקדם ולא מחכה לתור.
המדד השני - INP, כמה מהר האתר מגיב¶
INP (Interaction to Next Paint) מחליף מדד ישן יותר שנקרא FID, ומודד כמה זמן עובר מהרגע שהמשתמש לוחץ על כפתור או מקליד משהו, ועד שהמסך בפועל מגיב לפעולה הזאת. אם לוקח לאתר שלכם חצי שנייה להגיב ללחיצה על כפתור, המשתמש ירגיש שהאתר "תקוע" או "כבד", גם אם בפועל הוא רק עמוס בעבודה ברקע.
הגורם הנפוץ ביותר לזה הוא יותר מדי קוד ג'אווהסקריפט שרץ בבת אחת ותופס את ה-thread הראשי של הדפדפן, ולא נותן לו לטפל בפעולות של המשתמש. הפתרון הוא לפצל עבודה כבדה לחתיכות קטנות יותר, ולהימנע מלהריץ חישובים מסובכים בתגובה ישירה לאינטראקציה.
המדד השלישי - CLS, כמה האתר "קופץ"¶
CLS (Cumulative Layout Shift) מודד יציבות ויזואלית. זה המדד שתופס את הרגע המעצבן שבו אתם מנסים ללחוץ על כפתור, ופתאום תמונה נטענת מעליו והכל זז, ואתם לוחצים בטעות על משהו אחר לגמרי.
זה קורה בדרך כלל כשלתמונות או פרסומות אין ממדים מוגדרים מראש, אז הדפדפן לא יודע כמה מקום להשאיר להן עד שהן נטענות בפועל. הפתרון פשוט יחסית - תמיד להגדיר width ו-height לתמונות, כדי שהדפדפן ישריין את המקום מראש, גם לפני שהתמונה עצמה נטענה.
למה זה חשוב לכם כמפתחים, לא רק לשיווק¶
הרבה מתחילים חושבים ש"ביצועים" זה נושא של DevOps או תשתיות. בפועל, שלושת המדדים האלה נקבעים ברובם על ידי החלטות שאתם מקבלים ככותבי הפרונטאנד - איך אתם טוענים תמונות, כמה קוד ג'אווהסקריפט אתם שולחים לדפדפן, ואיך אתם מבנים את ה-HTML וה-CSS. זה לא נושא נפרד מהעבודה שלכם, זה חלק בלתי נפרד ממנה.
איך בודקים את זה בפועל¶
הכלי הכי פשוט הוא Lighthouse, שמובנה ישירות בכלי הפיתוח של כרום (F12, לשונית Lighthouse). מריצים בדיקה, ומקבלים ציון וגם רשימה מסודרת של בעיות ספציפיות עם הסברים איך לתקן. זה כלי שכל מפתח פרונטאנד צריך להריץ באופן קבוע, לא רק כשמישהו מתלונן שהאתר איטי.
בקורס צד לקוח יש פרק מלא על SEO וביצועים שמסביר לעומק איך לשפר כל אחד מהמדדים האלה בפרויקטים אמיתיים, לא רק תיאוריה.
לסיכום¶
Core Web Vitals הם לא איזה מונח שיווקי מפחיד, הם שלושה מדדים ברורים - כמה מהר תוכן מופיע (LCP), כמה מהר האתר מגיב (INP), וכמה יציב הוא ויזואלית (CLS). כל אחד מהם קשור ישירות להחלטות שאתם מקבלים בקוד, ושליטה בהם היא חלק ליבתי מלהיות מפתח פרונטאנד טוב, לא תוספת אופציונלית.
רוצים עזרה בניתוח ציוני Lighthouse של פרויקט שלכם? תשתפו בדיסקורד.