איך מקטינים DOM על מנת לשפר את מהירות האתר

איך מקטינים DOM על מנת לשפר את מהירות האתר

תוכן עניינים

איך מקטינים DOM על מנת לשפר את מהירות האתר

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

  1. סהכ רכיבי DOM
  2. עומק DOM מירבי
  3. מקסימום רכיבי צאצא

מה זה DOM ?

DOM  נוצר כאשר דף באתר נטען ויוצר פריסת עץ של אלמנטים HTML . ניתן לדמות זאת לעץ רחב עם ענפים היוצאים מהגזע, ועלים היוצאים מהענפים.

באמצעות אלמנטור אנחנו בונים כל דף ודף באתר החל מאזורים, ומהם מסתעפים אזורים, ובכל איזור אלמנט אחד או כמה אלמנטים כגון: תמונה, אייקון, טקסט ועוד אלמנטים רבים המצויים באלמנטור. סהכ רכיבי ה DOM יהיו סך הרכיבים בהם השתמשנו על מנת לבנות את הדף, כגון: אזורים, עמודות ואלמנטים כגון תמונה, טקסט וכו. עומק ה DOM מירבי הוא המרחק בין כל צומת לאלמנט השורש. לדוגמא: המרחק בין אלמנט תמונה לאיזור המשוייך אליה. מקסימום רכיבי צאצא הם סך האלמנטים שנמצאים מתחת לכל צומת אב. לדוגמא: כל האייקונים, התמונות והטקסטים המשוייכים לעמודה מסויימת. ברגע שהבדיקה מזהה DOM  הגדול מ 818 היא נצבעת באדום ב PageSpeed Insights או מורידה את הניקוד ב GTMATRIX ומסומן בצבע כתום או אדום לפי עומק הבעיה. עומק DOM מירבי ומקסימום רכיבי צאצא מושפעים מסך רכיבי ה DOM  .

מה ההשפעה של גודל ה DOM  על מהירות טעינת הדפים?

  1. ככל שיש יותר אזורים, עמודות ואלמנטים בדף, וכפועל יוצא מכך גם צמתים רבים כפי שהסברנו בפרק הקודם, יש יותר בקשות לטעינת קוד, דבר שמאט את מהירות טעינת הדף.
  2. העברת כמות נתונים גדולה, היא מגבירה את כמות הנתונים המועברים דרך הרשת וכתוצאה מכך גדל זמן ה TTFB זמן טעינה של הבייט הראשון, עליו נרחיב במאמר אחר.
  3. ככל שמבנה ה DOM  מסובך יותר, נדרש זמן רב יותר לחישוב המיקום של האלמנטים והאינטראקציה בינם לבין שורשם, מה שדורש זמן עיבוד יקר וגדול יותר.
  4. ככל שרכיבי ה DOM רבים יותר, השימוש בזכרון גדל באופן משמעותי ועלול להשפיע לרעה על יכולות הזכרון במכשירי הגולשים

אז אחרי שלמדנו מה זה DOM הבה ניגש לפעולות הנדרשות

איך מקטינים ומשפרים את רכיבי ה DOM  ?

באלמנטור ערים לבעיית ה DOM  וכבר אפשר לראות בגרסאות החדשות, אפשרות לביצוע פעולות לשיפור הdom  . בלוח הבקרה יש לגשת ל: אלמנטור > הגדרות > ניסויים ולהפעיל את שתי הפעולות הבאות:

  1. פלט DOM שעבר אופטימיזציה
  2. טעינת נכסים משופרת

הפעולות הבאות יעשו על ידי בונה האתר או האדם המשפר את מהירותו באם יש לו ידע מספיק בבניית אתרים

  1. לצמצם את כמות האזורים, העמודות והאלמנטים במידת האפשר
  2. לצמצם את כמות התוכן בעמוד, כמובן מבלי לפגוע בעיצוב ובתוכן חשוב לתצוגה
  3. להקטין את כמות הפוסטים בעמוד למקסימום 10 פוסטים ולהוסיף מעברי עמוד ממוספרים או כפתור המשך קריאה, כנל לגבי מוצרים בחנות אינטרנטית
  4. הקטנת כמות התגובות בעמוד על ידי הוספת מעברי עמוד ממוספרים או כפתור המשך קריאה, כנל לגבי מוצרים בחנות אינטרנטית
  5. הגבלת פוסטים או מוצרים קשורים ל 4 בלבד
  6. לוודא בנייה דף פשוטה ולא מורכבת
  7. לאפשר טעינה עצלה לסרטוני וידאו, סליידים, תגובות וקבצי לוטי ( אנימציה )

אודות הכותב אלון בכר

אלון בכר בן 50 בוגר תואר ראשון B.A בניהול ומשאבי אנוש בהצטיינות מאונ' בר אילן ומוסמך לתואר שני M.A בדיפלומטיה ולימודי בטחון וסייבר מאונ' תל אביב, סטודנט ל Full Stack בתוכנית המשותפת עם התעשיה האווירית למערכות הגנת תקיפות סייבר, עוסק מזה כ-13 שנה בקידום אתרים ממומן ואורגני ובניית כל סוגי האתרים, מדריך בעלי עסקים ובוני אתרים על מערכות וורדפרס ואלמנטור, מפיק סרטוני תדמית באנימציה, בוגר קורס לשיפור מהירות אתרים של שי תודר וחבר בצוות העולמי של אלמנטור לשיפור מהירות אתרים, משפר מהירות אתרים לבעלי עסקים ולחברות לבניית אתרים בארץ ובחו"ל. מצורף קישור לדף מומחה

אהבתם את התוכן? נשמח אם תשתפו עם חברים

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פוסטים אחרונים

תוספים

חסימת הודעות ספאם ( דואר זבל )

הפעם לשם שינוי, תוסף פרי פיתוח ישראלי בשם MASPIK 🙂 תוסף מעולה לחסימת דואר זבל ספאם עם הוראות בעברית, נוח מאד לשימוש ופשוט להפעלה ולהגדרה

קרא עוד »
בניית אתרים

יצירת שידור חי עם Video Conferencing with Zoom

בלוח בקרה בוחרים הוסף חדש לאחר מכן נותנים שם לשידור החי לאחר מכן מגדירים את נתוני השידור לאחר מכן לוחצים פרסום לאחר מכן ניגשים לעמוד

קרא עוד »

רוצה לשפר את
מהירות האתר?

עוברים מאדום לירוק