قسمت 17 - تعریف DOM

به تعداد المان‌های درون صفحه زمانی که Render میشود Document Object Model یا به طور اختصار DOM گفته میشود. اما از نظر جی تی متریکس باید سه قانون زیر را در مورد DOM در نظر گرفت.

• تعداد کل المنت‌ها
• ماکسیمم عمق DOM
• ماکسیمم Chid برای یک Parent

آموزش ابزار جی تی متریکس (GTmetrix)

اگر سایت خود را با GTmetrix آنالیز می‌کنید، ممکن است با خطاهای مختلفی روبرو شوید! یکی از مسائلی که روی امتیاز کلی شما تاثیرگذار است، المان‌های مورد استفاده از در صفحات سایت است که گاهی اوقات باعث کاهش سرعت سایت می‌شود. GTmetrix به خوبی المان‌های مختلف سایت شما را آنالیز می‌کند و اگر المان‌های شما زیاد باشد، به عنوان یک مشکل و با استفاده از امتیاز پایین به شما نمایش می‌دهد. خطایی که در این مقاله می‌خواهیم بررسی کنیم، خطای DOM است که بستگی به المان‌های سایت شما دارد! در این مقاله به خوبی این مفهوم را بررسی می‌کنیم و روش‌های رفع این خطا را هم به شما آموزش می‌دهیم.

DOM چیست؟

پیش از آن که بخواهیم به بررسی این مفهوم بپردازیم، بهتر است بدانید که DOM مخفف کلمه Document Object Model است! در هر صفحه از سایت، اشیا و عناصری وجود دارند که با استفاده از کدهای HTML در اختیار کاربران قرار می‌گیرند. هر یک از این عناصر به ترتیب خاصی بارگذاری می‌شوند و این ترتیب خاص از نوع کدنویسی صفحات شما دستور می‌گیرد. برخی از عناصر اهمیت بالایی دارند و زودتر بارگذاری می‌شوند و برخی دیگر اهمیت کمتری دارند که در زمان طولانی‌تر و دیرتر بارگذاری می‌شوند. به عنوان مثال به فرم زیر توجه کنید:

در نمودار بالا تمام المان‌ها بر اساس اولویت قرار گرفته‌اند و در مرورگر کاربران بر اساس همین نمودار بارگذاری می‌شوند! البته این نمودار استاندارد صفحات وب است اما شما می‌توانید با کدنویسی و بر اساس میزان اهمیت عناصر مختلف وبسایت خود، اولویت بارگذاری آن را تغییر دهید. حال اگر کدنویسی شما ایراد داشته باشد یا اولویت‌بندی بارگذاری المان‌ها به خوبی انجام نشده باشد، ممکن است بین آن‌ها تداخل به وجود بیاید و همین مسئله باعث می‌شود تا خطای DOM در جی‌تی‌متریکس به شما نمایش داده شود. اگر بخواهیم نحوه بارگذاری را راحت‌تر توضیح دهیم، باید بگوییم که مرورگر کاربران هنگام دریافت کدهای HTML آن را در کنار کدهای CSS و JS به یک نمودار درختی تبدیل می‌کند که تحت عنوان DOM شناخته می‌شود. اما چگونه می‌توان امتیاز بالایی برای DOM دریافت کرد؟ در بخش بعدی همراه ما باشید تا به بررسی کامل این موضوع بپردازیم.

شرایط گرفتن امتیاز مناسب از DOM چیست؟

اگر شما صفحات سایت خود را بررسی کرده‌اید و با خطای DOM مواجه شده‌اید، ممکن است ندانید که سایت شما چه ایرادی دارد که با چنین خطایی روبرو شده‌اید! جی‌تی‌متریکس شرایط خاصی برای امتیاز دادن با خطای DOM دارد که سایت شما را بر اساس آن بررسی می‌کند. 3 شرایط مهمی که GTmetrix برای امتیاز خوب دادن به DOM سایت شما در نظر می‌گیرد، عبارتند از:

·تعداد داکیومنت کلی

اولین چیزی که جی‌تی‌متریکس برای بررسی DOM به بررسی آن می‌پرازد، تعداد کل داکیومنت‌هایی است که در یک صفحه وجود دارند! این تعداد 1500 است و صفحات سایت شما نباید از این تعداد بیشتر سند داشته باشند. اگر تعداد کل داکیومنت‌ها از این عدد بیشتر باشد، باعث می‌شود که سرعت پردازش سایت توسط مرورگر کاهش پیدا کند! همچنین تعداد زیاد آن پردازنده سیستم کاربران را خیلی درگیر می‌کند و می‌تواند به آن آسیب بزند. بنابراین GTmetrix برای آن که یک سایت بهینه داشته باشید، از شما می‌خواهید که حداکثر 1500 داکیومنت داشته باشید که البته بسیاری از سایت‌ها کمتر از 500 داکیومنت در صفحات خود دارند

·عمق کدهای سایت (Depth)

یکی دیگر از مسائلی که جی‌تی‌متریکس برای بحث DOM آن را بررسی می‌کند، عمق کدنویسی است! هنگام کدنویسی شما برخی کدها را زیر مجموعه برخی دیگر می‌نویسید و همین مسئله باعث می‌شود تا سرعت پردازش کداهش پیدا کند. این تعداد 32 است! حال اگر زیرمجموعه کدهای شما که اصطلاحاً به آن Depth گفته می‌شود بیشتر از 32 باشد، باعث کاهش سرعت پردازش و مصرف بیش از حد رم (Memory) سرور و پردازنده سیستم کاربران می‌شود. بنابراین حتماً باید عمق کدهای شما کمتر از 32 باشد تا مشکلی برای شما، سرور سایت و همچنین سیستم میزبان کاربران ایجاد نکند.

·تعداد زیرمجموعه‌ها

یکی دیگر از مسائلی که روی DOM و ایجاد خطای آن تاثیرگذار است، تعداد زیرمجموعه‌ها زیر کد والد است! کد والد همان کدی است که در بالا قرار دارد و پس از آن چندین زیر مجموعه قرار می‌گیرد. بر اساس گفته جی‌تی‌متریکس، تعداد کدهای زیرمجموعه که به آن کد فرزند (Child) گفته می‌شود نباید از 60 مورد بیشتر باشد. شما با رعایت این مسئله خیلی راحت می‌توانید DOm سایت بهینه‌سازی کنید و خطای آن را رفع کنید. اگر با این خطا روبرو هستید، احتماً آن که این مورد برای شما اتفاق افتاده باشد بسیار زیاد است و حتماً باید آن را بررسی کنید تا در صورت بروز مشکل، آن را رفع کنید.

اگر صفحات سایت شما این 3 شرایط را داشته باشند، به راحتی می‌توانید DOM مناسبی داشته باشید و به خطا روبرو نشوید.

روش‌های رفع خطای DOM کدام هستند؟

تا اینجا مقاله با مفهوم DOM و شرایطی که جی‌تی‌متریکس برای دریافت امتیاز مناسب در نظر گرفته است، آشنا شدید! اکنون زمان آن رسیده است که با روش‌های رفع خطای آن‌ آشنا شوید. البته لازم است بگوییم این خطا روش خاصی برای رفع ندارد و باید المان‌های سایت خود را با کدنویسی برطرف کنید اما 3 راه‌کار را به شما ارائه می‌کنیم که روی بهبود امتیاز این مورد بی‌تاثیر نیست. گاهی اوقات هم با توجه به اهمیت پایین این خطا، بهتر است آن را رها کنید! در هر صورت، ما راه‌های رفع این خطا را بررس می‌کنیم تا اگر به آن نیاز داشتید، بتوانید به راحتی آن را رفع کنید:

1.بهبود سایز DOM

اولین روش برای آن که بتوانید خطای DOM را رفع کنید، این است که سایز کدهای خود را کاهش دهید! گاهی اوقات کدنویس‌ها به دلیل عدم مهارت یا تجربه کافی در هنگام کدنویسی، کدهای غیر بهینه استفاده می‌کنند یا کدهای اضافی استفاده می‌کنند که در این صورت باعث بروز خطای DOM می‌شود. به عنوان مثال به دو نمونه کد زیر دقت کنید:

<div id="navigation-main">

<ul>

TEXT

</ul>

</div>

نمونه بالا، یک نمونه کد اضافی و غیربهینه است که توسط یک کدنویس غیرحرفه‌ای انجام شده است! در حالی که کد بالا را می‌توان به صورت زیر نوشت:

<ul id="navigation-main">

TEXT

</ul>

کد بالا یک نمونه کد بهینه و استاندارد است که به راحتی می‌توانید از بروز خطای DOM جلوگیری کنید. این موضوع برای تمام کدنویسی‌های سایت شما است که اگر رعایت نکنید، قطعاً با خطای DOM روبرو خواهید بود. اگر چنین خطایی دارید، بهتر است به کمک یک کدنویس حرفه‌ای عملیات بهینه‌سازی کدهای سایت خود را انجام دهید تا بهترین نتیجه را بگیرید.

2.استفاده از ویژگی‌های Lazy Load برای تصاویر و Preload برای ویدئوها

یکی دیگر از راه‌های رفع خطای DOM این است که از بارگذاری تنبل برای لود تصاویر سایت خود استفاده کنید! این مسئله باعث می‌شود تا میزان پردازش کمتری برای مرورگر کاربران لازم باشد و به راحتی بتوانید خطای DOM را رفع کنید. همچنین اگر در صفحات خود ویدئو هم دارید، می‌توانید از قابلیت Preload استفاده کنید تا ویدئوهای شما راحت‌تر برای کاربران بارگذاری شوند. با استفاده از این دو راه‌کار می‌توانید کمک زیادی به بهبود DOM و رفع خطای مربوط به آن کنید.

3.محدود کردن تعداد مقالات یا محصولات در هر صفحه

اگر به صفحه دسته‌بندی محصولات یا مقالات خود دقت کرده باشید، در آن تعداد محصول یا مقاله وجود دارد! گاهی اوقات در سایت‌ها به هر دلیل که معمولاً عمدی نیست، تعداد آن‌ها بسیار زیاد است که این مسئله روی تعداد اسناد موجود در صفحه تاثیر دارد و می‌تواند باعث خطای DOM شود. برای آن که به این دلیل با خطای DOM روبرو نشوید، بهتر است تعداد مقالات موجود در دسته‌بندی مقالات و تعداد محصولات موجود در دسته‌بندی محصولات را محدود کنید. به عنوان مثال 10 عدد گزینه مناسبی است که البته می‌توانید متناسب با سایت خود تعداد آن را کم یا زیاد کنید.

4.صفحه‌بندی نظرات کاربران در صفحات سایت

یکی از بخش‌های مهم صفحه محصول یا خدمات، بخش نظرات است! برخی صفحات نظرات بسیار زیادی دارند و کاربران همیشه برای شما کامنت درج می‌کنند. اگر تعداد کامنت‌ها از حد مشخصی بیشتر شود، این مسئله روی سرعت سایت و همچنین بروز خطای DOM تاثیر بسیار زیادی دارد. برای آن که با چنین مشکلی مواجه نشوید، می‌توانید به راحت از قابلیت صفحه‌بندی نظرات استفاده کنید! به خصوص در سیستم‌های مدیریت محتوا این قابلیت وجود دارد و خیلی راحت می‌توانید این کار را بر روی سایت خود انجام دهید.

5.غیرفعال کردن پلاگین‌های بدون استفاده در وردپرس

اگر یک سایت وردپرسی دارید، حتماً متوجه شده‌اید که گاهی اوقات میزان پردازش آن ضعیف می‌شود که دلایل مختلفی دارد! یکی از مهم‌ترین دلایلی که سرعت پردازش را کاهش می‌دهد و ممکن است شما را با خطای DOM روبرو کند، فعال بودن پلاگین‌هایی است که از آن استفاده نمی‌کنید. این مسئله باعث می‌شود که کدهای مربوط به آن پلاگین در صفحات شما وجود داشته باشند و باعث افزایش تعداد اسناد شود. اگر با این خطا روبرو هستید یا حتی سایت شما با چنین خطایی روبرو نیست، بهتر است پلاگین‌های غیرضروری را غیرفعال کنید تا سایت شما با مشکل مواجه نشود و پردازش آن در مرورگر کاربران سریع‌تر انجام شود.

یشیسشی

با انجام این 5 راه کار، معمولاً خطای DOM رفع می‌شود اما اگر رفع نشد بهتر است به فکر بهینه‌سازی کدهای سایت خود به کمک یک متخصص حرفه‌ای باشید. این خطا از جمله خطاهایی است که ارتباط مستقیم به کدهای سایت شما دارد و نمی‌توان با ترفند آن را رفع کرد.

نتیجه‌گیری

یکی از خطاهایی که هنگام بررسی سایت با استفاده از ابزار GTmetrix با آن روبرو می‌شوید و البته اهمیت زیادی ندارد، خطای DOM است! این خطا مربوط به تعداد داکیومنت‌های یک صفحه و همچنین میزان عمق کدنویسی آن صفحه بستگی دارد که اگر از حد خود بیشتر باشد، با آن روبرو می‌شوید. رفع این خطا معمولاً ساده نیست و نیازمند تخصص کافی در کدنویسی است! بنابراین اگر با روش‌های ساده بالا مشکل سایت شما رفع نشد، بهتر است به آن اهمیت ندهید یا اگر خیلی برایتان مهم است، از یک کدنویس ماهر و با تجربه برای رفع آن استفاده کنید.

در این مقاله به بررسی کامل خطای DOM پرداختیم تا بدانید که این خطا از چه چیزی نشات می‌گیرد! حال اگر سایت شما با این مشکل مواجه شده است، می‌توانید آن را به کمک ترفندهای بالا رفع کنید یا با مشاوره سئو مشکلات پرفرمنس سایت خود را حل نمایید. همچنین اگر سوالی در مورد این مقاله دارید، از طریق بخش نظرات مطرح کنید تا شما کاربران محترم را به صورت کامل راهنمایی کنیم و پاسخ سوالی که برایتان در مورد این مقاله پیش آمده است را بدهیم.