ה-DOM (מודל אובייקט מסמך) הוא השם הכללי למבנה העץ של תגי HTML. ההשפעה שלו על מהירות העמוד היא כזו שככל שמבנה ה-HTML שלך מורכב יותר במהלך עיבוד הדף, כך הדף שלך יהיה איטי יותר.
לפי Lighthouse, המורכבות של מבנה DOM נמדד באמצעות שלושה מדדים. כדי לספק את המדדים האלה עם נקודות ההתייחסות שלהם:
- המספר הכולל של התגים צריך להיות פחות מ 1500
- עומק התג המרבי צריך להיות פחות מ 32
- המספר המרבי של תגי צאצא צריך להיות פחות מ 60
בדוגמה שלמעלה, המספר הכולל של תגיות נמוך, עומק התגים המרבי טוב, אך המספר המרבי של תגיות צאצא נמוך.
אופטימיזציה של רכיבי DOM היא לחלוטין באחריותו של בעל העניין החזיתי. לכל תג שנבחר באופן אקראי או שרירותי כאשר קוד הדף נוצר לראשונה יש עלות לאחר השלמת הפרויקט. לכן, אנו מזמינים את כל מפתחי החזית לרגע של שקט ולפקוח עיניים.
נקודות שבהן DOM מנופח משפיע לרעה על ביצועי הדף כוללות:
- דפים עם מספר רב של צמתים (תגים) יחוו עומס ברשת וקשיי טעינה בשל גודלם הגדול, ובכך להגדיל את TTFB (Time to First Byte).
- עיבוד צמתים טעונים ליצירה עמדותיהם וסגנונותיהם לוקחים זמן, ובכך להגדיל את FCP (First Contentful Paint).
- ככל שמספר הצמתים גדל, העומס הדרוש עם מניפולציות של JavaScript מכבידות על הזיכרון, הגדלת TFT (זמן לאינטראקטיבי).
כדי להמחיש אופטימיזציה של DOM עם דוגמה פשוטה מאוד, שקול את הדברים הבאים כאשר גם המספר וגם העומק של ה-DOM מצטמצמים:
<div id="nav-element">
<ul>
</ul>
</div>במקום לעשות זאת:
<ul id="nav-element">
</ul>
יש צורך לעשות זאת: שתי השיטות המומלצות ביותר להקטנת גודל ה-DOM הן טעינה עצלנית ועימוד. מכיוון שמבני כרטיסים בדפי רישום מכילים הרבה DOM, מוצעת גלילה או עימוד אינסופית. כאשר מחליטים על מספר הפריטים בעימוד, יש בהחלט לקחת בחשבון את קריטריוני מדידת ה-DOM. הזמן שבדרך כלל מתייחסים אליו מספר המוצרים בעימוד הוא 15-20 שניות, אך למעשה יש לחשב חלק זה בצד של בעל העניין הקדמי, בהתחשב בגודל ה-DOM.
אחד הפתרונות הפשוטים הוא לא להוסיף אלמנטים שאינם גלויים בדף ל-HTML מבלי להסתיר אותם עם CSS. אם צריך להציג אלמנט, יש לקרוא לו מאוחר יותר ולהציג אותו למשתמש. עליך להיות מודע לכך שהסתרת אלמנטים באמצעות CSS מגדילה את ה-DOM.
מקורות:
