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

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

Katie Hempenius
Katie Hempenius
X

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

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

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

ביצועים

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

  • 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);

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

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

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

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

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

בדרך כלל קרוסלות מכילות חלק מהתמונות הגדולות ביותר באתר, ולכן כדאי להשקיע זמן כדי לוודא שהתמונות האלה מותאמות בצורה מיטבית. יש כמה שיטות שיכולות לצמצם את גודל ההעברה של תמונות: בחירת הפורמט והרמה הנכונים של דחיסת התמונות, שימוש ב-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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בוחנים את ההשערות

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

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

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