איך למנוע תזוזות תוכן (CLS) בזמן הזרמת תשובות AI בלייב

ממשקי AI שמשלבים הזרמת טוקנים בלייב הפכו לסטנדרט ב-2026. המשתמש מזין שאילתה, ותוך עשירית השנייה הטקסט מתחיל להיכתב מול עיניו. הבעיה מתחילה כשהרכיב הזורם ממוקם בתוך דף תוכן קיים, לצד תפריטים, באנרים או תגובות. בכל פעם שמגיע מופע טקסט חדש, האלמנט התחתון נדחף למטה. המשתמש מנסה להקליק על כפתור — והכפתור בורח לו. גוגל רואה את זה, מודד את ה-Cumulative Layout Shift, ומעניש את האתר בדירוגים.

למה הזרמת טוקנים שוברת את ה-Layout

כאשר WebSocket או Server-Sent Events (SSE) מעבירים טוקנים מהשרת, DOM Updater טיפוסי מוסיף אותם מיד ל-HTML. הדפדפן נאלץ לחשב מחדש את המיקומים של כל הרכיבים בדף (Layout Reflow) עשרות פעמים בשנייה.

הגדרה · CLS בזמן Streaming

מדד ה-Cumulative Layout Shift מודד את סך הזזות השטח الבלתי צפויות במהלך חיי הדף. הזרמת תוכן רציפה ללא הגבלת גובה גורמת לשינוי נתיב הצגה (Reflow) מתמיד שמעלה את ה-CLS לרמות פסולות.

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

הקצאת שטח מראש ושלד טעינה (Min-Height)

הטעות הנפוצה ביותר היא השארת מכל ה-AI (Container) בגובה של 0 פיקסלים עד שהתשובה מתחילה להגיע. הפתרון הבסיסי והאפקטיבי ביותר הוא הגדרת גובה מינימלי מוגדר מראש או שימוש ב-Skeleton layout דינמי.

כאשר אתם יודעים שתשובה ממוצעת תתפוס לפחות 200 פיקסלים, הגדירו את המכל עם min-height: 200px. אם התשובה קצרה יותר, ההפרש לא ייצר קפיצה חדה מדי. אם היא ארוכה יותר, השינוי יתרחש רק כשהטקסט עובר את סף 200 הפיקסלים, ולא מפסגת הרכיב.

• הקצו נפח אנכי מוערך עוד לפני קבלת הטוקן הראשון.
• השתמשו ב-Scroll Anchor (overflow-anchor: none) במקומות שבהם תרצו למנוע מהדפדפן לקפוץ אוטומטית לתחתית הדף.
• מנעו שינויי פונט פתאומיים על ידי טעינה מוקדמת של ה-Web Fonts מראש.

ניהול DOM: Batching בעזרת requestAnimationFrame

עדכון ה-DOM על כל טוקן בודד שמגיע מ-SSE הוא אסון ביצועים. אם ה-LLM מחזיר 40 טוקנים בשנייה, הדפדפן ינסה לרנדר את הדף 40 פעם. המסכים פועלים בדרך כלל בקצב של 60Hz או 120Hz, ולכן חלק מהרינדורים הללו מיותרים לחלוטין.

במקום לעדכן את ה-DOM מיד עם קבלת האירוע, יש לצבור את הטוקנים בבאפר (Buffer) ולעדכן את הרכיב פעם אחת בלבד בכל פריים של הדפדפן.

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

טיפול ברכיבים מורכבים: קוד, טבלאות ותמונות

טקסט רגיל נזל בצורה יחסית צפויה. אבל מה קורה כשה-AI מזרים בלוק של קוד (Codeblock) או טבלה? הרכיבים הללו משנים את רוחבם וגובהם ברגע שהם מקבלים עיצוב (Syntax Highlighting) או כשהטבלה משלימה את העמודה האחרונה.

רכיבים אלו יוצרים קפיצה ענקית ב-CLS באמצע הזרמת התוכן.

.ai-response-stream {
  contain-intrinsic-size: auto 300px;
  content-visibility: auto;
}

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

💡

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

לסיכום

בניית ממשק AI דינמי ב-2026 דורשת זהירות רבה בכל הנוגע לביצועי פרונטאנד. הזרמת טקסט חלקה שאינה מקפיצה את הדף תבטיח שהמשתמשים שלכם יישארו ממוקדים, ושמנועי החיפוש ימשיכו לתמרץ את האתר שלכם בציוני Core Web Vitals גבוהים. שילוב בין הקצאת מקום מראש, איגוד עדכוני DOM ומניעת עיבוד מורכב באמצע הזרמה הוא הנוסחה המנצחת.