ביצועי האתר: סדר ה-DOM של האתר שלכם
2 דקות
סדר ה-DOM של האתר הוא למעשה סדר הקריאה של האלמנטים בכל עמוד. הסדר הזה חשוב לגולשים שמשתמשים בטכנולוגיות מסייעות כמו מקש ה-Tab או קוראי מסך, כי הוא קובע את סדר הצפייה, הקריאה או האינטראקציה עם האלמנטים השונים בעמוד.
כדי שכל הגולשים יוכלו לגלוש באתר בקלות, אנחנו ממליצים לוודא שסדר ה-DOM מתאים לסדר הוויזואלי של האלמנטים בעמודי האתר. התאמת סדר הטעינה של האלמנטים לא רק תורמת לנגישות האתר, אלא גם מונעת בעיות בפריסת האלמנטים.
הנושאים בעמוד הזה:
סדר ה-DOM וביצועי האתר
סדר ה-DOM קובע את סדר הטעינה של האלמנטים באתר. אם סדר ה-DOM לא יתאים לסדר הוויזואלי של האלמנטים, הוא עלול להשפיע על הטעינה של האתר.
למשל, אם יש לנו כפתור שממוקם בתחתית של אחד העמודים אבל נמצא ראשון בסדר ה-DOM, הוא יעלה לפני האלמנטים שמופיעים מעליו בעמוד. במהלך הטעינה של שאר האלמנטים בעמוד, פריסת העמוד עלולה להשתבש.
בנוסף, אם מישהו ינסה להקליק על הכפתור הזה לפני ששאר האלמנטים עלו, הוא עלול להקליק בטעות על אלמנט אחר – ולעבור לקטע או לעמוד אחר.
סדר ה-DOM של האתר חייב להתאים לסדר הוויזואלי של העמוד, ולא משנה מה כיוון הקריאה של השפה (ימין לשמאל או שמאל לימין). ההתאמה הזו תבטיח שהאלמנטים יעלו בסדר הנכון, והגולשים ייהנו מחוויה חלקה יותר.
סדר ה-DOM באתרי Wix Editor
באתרי Editor במחשב מופעל סידור DOM אוטומטי. זה אומר שבכל פעם שאתם משנים משהו בסידור הוויזואלי של האלמנטים בעמוד, סדר ה-DOM מתעדכן אוטומטית בלי שום פעולה מצידכם.
כשאתם בונים אתר ב-Editor במחשב, נוצרת לו גרסת מובייל. גם באתר המובייל סדר ה-DOM מותאם אוטומטית, ואין צורך בשום שינוי ידני.
חשוב:
סדר ה-DOM האוטומטי באתרי Editor במחשב נוצר עבור שפות הנכתבות משמאל לימין (כמו אנגלית או ספרדית). אם יש לכם אתר בשפה שנכתבת מימין לשמאל, כמו עברית או ערבית, אתם צריכים לארגן באופן ידני את סדר ה-DOM דרך החלונית Layers (שכבות).
שימו לב:
סידור ה-DOM האוטומטי מתעדכן רק בעקבות שינויים שאתם עושים דרך המחשב, אחרי שאתם שומרים את האתר.
סדר ה-DOM באתרי Editor X
אם בניתם את האתר שלכם ב-Editor X, סידור ה-DOM האוטומטי לא פועל ברוב האתר. כדי לשפר את ביצועי האתר, תצטרכו לארגן את סדר הרכיבים ידנית באתר Editor X דרך החלונית Layers (שכבות).
לדוגמה, כדי לסדר את החלקים של עמוד כלשהו מלמעלה למטה, עליכם להקליק בחלונית על Bring to Front (העברה לחזית). ערימות אלמנטים (Stacks) ורכיבי תוכן חוזרים (Repeaters) יאורגנו אוטומטית, אבל אנחנו ממליצים להשתמש בפיצ'ר Reorganize DOM Order (ארגון מחדש של סדר ה-DOM) כדי להבטיח שהסידור תקין.