ניראות (content-visiability): נכס ה-CSS החדש שמשפר את ביצועי הרינדור

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

Una Kravets
Jeremy Wagner
Vladimir Levin
Vladimir Levin

תאריך פרסום: 5 באוגוסט 2020

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

תמיכה בדפדפנים

  • Chrome:‏ 85.
  • Edge:‏ 85.
  • Firefox: 125.
  • Safari: 18.

מקור

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

אמצעי למניעת זליגת נתונים ב-CSS

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

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

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

  • size: אילוץ הגודל של רכיב מבטיח שאפשר להציב את התיבה של הרכיב בלי לבדוק את הצאצאים שלו. כלומר, אם כל מה שאנחנו צריכים הוא הגודל של הרכיב, אנחנו יכולים לדלג על הפריסה של הצאצאים.
  • layout: בלימת הפריסה המשמעות היא שצאצאים לא משפיעים על הפריסה החיצונית של תיבות אחרות בדף. כך אפשר לדלג על הפריסה של הצאצאים אם כל מה שרוצים לעשות הוא לפרס את התיבות האחרות.
  • style: אמצעי הבקרה על סגנונות מוודא שמאפיינים שיכולים להשפיע על יותר מאשר הצאצאים שלהם לא יוצאים מהרכיב (למשל, ספירות). כך אפשר לדלג על חישוב הסגנון של הצאצאים, אם כל מה שרוצים הוא לחשב סגנונות ברכיבים אחרים.
  • paint: Paint containment מבטיח שהצאצאים של התיבה המכילה לא יוצגו מחוץ לגבולות שלה. אף דבר לא יכול לחרוג מהרכיב באופן גלוי, ואם רכיב נמצא מחוץ למסך או לא גלוי מסיבה אחרת, גם הצאצאים שלו לא יהיו גלויים. כך אנחנו יכולים לדלג על ציור הצאצאים אם הרכיב לא מופיע במסך.

דילוג על עיבוד העבודה באמצעות content-visibility

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

המאפיין של הרשאות הגישה לתוכן מקבל כמה ערכים, אבל auto הוא הערך שמאפשר שיפור מיידי בביצועים. אלמנט עם content-visibility: auto מקבל את היכולות layout, style ו-paint. אם הרכיב לא מופיע במסך (ואינו רלוונטי למשתמש בדרך אחרת – רכיבים רלוונטיים הם אלה שיש להם מיקוד או בחירה בהיררכיית המשנה שלהם), הוא מקבל גם את המאפיין size containment (והוא מפסיק לצייר את התוכן שלו ולבצע בדיקות להיט).

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

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

הערה לגבי נגישות

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

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

דוגמה: בלוג נסיעות

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

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

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

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

צילום מסך של בלוג נסיעות.
דוגמה לבלוג טיולים. הדגמה ב-Codepen

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

בעזרת האפשרות content-visibility, המערכת תגדיר את העיצוב והפריסה של כל התוכן שגלוי כרגע למשתמש (הוא מופיע במסך). עם זאת, במהלך עיבוד הסיפור שלא מוצג במלואו במסך, הדפדפן ידלג על פעולת העיבוד ויתאים רק את תיבת הרכיבים עצמה.

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

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

צילום מסך עם הערות של חלוקת תוכן לקטעים באמצעות סיווג CSS.
דוגמה לקיבוץ תוכן בקטעים שבהם הוחלה המחלקה story, כדי לקבל content-visibility: auto. הדגמה ב-Codepen

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

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

ציון הגודל הטבעי של רכיב באמצעות contain-intrinsic-size

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

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

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

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

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

הסתרת תוכן באמצעות content-visibility: hidden

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

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

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

אפשר להשוות את השיטה הזו לדרכים נפוצות אחרות להסתרת תוכן של רכיבים:

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

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

תרחישים לדוגמה שבהם כדאי להשתמש ב-content-visibility: hidden הם הטמעת גלילות וירטואליות מתקדמות ומדידת פריסה. הן מתאימות גם ליישומי דף יחיד (SPA). אפשר להשאיר תצוגות לא פעילות של אפליקציות ב-DOM עם החלת content-visibility: hidden כדי למנוע את הצגתן, אבל לשמור את המצב שלהן במטמון. כך אפשר לרנדר את התצוגה במהירות כשהיא הופכת שוב לפעילה.

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

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

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

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

סיכום

content-visibility וכן מפרט ההכללה של CSS, משמעותם שיפורים מעניינים בביצועים בקובץ ה-CSS. למידע נוסף על המאפיינים האלה, אפשר לעיין במאמרים הבאים: