שיטות מומלצות לשימוש בקרוסלות

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

Katie Hempenius

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

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

ביצועים

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

• LCP (הצגת חלק התוכן הגדול ביותר)

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

• INP (מהירות התגובה לאינטראקציה באתר)

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

• CLS (Cumulative Layout Shift)

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

שיטות מומלצות לשיפור הביצועים

טעינת תוכן קרוסלה באמצעות HTML

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

מה מותר לעשות

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

מה אסור לעשות

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

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

הימנעות משינויים בפריסה

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

מעברים בין שקפים ואמצעי בקרה לניווט הם שני המקורות הנפוצים ביותר לשינויי פריסה בקרוסלה:

• מעבר בין שקפים: שינויים בפריסה שמתרחשים במהלך מעבר בין שקפים נגרמים בדרך כלל כתוצאה מעדכון המאפיינים שמשפיעים על הפריסה של רכיבי DOM. דוגמאות למאפיינים האלה: left,‏ top,‏ width ו-marginTop. כדי למנוע שינויי פריסה, אפשר להשתמש במקום זאת במאפיין ה-CSS transform כדי להעביר את הרכיבים האלה. בהדגמה הזו מוסבר איך משתמשים ב-transform כדי ליצור קרוסלה בסיסית.

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

ריכזנו כאן כמה נקודות בלבול נפוצות לגבי מדידת CLS בקרוסלה:

• קרוסלות בהפעלה אוטומטית: מעברים בין שקפים הם המקור הנפוץ ביותר לשינויים בפריסה שקשורים לקרוסלה. בקרוסלה שלא פועלת בהפעלה אוטומטית, שינויי הפריסה האלה מתרחשים בדרך כלל תוך 500 אלפיות השנייה ממגע המשתמש, ולכן הם לא נספרים במסגרת מדד CLS (שינוי פריסה מצטבר). עם זאת, בקרוסלות של הפעלה אוטומטית, שינויי הפריסה האלה לא רק עשויים להיספר כחלק מ-CLS, אלא הם גם יכולים לחזור על עצמם ללא הגבלת זמן. לכן חשוב במיוחד לוודא שקרוסלה עם הפעלה אוטומטית לא גורמת לשינויים בפריסת האתר.

• גלילה: בקרוסלות מסוימים, המשתמשים יכולים לגלול כדי לנווט בין התמונות בקרוסלה. אם מיקום ההתחלה של רכיב משתנה אבל ההזזה שלו בגלילה (כלומר, scrollLeft או scrollTop) משתנה באותה כמות (אבל בכיוון ההפוך), זה לא נחשב לשינוי בפריסה, בתנאי שהם מתרחשים באותו פריים.

מידע נוסף על שינויים בפריסה זמין במאמר ניפוי באגים של שינויים בפריסה.

שימוש בטכנולוגיה מודרנית

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

עם זאת, בהתאם לסוג הקרוסלה שאתם יוצרים, יכול להיות שלא תצטרכו בכלל JavaScript. באמצעות ממשק ה-API החדש Scroll Snap אפשר להטמיע מעברים שדומים לקרוסלה באמצעות HTML ו-CSS בלבד.

ריכזנו כאן כמה מקורות מידע שיכולים לעזור לכם להשתמש ב-scroll-snap:

• יצירת רכיב של סטוריז (web.dev)
• עיצוב אינטרנט מדור הבא: 'הצמדה לגלילה' (web.dev)
• קרוסלה ב-CSS בלבד (CSS Tricks)
• איך יוצרים קרוסלה מ-CSS בלבד (CSS Tricks)

אופטימיזציה של תוכן הקרוסלה

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

מדידת ביצועים

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

מדידת LCP לקרוסלות

אלה הנקודות המרכזיות שיעזרו לכם להבין איך מתבצע החישוב של LCP בקרוסלה:

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

שינויים בחישוב LCP של קרוסלות ב-Chrome 88

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

השינוי הזה בוצע בתגובה לתצפית שבאתרים רבים, כדי להטמיע מעברים בקרוסלה, מסירים את התמונה שמוצגת קודם מעץ ה-DOM. לפני Chrome 88, בכל פעם שמוצג שקף חדש, הסרת הרכיב הקודם גורמת לעדכון של LCP. השינוי הזה משפיע רק על קרוסלות שפועלים בהפעלה אוטומטית. מעצם הגדרתו, ה-paint הגדול ביותר שיכול להכיל תוכן יכול להתרחש רק לפני שהמשתמש מבצע את האינטראקציה הראשונה עם הדף.

שינויים בערכי הסף ב-Chrome 121

בגרסה 121 של Chrome השתנו ההתנהגות של תמונות עם גלילה אופקית, כמו קרוסלות. עכשיו נעשה בהם שימוש באותם ערכי סף כמו בגלילה אנכית. כלומר, בתרחיש לדוגמה של קרוסלה, התמונות ייטענו לפני שהן יהיו גלויות בחלון התצוגה. המשמעות היא שהסיכוי שהמשתמשים יבחינו בחיוב על טעינה של תמונות נמוך יותר, אבל העלויות של הורדות יהיו גבוהות יותר. אתם יכולים להשתמש בהדגמה של טעינת פריטים ב-Lazy Loading אופקית כדי להשוות בין ההתנהגות ב-Chrome לבין ההתנהגות ב-Safari וב-Firefox.

שיקולים נוספים

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

שיטות מומלצות לניווט

הצגת פקדי ניווט בולטים

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

סימון התקדמות הניווט

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

תמיכה בתנועות בנייד

בנייד, צריכה להיות תמיכה בתנועות החלקה בנוסף לאמצעי בקרה רגילים לניווט (כמו לחצנים במסך).

לספק נתיבים חלופיים לניווט

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

שיטות מומלצות לשיפור הקריאוּת

לא להשתמש בהפעלה אוטומטית

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

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

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

הפרדה בין טקסט לתמונות

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

השם צריך להיות תמציתי

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

שיטות מומלצות לשימוש במוצרים

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

עם זאת, לא תמיד משתמשים בקרוסלות בצורה יעילה.

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

בדיקת ההנחות

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

להיות רלוונטי

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