או ב-GTmetrix "הפחת את מספר רכיבי ה-DOM":
מה זה DOM?
כאשר הדפדפן שלך מקבל מסמך HTML, יש להמיר אותו למבנה עץ, המשמש לעיבוד וציור עם CSS ו-JavaScript.
מבנה העץ הזה נקרא DOM או Document Object Model.
- קשרים כל רכיבי ה-HTML ב-DOM נקראים צמתים. (המכונה "עלים" על העץ).
- עוֹמֶק - כמה זמן הולך "ענף" בעץ נקרא עומק. לדוגמה, בתרשים למעלה, לתג img יש עומק של 3. (HTML -> גוף -> div -> img).
- אלמנטים של ילדים - כל הצמתים הצאצאים של צומת (ללא הסתעפות נוספת) הם ילדים.
Lighthouse ו-Google PageSpeed Insights מתחילים לסמן דפים אם מתקיים אחד מהתנאים הבאים:
- בסך הכל יש יותר מ-1500 צמתים.
- יש עומק של יותר מ-32 קשרים.
- לצומת האב יש יותר מ-60 צמתים צאצאים.
כיצד גודל DOM משפיע על הביצועים?
גודל DOM מוגזם יכול להשפיע על הביצועים בדרכים שונות.
- זמן ניתוח ורינדור גבוה יותר (FCP) . עץ DOM גדול וכללי סגנון מורכבים עושים עבודה מצוינת עבור הדפדפן. הדפדפן צריך לנתח את ה-HTML, לבנות את עץ העיבוד וכו'. בכל פעם שהמשתמש מקיים אינטראקציה או משהו ב-HTML משתנה, הדפדפן צריך לחשב זאת שוב.
- מגביר את השימוש בזיכרון - לקוד ה-JavaScript שלך עשויות להיות פונקציות לגישה לרכיבי DOM. עץ DOM גדול יותר מאלץ JavaScript להשתמש ביותר זיכרון כדי לעבד אותם. דוגמה לכך תהיה בורר שאילתות, ב
document.querySelectorAll('img')שמפרטת את כל התמונות הנפוצות בשימוש על ידי ספריות בטעינה עצלה. - מגביר TTFB – ככל שגודל ה-DOM גדל, גודל מסמך ה-HTML גדל (ב-KB). מכיוון שצריך להעביר יותר נתונים דרך הרשת, הדבר מגדיל את ה-TTFB.
כיצד להקטין את גודל ה-DOM מבחינה טכנית?
לדוגמה, קל מבחינה טכנית להקטין את גודל ה-DOM:
נוֹהָג:
<ul id="navigation-main">etc..</ul>במקום:
<div id="navigation-main"><ul>etc..</ul></div>בעיקרון, היפטר מכל רכיבי HTML אפשריים. אתה יכול גם להשתמש ב-Flexbox או ב-Grid כדי להקטין עוד יותר את גודל ה-DOM.
אבל מכיוון שאתה משתמש בוורדפרס, זה לא יעזור לך הרבה!
כיצד להקטין את גודל ה-DOM בוורדפרס?
פצל עמודים גדולים למספר עמודים
יש לך עמוד עם כל מה שבאתר? כמו שירותים, טפסי יצירת קשר, מוצרים, פוסטים בבלוג, המלצות וכו'?
נסה לפצל אותם למספר דפים ולקשר אליהם מהכותרת/נווט.
טעינה עצלנית ועימוד של כל מה שאפשר
העמסה עצלה של כל מיני אלמנטים. הנה כמה דוגמאות:
- סרטון YouTube בטעינה בעצלתיים - השתמש ב-WP YouTube Lyte או ב-Lazy Load של WP Rocket.
- הגבל את מספר הפוסטים/מוצרים בבלוג בכל עמוד - בדרך כלל אני משתדל לשמור מקסימום 10 פוסטים בבלוג בעמוד ולעמוד על השאר.
- בעצלתיים טעינת פוסטים/מוצרים בבלוג - הוסף לחצן 'טען עוד' או גלילה אינסופית כדי לטעון עוד פוסטים או מוצרים בבלוג.
- תגובות בטעינה עצלנית - אני משתמש בטעינה מותנית של Disqus מכיוון שאני משתמש ב-Disqus . אם אתה משתמש בהערות משלך, השתמש בתוספים כמו Lazy Load for Comments.
- עימוד של הערות - אם יש לך מאות הערות, זה יכול להשפיע גם על גודל ה-DOM. כדי לדמיין הערות, עבור אל הגדרות -> דיון -> עימוד הערות.
- הגבל את מספר הפוסטים הקשורים - נסה להגביל את מספר הפוסטים הקשורים ל-3 או 4.
הערה: טעינה עצלנית של תמונות לא תפחית את גודל ה-DOM
אל תסתיר אלמנטים לא רצויים עם CSS
לפעמים ייתכן שתצטרך להסיר אלמנטים שהוצגו על ידי נושא/מעצב. למשל, הוסף כפתור לעגלה בדפי המוצר, כפתור תעריף, מידע מחבר, תאריך פרסום וכו'.
פתרון מהיר הוא להסתיר אותם עם CSS:
.cart-button {display:none;}למרות שהפתרון הזה נראה פשוט, אתה חושף את המשתמשים לקוד לא רצוי (שכולל גם סימון HTML וגם סגנון CSS).
בדוק את הגדרות העיצוב/פלאגין שלך כדי לראות אם יש אפשרות להסיר אותו. אחרת, מצא את קוד ה-PHP הרלוונטי והסר/הגיב אותו.
השתמש בנושאים כתובים היטב ובבוני דפים
נושא טוב משחק תפקיד חשוב בגודל DOM. השתמש בנושאים כתובים היטב כמוGeneratePress אוֹאסטרה .
גם בוני דפים מציגים יותר מדי divs. השתמש בבנאים כמוחַמצָן, אשר אינם מציגים בלוקים div לא רצויים ויש להם יותר שליטה על מבנה ה-HTML.
סיכום
ייתכן שיהיו עוד תוספים או הגדרות ערכת נושא שמציגות יותר מדי divs. דוגמה לכך תהיה תוספים של "מגה תפריט" כגון UberMenu.
לפעמים הם קריטיים לחוויית המשתמש באתר שלך. אבל לפעמים הם אף פעם לא בשימוש על ידי משתמשים.
אולי הקישורים התחתונה שלך לעולם אינם נלחצים מכיוון שרוב המבקרים גוללים רק עד 75%.
השתמש בכלים כמו HotJar או Google Analytics Events כדי לגלות במה מבקרים משתמשים בפועל ובמה הם לא משתמשים.לנתח, למדוד ולחזור.
