דף זה תורגם על ידי Cloud Translation API.

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

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

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

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

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

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

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

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

קרוסלות בהפעלה אוטומטית: מעברים בין שקפים הם המקור הנפוץ ביותר לשינויים בפריסה שקשורים לקרוסלה. בקרוסלה שלא פועלת בהפעלה אוטומטית, שינויי הפריסה האלה מתרחשים בדרך כלל תוך 500 אלפיות השנייה ממועד האינטראקציה של המשתמש, ולכן הם לא נספרים במסגרת מדד CLS (Cumulative Layout Shift). עם זאת, בקרוסלות של הפעלה אוטומטית, שינויי הפריסה האלה לא רק עשויים להיספר כחלק מ-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. השינוי הזה משפיע רק על קרוסלות שפועלים בהפעלה אוטומטית – מעצם הגדרתם, ציורים פוטנציאליים גדולים ביותר של תוכן יכולים להתרחש רק לפני שהמשתמש מבצע אינטראקציה ראשונה עם הדף.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

תענה בתמציתיות.

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

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

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

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

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

בדיקת ההנחות

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

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

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