CLS, או בשמו המלא Cumulative Layout Shift, הוא המדד של גוגל לכמה העמוד קופץ בזמן הטעינה. כל פעם שטקסט, תמונה או כפתור זזים ממקומם בלי שהגולש עשה משהו, הציון עולה. ציון טוב הוא 0.1 ומטה. כאן אני מסביר איך הוא מחושב, ומראה שלושה מקרים שתיקנתי באתר הזה עצמו.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
מה CLS מודד
אתם קוראים מאמר בטלפון, ובדיוק כשאתם לוחצים על קישור, נטענת מעליו תמונה והכל יורד למטה. לחצתם על משהו אחר. זו קפיצת פריסה, וציון CLS הוא הדרך של גוגל לספור כמה כאלה יש בעמוד וכמה הן גדולות. הוא אחד משלושת המדדים שגוגל קוראת להם Core Web Vitals.
הציון הוא מספר בלי יחידות, לא שניות. הוא מחושב משני נתונים: איזה חלק מהמסך זז, וכמה רחוק הוא זז. קפיצה קטנה של כפתור בתחתית המסך כמעט לא נספרת, ותמונה שדוחפת חצי מסך של טקסט נספרת הרבה.
איזה ציון נחשב טוב
| ציון | מה הוא אומר |
|---|---|
| עד 0.1 | טוב. הגולש כמעט לא מרגיש תזוזה |
| 0.1 עד 0.25 | צריך שיפור. יש קפיצות שמורגשות |
| מעל 0.25 | גרוע. העמוד קופץ באופן שמפריע לקריאה וללחיצה |
לפי גוגל, את הציון בודקים על 75 אחוז מהכניסות לעמוד, בנפרד לטלפון ולמחשב. קפיצות שקורות בהפרש של פחות משנייה זו מזו נספרות יחד כקבוצה אחת, וגוגל לוקחת את הקבוצה הגרועה ביותר.
שלושה מקרים שתיקנתי באתר הזה
הכי קל להבין CLS דרך דוגמאות אמיתיות. באתר הזה מצאתי שלוש סיבות שונות לקפיצות, כל אחת מסוג אחר. מדדתי כל אחת לפני ואחרי התיקון, בדפדפן עם האטה של טלפון בינוני.
פונט שמתחלף בזמן הטעינה
העמוד נטען קודם עם פונט גיבוי, ואחרי רגע הפונט של האתר הגיע והחליף אותו. הפונט החדש היה צר יותר, הכותרת הגדולה התקצרה בשתי שורות, והתמונה שמתחתיה קפצה למעלה. הציון היה 0.19. הפתרון היה לטעון את קובץ הפונט מוקדם, עוד לפני שהעמוד מתחיל להיבנות, והציון ירד ל-0.
תמונה ראשית בלי רוחב קבוע
במאמרים, התמונה הראשית ישבה בתוך מסגרת שהרוחב שלה נקבע לפי התמונה עצמה. עד שהתמונה נטענה, הרוחב היה כמעט אפס, ואז היא נפתחה ודחפה את כל הטקסט למטה. קביעת רוחב מלא למסגרת מראש הורידה את הציון מ-0.077 ל-0.01.
סליידרים שנבנים אחרי הטעינה
בעמוד הפרויקטים יש סליידרים של לפני ואחרי. הם נבנים בקוד רק אחרי שהתמונות שלהם נטענות, ועד אז הם תופסים אפס מקום. כשהם נבנו, כל העמוד זז, והציון הגיע ל-0.93. שמירת הגובה של כל סליידר מראש, לפי מידות התמונה שלו, הורידה אותו ל-0.002.
הסיבות הנפוצות לקפיצות
ברוב האתרים שאני בודק, הקפיצות מגיעות מאותן כמה סיבות. כולן נובעות מאותו עיקרון: משהו מופיע או משנה גודל, והדפדפן לא ידע מראש כמה מקום לשמור לו.
תמונות וסרטונים בלי רוחב וגובה מוגדרים, באנרים ופרסומות שנטענים מאוחר, חלונות הסכמה לעוגיות שדוחפים את העמוד במקום לצוף מעליו, פונטים שמתחלפים, ורכיבים שנבנים בקוד אחרי הטעינה, כמו סליידרים, ווידג'טים של ביקורות וטפסים.
איך מוצאים מה גורם לקפיצה
ב PageSpeed Insights יש רשימה של האלמנטים שזזו הכי הרבה. זו התחלה טובה, אבל היא לא תמיד מראה את הסיבה. במקרה של הפונט, למשל, הכלי הצביע על התמונה שזזה, ולא על הפונט שגרם לה לזוז.
מה שעבד לי הכי טוב הוא לטעון את העמוד בדפדפן עם האטה של טלפון ולתעד כל קפיצה: מתי היא קרתה, איזה אלמנט זז ומה נטען בדיוק באותו רגע. ההתאמה בין הזמנים מגלה את הסיבה האמיתית. כך גם התגלו שני המקרים האחרים.
שאלות ותשובות על קפיצות בעמוד
האם ציון הקפיצות נמדד בשניות?
לא. זו טעות נפוצה, וגם הייתה כתובה פעם בעמוד הזה. הציון הוא מספר בלי יחידות, שמחושב מהחלק של המסך שזז ומהמרחק שהוא זז. ציון 0.1 אומר שהקפיצות קטנות, לא שהן נמשכו עשירית שנייה.
למה ציון הקפיצות שונה בין המחשב לטלפון?
כי העמוד נבנה אחרת בכל גודל מסך. כותרת שנכנסת בשורה אחת במחשב נשברת לשלוש בטלפון, ותמונה שיושבת בצד עוברת לרוחב מלא. לכן קפיצה שלא קיימת במחשב יכולה להיות גדולה בטלפון, וחשוב לבדוק את שניהם בנפרד.
האם קפיצות אחרי לחיצה של הגולש נספרות?
לא. שינוי שקורה בחצי השנייה שאחרי לחיצה או הקלדה נחשב צפוי, כי הגולש ביקש אותו. תפריט שנפתח או שאלה שמתרחבת אחרי לחיצה לא פוגעים בציון. רק תזוזות שקורות מעצמן נספרות.
האם קפיצות בעמוד משפיעות על המיקום בגוגל?
הוא חלק מהמדדים שגוגל משתמשת בהם כדי להעריך את חוויית הגולש בעמוד. הוא לא יקפיץ עמוד חלש למעלה, אבל עמוד שקופץ מפריע לגולשים ללחוץ ולקרוא, וזה פוגע בהמרות עוד לפני שזה פוגע בדירוג.
הצעד הבא
קפיצות הן לרוב הבעיה הכי קלה לתיקון מבין המדדים של גוגל, כי ברגע שמוצאים את הסיבה התיקון קטן: מידות לתמונה, שמירת מקום לרכיב או טעינה מוקדמת של פונט. הקושי הוא למצוא אותה. זה חלק מכל שיפור מהירות אתר שאני עושה.
העמוד שלכם קופץ ואתם לא מוצאים למה? שלחו לי את הכתובת. אמדוד את הקפיצות בטלפון, אמצא מה גורם לכל אחת מהן, ואגיד לכם בדיוק מה לשנות.
