ביצועי האתר: סדר ה-DOM של האתר שלכם

סדר ה-DOM של האתר הוא למעשה סדר הקריאה של האלמנטים בכל עמוד. הסדר הזה חשוב לגולשים שמשתמשים בטכנולוגיות מסייעות כמו מקש ה-Tab או קוראי מסך, כי הוא קובע את סדר הצפייה, הקריאה או האינטראקציה עם האלמנטים השונים בעמוד.

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

סדר ה-DOM קובע את סדר הטעינה של האלמנטים באתר. אם סדר ה-DOM לא יתאים לסדר הוויזואלי של האלמנטים, הוא עלול להשפיע על הטעינה של האתר.

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

בנוסף, אם מישהו ינסה להקליק על הכפתור הזה לפני ששאר האלמנטים עלו, הוא עלול להקליק בטעות על אלמנט אחר – ולעבור לקטע או לעמוד אחר.

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

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

כשאתם בונים אתר ב-Editor במחשב, נוצרת לו גרסת מובייל. גם באתר המובייל סדר ה-DOM מותאם אוטומטית, ואין צורך בשום שינוי ידני.

אם בניתם את האתר שלכם ב-Editor X, סידור ה-DOM האוטומטי לא פועל ברוב האתר. כדי לשפר את ביצועי האתר, תצטרכו לארגן את סדר הרכיבים ידנית באתר Editor X דרך החלונית Layers (שכבות).

לדוגמה, כדי לסדר את החלקים של עמוד כלשהו מלמעלה למטה, עליכם להקליק בחלונית על Bring to Front (העברה לחזית). ערימות אלמנטים (Stacks) ורכיבי תוכן חוזרים (Repeaters) יאורגנו אוטומטית, אבל אנחנו ממליצים להשתמש בפיצ'ר Reorganize DOM Order (ארגון מחדש של סדר ה-DOM) כדי להבטיח שהסידור תקין.