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

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

Katie Hempenius

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

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

ביצועים

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

• LCP (המהירות שבה נטען רכיב התוכן הכי גדול)

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

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

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

• CLS (עדכון פריסה מצטבר)

  מספר מפתיע של קרוסלות משתמשות באנימציות מגוונות ולא מורכבות שיכולות לתרום ל-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);

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

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

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

• מעברי שקפים: תנודות בפריסה שמתרחשות במהלך מעברים בין שקפים נגרמו בדרך כלל על ידי עדכון המאפיינים שגורמים לפריסה של רכיבי 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)
• סגנון של אתרים מהדור הבא: ScrollSnap (web.dev)
• קרוסלה ל-CSS בלבד (טריקים ב-CSS)
• איך ליצור קרוסלה ל-CSS בלבד (טריקים ל-CSS)

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

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

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

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

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

אלה הנקודות העיקריות להבנת האופן שבו חישוב LCP עובד בקרוסלות:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שיטות מומלצות לקריאות

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

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

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

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

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

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

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

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

שיטות מומלצות בנוגע למוצרים

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

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

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

בוחנים את ההנחות

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

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

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