דחיית העיבוד של תוכן כבד

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

כדי לשפר את העיבוד, אפשר להשתמש במאפיין ה-CSS‏ content-visibility ובמאפיין ה-HTML‏ hidden="until-found". שני הכלים עוזרים לשפר את הביצועים, אבל הם מיועדים לתרחישי שימוש שונים.

מתי כדאי להשתמש בכל אחת מהאפשרויות

איך מטמיעים את content-visibility: auto

בחירת תוכן שלא מופיע במסך

חובה: אתם חייבים לזהות בקפידה אילו רכיבים מקבלים את content-visibility: auto.

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

שלבי ההטמעה

1. חובה: זהו קטעים כבדים שמאושרים ככאלה שלא מופיעים במסך בטעינה הראשונית.
2. חובה: צריך להחיל את content-visibility: auto על כל אחד מהרכיבים האלה שלא מוצגים במסך.
3. חובה: צריך לספק גודל משוער של מבנה הפריסה באמצעות contain-intrinsic-size בכל רכיב.

איך משתמשים בכרטיס contain-intrinsic-size

חובה: צריך להתאים בין content-visibility: auto לבין contain-intrinsic-size. אם לא תעשו את זה, הדפדפן יכווץ את הרכיב לגובה של 0 פיקסלים כשהוא לא מוצג במסך, וזה יגרום לשינויים משמעותיים בפריסה ולסרגל הגלילה לקפוץ כשהמשתמש גולל.

המאפיין המקוצר contain-intrinsic-size ב-CSS משמש כמימד של פלייסהולדר. שימוש במילת המפתח auto מאפשר לדפדפן "לזכור" את הגודל המדויק אחרי שהרכיב עובר רינדור, ולהשתמש בגודל המחושב הזה במקום בפלייסהולדר אם הרכיב יוצא שוב מהמסך.

קוד לדוגמה

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

איך מטמיעים את content-visibility: hidden

1. זיהוי קטעים כבדים: מאתרים בלוקים של פריסה שמוסתרים בהתחלה (למשל, שורות נוספות בטבלת נתונים גדולה).
2. החלת CSS: מוסיפים את content-visibility: hidden לרכיב.
3. חשיפת הרכיב: כשרוצים לחשוף את הרכיב, משנים את המאפיין content-visibility ל-visible או ל-auto.

קוד לדוגמה

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

המאפיין content-visibility: hidden מחריג את הרכיב ואת הצאצאים שלו מעץ הנגישות ומחיפוש בדף, לכן אל תשתמשו בו אם התוכן צריך להישאר גלוי בזמן שהוא מוסתר. אם אתם צריכים שתוכן מוסתר יישאר ניתן לחיפוש באמצעות "חיפוש בדף" המקורי, השתמשו ב-hidden="until-found" כפי שמתואר בקטע חיפוש תוכן מוסתר.

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

• צריך להשתמש ב-contain-intrinsic-size עם content-visibility: auto. אם לא תעשו את זה, המערכת תצטרך לחשב מחדש את הגובה בזמן הגלילה, וזה עלול לגרום לקפיצות בפריסה של אזור התצוגה או לתקלות חזותיות.
• אל תפעילו את content-visibility: auto על רכיבים שנמצאים באזור התצוגה הראשוני, כי זה מעכב את רינדור הדף הקריטי.
• אימות נגישות חובה: כשמחילים את content-visibility: auto, חובה לאמת את הנגישות של המקלדת ברצף. בהגדרות מסוימות של טכנולוגיה מסייעת, יכול להיות שצמתים מחוץ למסך שמשתמשים ב-content-visibility: auto לא ייכללו בעץ הנגישות או בנתיבי הניווט הרציפים, עד שהמיקוד יועבר לתוכם באופן ידני. בודקים את הניווט הלינארי מעבר לגבולות המסך באמצעות המקלדת בלבד.

אסטרטגיות חלופיות

‫content-visibility כברירת מחדל

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

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}