מדדנו אתר שלנו לקראת מעבר שאנחנו מתכננים, וגילינו בו באג שהיה חי מי יודע כמה זמן. מה שהופך אותו לשווה כתיבה זה לא הבאג עצמו, אלא שאי אפשר היה לראות אותו מבפנים.
רגע של רקע לפני שנצלול: מלבד בניית אתרים בפריים סטאק, יש לנו שירות שני בשם site4rent, שבו אנחנו משכירים אתרים לעסקים בתשלום חודשי במקום למכור אותם. הוא יושב באתר נפרד, site4rent.co.il, ועליו הסיפור הזה.
המדידה
ב-29 ביולי 2026 בדקנו את האתר בכלי של גוגל. הציון בדסקטופ יצא 67. לא נורא, לא טוב, ובעיקר לא מעניין.
מה שכן היה מעניין הוא מדד אחר לגמרי:
CLS: 0.354
CLS מודד כמה התוכן זז בזמן הטעינה. גוגל מגדירה 0.1 כסף העליון. אנחנו היינו פי שלושה וחצי מעליו.
בעברית: הדף קופץ מתחת לאצבע. זו התחושה המוכרת של ללחוץ על כפתור ולגלות שלחצת על משהו אחר, כי משהו נטען ודחף את הכל למטה חצי שנייה לפני שהאצבע הגיעה.
החיפוש
בכותרת העליונה של האתר רץ אפקט שמחליף משפטים, כזה שמקרבל את האותיות ומרכיב מהן משפט חדש. אפקט נחמד, כתוב בסדר, רץ שם חודשים.
מדדנו אותו ישירות בדפדפן, לאורך שש שניות:
| מה נמדד | תוצאה |
|---|---|
| אורך הטקסט המוצג | 26 עד 194 תווים |
| גבהים שהאלמנט קיבל | 27, 54, 81, 108, 135, 162 פיקסלים |
| תזוזת גובה | 135 פיקסלים |
המשפטים באתר באורך 24 תווים. אז מאיפה הגיעו 194?
מה שבאמת קרה
הקוד שנכתב החזיק את המשפטים בעברית פשוטה:
const phrases = [
'בלי לבנות אתר לבד ולהתקע',
'מוכן תוך 7 ימי עסקים',
];אבל מה שהשרת הגיש לגולשים היה משהו אחר לגמרי:
const phrases = [
'בלי לבנות...',
];מערכת הניהול המירה כל אות עברית לייצוג מקודד. אותם 24 תווים הפכו ל-144.
והאפקט, שלא ידע שום דבר על זה, התחיל לקרבל את המחרוזת המקודדת תו אחר תו. במקום להחליף 24 תווים הוא החליף 144, הטקסט נשבר לשש שורות, ואז חזר לאחת. בכל החלפת משפט, שוב ושוב, כל התוכן שמתחת נדחף 135 פיקסלים ובחזרה.
אפשר היה לראות את זה גם בעין, אם ידעת לחפש. באמצע האנימציה הופיעו על המסך רצפים כמו ] ו-#1%06]. הם נראו כמו חלק מהאפקט, אבל רשימת התווים שהאפקט מגריל מתוכה אינה מכילה ולו ספרה אחת. אלה היו שברי הקוד עצמו, מציצים מבעד לאנימציה.
ולמה אף אחד לא ראה
כי בעורך הכל נראה תקין.
העורך מציג את מה שהוקלד, בעברית, 24 תווים. ההמרה לייצוג המקודד קורית רק בדרך החוצה, לאתר החי. אז כל בדיקה שנעשתה מבפנים הראתה אפקט שעובד בדיוק כמתוכנן.
הבאג היה קיים אך ורק אצל הגולשים.
זו גם התשובה לשאלה “מתי זה נשבר”. אף אחד לא נגע בקוד. מישהו פתח ושמר את הרכיב, מערכת הניהול קידדה את העברית בדרך, והאפקט מעולם לא נבנה כדי להתמודד עם זה.
התיקון והתוצאה
התיקון היה קטן: לפענח את הטקסט לפני הקרבול, ולבנות את האלמנטים בקוד במקום כמחרוזת טקסט, כדי שלמערכת הניהול לא יהיה מה לשנות בדרך.
התוצאה, בחציון של חמש בדיקות לפני ואחרי:
| לפני | אחרי | |
|---|---|---|
| ביצועים, דסקטופ | 67 | 93 |
| ביצועים, נייד | 54 | 59 |
| CLS, נייד | 0.354 | 0.001 |
| זמן חסימה, דסקטופ | 373ms | 93ms |
| תזוזת גובה בפועל | 135px | 0px |
בלי לגעת באחסון. בלי לוותר על תוסף אחד. בלי לבנות שום דבר מחדש.
שלוש מסקנות שאפשר לקחת
אתר יכול להיראות לכם תקין ולהיות שבור אצל מי שגולש בו. ההבדל היחיד הוא שמישהו טרח למדוד מבחוץ, ולא רק להסתכל מבפנים.
מדידה בודדת לא שווה כלום. באותו עמוד ובאותה דקה קיבלנו ציונים שנעו בין 63 ל-85 בדסקטופ. כל המספרים כאן הם חציון של חמש בדיקות, וזו גם הסיבה שאנחנו אף פעם לא מבטיחים ציון מסוים מראש.
והמדד שצעק לא היה הציון. הציון היה 67, מספר בינוני ומשעמם שאיש לא היה מתרגש ממנו. הבעיה האמיתית ישבה במדד אחר לגמרי, וכדי לראות אותה היה צריך להסתכל מעבר למספר הגדול שכולם מסתכלים עליו.
מה שנשאר פתוח
הנייד עלה רק מ-54 ל-59. הקפיצות נעלמו, אבל שם הבעיה היא לא באג נקודתי אלא כמות הקוד שנטענת בכל עמוד. זו כבר לא בעיה שמתקנים בשורה, וזו הסיבה שאותו אתר עומד לעבור לארכיטקטורה אחרת לגמרי. על זה נכתוב בפעם הבאה, עם המספרים משני הצדדים.
רוצים לדעת מה יושב באתר שלכם ואתם לא רואים? זה בדיוק מה שאנחנו עושים בדוח הבריאות הדיגיטלי: מדידה אמיתית, ממצאים מסודרים, ורשימה של מה כדאי לתקן קודם.
להזמנת דוח בריאות דיגיטלי לאתר שלכם