מאיטיות מקרטעת ל-60FPS: המדריך ל-content-visibility ב-2026

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

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

לפני: ה-DOM קורס תחת עומס התוכן

במצב הסטנדרטי, הדפדפן מקבל עץ DOM ענקי ומבצע עבודה מיותרת. הוא מחשב סגנונות (Style Calculations), בונה את עץ הרינדור (Render Tree) ומבצע Layout & Paint לכל אלמנט בדף — גם אם הוא נמצא 4,000 פיקסלים מתחת לגבול המסך התחתון.

כך זה נראה בפועל בביצועים:

• זמן עיבוד ראשוני: עשרות מילי-שניות מבוזבזות על רכיבים סמויים.
• גלילה מקוטעת: נפילות פרימים מורגשות (מזנק מ-60FPS ל-22FPS בזמן גלילה מהירה).
• זכרון חנוק: מכשירים ניידים מנוהלים כבד ונאבקים לשמור על תגובתיות.

הגדרה · content-visibility

מאפיין CSS שמורה לדפדפן האם לבצע חישובי פריסה וציור (Layout & Paint) על תוכן האלמנט, בהתאם למיקומו ביחס לאזור הצפייה (Viewport).

אחרי: גלילה חלקה ב-60FPS בלי לשנות את ה-HTML

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

השינוי מיידי.

איך לבצע את המעבר: 3 צעדים ליישום נכון

המעבר אינו דורש اعקוף של JavaScript או פירוק של הקוד. מדובר בשינוי ממוקד בקובץ ה-CSS.

1. הגדרת המאפיין על רכיבי הרשימה

בחרו את הרכיבים החוזרים על עצמם בעמוד — פוסטים, כרטיסיות מוצר, תשובות AI או תגובות — והוסיפו את השורה הבאה:

.card-item {
  content-visibility: auto;
}

2. מניעת קפיצות פריסה (CLS) בעזרת contain-intrinsic-size

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

הפתרון הוא הגדרת גודל משוער:

.card-item {
  content-visibility: auto;
  contain-intrinsic-size: 1px 350px; /* רוחב וגובה מוערכים */
}

3. בדיקת תקינות ב-DevTools

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

💡

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

סיכום

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