Core Web Vitals: איך לשפר CLS

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

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

תכלס, CLS זה לא רעיון רע. זה אפילו הגיוני — גוגל לא רוצה שמשתמשים ייכנסו לאתר והכול שם יזוז כמו חבילה של מלברו בתיק של חיילת. השאלה היא: איך גורמים לזה לקרות בפועל? וכמה מזה באמת בשליטתנו כשאנחנו מקדמים אתר של לקוח שקנה תבנית ב־$29 מהודו, ושם עליה לוגו מוגזם יותר מהאגו של מפתח וורדפרס מתחיל.

מה זה CLS ואיך זה קשור לקידום אתרים?

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

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

אז מה באמת קורה כשמנסים לשפר CLS?

כמו כל דבר בגוגל, יש את ה”מה אמור לקרות לפי הדוקומנטציה”, ויש את “מה קורה כשאתה מנסה להסביר ללקוח למה צריך למדוד גודל של תמונה מראש”.

1. הגדירו גובה ורוחב לתמונות, סרטונים ואייפריימים

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

2. אל תשבצו פרסומות כמו קאובוי שיכור

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

3. פונטים – שקט, הטעינה מתחילה

אם האתר שלכם משתמש בגופנים חיצוניים (כמעט כולם עושים את זה) והוא קופץ לשנייה לגופן אחר ואז חוזר – זה בדיוק Shift. השתמשו ב-display: swap בזהירות, תטענו את הפונטים הכי מוקדם שאפשר, ואל תבנו אתר שכולו תלוי בגופן אחד שאין באף מערכת.

אני זוכר שלקוח פעם התעקש על גופן שנקרא “חמסה רגולרי”, שהיה רק באיזו ספרייה obscure מדרום איטליה. טעינה איטית, כולו זז כמו ג’לי. לקוח מבסוט? לא. CLS? בשמיים. בסוף הוחלף ל־”Assistant” של גוגל ונגמר הבלאגן.

טיפ בונוס קטן שהוא בעצם האבא של כולם

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

אז מה עכשיו?

שימו רגע בצד את הלחץ של המדדים. תעברו דף דף באתר שלכם – כמו מבקר מסעדות מקצועי. תראו אם הדבר הזה זז, או אם זה נטען חלק. ממש בעין. אחר כך תיכנסו ל־Chrome DevTools, לבדוק CLS ולקבל מספר.

זכרו: CLS זה לא מבחן IQ, זה כמו פוקר. תזוזה אחת מיותרת – והמשתמש מאבד עניין. ואם הוא הולך? גם גוגל הולך.

קחו את זה איתכם לדרך

אל תנסו להיות מושלמים. תכוונו ל־CLS נמוך מ־0.1 – אבל אם אתם תקועים על 0.13 ואף אחד לא מתלונן באתר, אולי לא נורא. יש עוד חיים חוץ מהסקרינשוט של PageSpeed.

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

שורה תחתונה – ותעשו עם זה מה שבא לכם

בואו נשים את הדברים על השולחן – CLS זה סה”כ עוד סימן לכך ש-SEO ו-UX מתערבבים יותר מתמיד. פעם קידום אתרים היה לדעת איך לעקוף את האלגוריתם של גוגל עם מילים במיונז. היום? זה לדעת לבנות אתר שלא מקבל התקף אפילפסיה כל פעם שנכנס אליו משתמש חדש. אז נכון, יש תיעוד, יש כלים, ויש ממדדים – אבל בסוף זה נדיר שהלקוח יגיד “וואו, איך שיפרת את ה-Cumulative Layout Shift!”. הוא פשוט יגיד: “האתר עובד חלק. תודה”. וזה, תכל’ס, יותר חשוב מכל ציון ירוק בגוגל.

SEO יכול להיות מסע ארוך, מלחיץ ומבלבל – אבל אם תיגשו אליו בגובה העיניים ותתמקדו קודם במה שהכי מפריע למשתמשים (ולא למה עושה לכם פחות נקודות בלייטהאוס), אתם תראו תוצאות. לא כי רימיתם את המערכת, אלא כי בניתם משהו ששווה להישאר בו. והאמת? זה בעצם כל הסיפור.

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