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

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

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 כדי להעביר את הרכיבים האלה. הזה הדגמה מראה איך להשתמש ב-transform כדי ליצור קרוסלה בסיסית.

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

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

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

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

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

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

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

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

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

• יצירת רכיב של סטוריז (web.dev)
• הדור הבא של עיצוב אתרים: ScrollSnap (web.dev)
• קרוסלה בשירות CSS בלבד (טריקים בשירות CSS)
• איך ליצור קרוסלה בשירות CSS בלבד (טריקים בשירות CSS)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ההנחיות צריכות להיות תמציתיות

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

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

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

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

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

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

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

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

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