תאריך פרסום: 30 באוקטובר 2024
השקת המדד 'מהירות התגובה לאינטראקציה באתר (INP)' כמדד ליבה לבדיקת חוויית המשתמש באתר בתחילת שנת 2024 עוררה עניין רב יותר בביצועי הרינדור. חלק ממדד INP מתמקד בזמן הנדרש לדפדפן כדי לצייר את המסגרת הבאה אחרי שמשתמש יוצר אינטראקציה עם הדף. שמירה על ערך INP נמוך באתר תעזור למשתמשים להרגיש שהאתר מגיב לאינטראקציות שלהם במהירות ובקלות ככל האפשר.
הדבר החשוב גם הוא שפעולת העיבוד צריכה להתרחש בזמן טעינת דף, מפני שהיא עשויה לעכב את ההתחלה של האינטראקציות. כדאי למצוא דרכים להפחית את כמות העבודה שמתבצעת במהלך החלק הזה, שהוא קריטי במחזור החיים של הדף. מאפיין ה-CSS content-visibility הוא אחת מהדרכים לעשות זאת, ואנחנו שמחים להודיע שהוא זמין עכשיו ברמת הבסיס החל מספטמבר 2024.
content-visibility הוא מאפיין CSS שמנחה את סוכן המשתמש לדחות את העיבוד של רכיבים עד שהם יתקרבו לאזור התצוגה. בדפים עם הרבה רכיבי DOM, הדבר יכול להיות מועיל, כי המשמעות היא שהטעינה הראשונית של הדף תגרום לפחות עבודה של רינדור. במקום זאת, העבודה מתבצעת ממש לפני שהמשתמש צריך לראות אותה.
content-visibility: auto על אזורי תוכן שמחולקים למקטעים מובילה לשיפור של פי 7 בביצועי העיבוד (רינדור) בעומס הראשוני. מידע נוסף מופיע בהמשך.
כדי להפעיל את האופטימיזציה הזו לרכיבים שלא מופיעים במסך, צריך להחיל עליהם את הכלל content-visibility: auto ב-CSS של האתר:
.render-me-later {
content-visibility: auto;
}
content-visibility פועל לפי חלק מההתנהגויות שמוגדרות למאפיין contain באחסון CSS. המטרה של אמצעי הבקרה של CSS היא לספק בידוד לחלקים של עץ ה-DOM. כך פעולות העיבוד יכולות להיות בהיקף של חלק ספציפי בעץ ה-DOM, כך שהפריסה כבר לא חוקית וחוזרת על עצמה רק עבור קבוצת משנה של עץ ה-DOM. כדי להשתמש באפשרות הזו לשיפור ביצועי הרינדור, צריך להכיר היטב את הערכים השונים של המאפיין contain ואת האופן שבו משתמשים בהם ביעילות.
כשמפעילים את content-visibility: auto על רכיבים, הם מקבלים באופן אוטומטי חלק מהמאפיינים שסופקו על ידי המאפיין contain. כתוצאה מכך, הרכיבים המושפעים ייראו בהתחלה בגובה 0px, כלומר הם לא ייראו.
עם זאת, יש לכך כמה תופעות לוואי. לדוגמה, סרגל הגלילה של הדף עשוי להשתנות ולשנות את הגובה בזמן שהמשתמש גולל לרכיבים שלא עובדו קודם לכן, והם מוצגים בדיוק בזמן שהמשתמש רואה אותם. כדי לצמצם את הבעיה הזו, אפשר להחיל את המאפיין contain-intrinsic-size.
מאחר ש-content-visibility זמין לאחרונה בגרסת Baseline חדשה, יכול להיות שיהיו לך חששות לגבי משתמשים עם דפדפנים שעדיין לא עודכנו כדי להשתמש בנכס החדש. מכיוון ש-content-visibility הוא מאפיין CSS, אין סיבה לדאוג יותר מדי. דפדפנים שמבינים את הקוד ישתמשו בו, ודפדפנים שלא מבינים אותו לא ישתמשו בו. פירוש הדבר הוא שבנוסף להטבות הביצועים שתקבלו מדפדפנים שתומכים ב-content-visibility, הדפים יפעלו באופן דומה לחלוטין.
content-visibility מספק יתרון נוסף – אם יש מקרים שבהם אפשר להשתמש בו כדי לצמצם את עבודת העיבוד במהלך טעינת הדף, כדאי לשקול להשתמש בו כדי להבטיח שלדפים תהיה כמה שיותר עוצמת עיבוד כשהם זקוקים לכך. עכשיו, כשהתכונה המועילה הזו זמינה ב-Baseline, מומלץ להשתמש בה כדי שהמשתמשים יוכלו ליהנות מהעבודה שהיא חוסכת בזמן העיבוד, עד שהיא תהיה נחוצה.