اگر در حوزه طراحی سایت و سئو فعالیت می‌کنید، حتماً می‌دانید که سرعت سایت از چند دیدگاه اهمیت بسیار زیادی دارد! ابزارهای مختلفی برای بررسی سرعت بارگذاری سایت وجود دارند اما یکی از مهم‌ترین آن‌ها، ابزار جی تی متریکس است. این ابزار سایت شما را به صورت کلی و بر اساس فاکتورهای مختلفی بررسی می‌کند، سپس یک امتیاز کلی به آن می‌دهد. یکی از خطاهایی که هنگام بررسی سایت ممکن است به شما نمایش داده شود، خطای DOM است که روی سرعت بارگذاری سایت تاثیر زیادی دارد. در این مقاله می‌خواهیم به بررسی کامل این خطا و آموزش رفع آن بپردازیم تا بتوانید سرعت بارگذاری سایت خود را بهینه‌سازی کنید.
خطای DOM چیست و چه تاثیری روی سرعت سایت دارد؟
اگر در مورد خطاهای جی تی متریکس تحقیق کرده باشید، حتماً با خطای DOM هم روبرو شده اید. این خطا مخفف کلمه Document Object Model است. در هر سایت و صفحات آن، بخش‌های مختلفی وجود دارد که با استفاده از کدنویسی به کاربران نمایش داده می‌شود. هر یک از این بخش‌ها به ترتیب خاصی بارگذاری می‌شوند و این ترتیب خاص از نوع کدنویسی صفحات شما دستور می‌گیرد. برخی از عناصر اهمیت بالایی دارند و زودتر بارگذاری می‌شوند و برخی دیگر اهمیت کمتری دارند که در زمان طولانی‌تر و دیرتر بارگذاری می‌شوند. برای آشنایی بیشتر با این خطا کافی است به تصویر زیر دقت کنید:
در شکل بالا اولویت بارگذاری بخش‌های مختلف یک صفحه نمایش داده شده است و مرورگر کاربران، بر اساس این اولویت بارگذاری می‌کند. البته برای همه سایت‌ها به این صورت نیست و ممکن است این اولویت ها تغییر کند. در واقع این نمودار استاندارد صفحات وب است اما شما می‌توانید با کدنویسی و بر اساس میزان اهمیت عناصر مختلف وبسایت خود، اولویت بارگذاری آن را تغییر دهید. حال اگر کدنویسی شما ایراد داشته باشد یا اولویت‌بندی بارگذاری المان‌ها به خوبی انجام نشده باشد، ممکن است بین آن‌ها تداخل به وجود بیاید و همین مسئله باعث می‌شود تا خطای DOM در جی‌تی‌متریکس به شما نمایش داده شود.
برای درک بهتر این موضوع، لازم است بدانید که مرورگر کاربران هنگام دریافت کدهای HTML آن را در کنار کدهای CSS و JS به یک نمودار درختی تبدیل می‌کند و این نکته به عنوان DOM شناخته می‌شود. حال ممکن است سایت شما با این خطا روبرو شود! چگونه باید آن را بهینه‌سازی کنید تا امتیاز خوبی از ابزار جی تی متریکس بگیرید؟ در ادامه به بررسی این مسئله و راه‌کارهای آن می‌پردازیم.
چگونه DOM را بهینه‌سازی کنیم تا امتیاز مناسب دریافت کنیم؟
اگر سایت خود را با جی تی متریکس بررسی کنید، ممکن است با خطای DOM روبرو شوید. مسئله مهم این است که گاهی اوقات مشخص نیست که خطا به چه دلیل است و برای کدام بخش از سایت است. در این صورت نمی‌توانید به راحتی آن را رفع کنید. همچنین جی‌تی‌متریکس شرایط خاصی برای امتیاز دادن با خطای DOM دارد که سایت شما را بر اساس آن بررسی می‌کند. 3 شرایط مهمی که GTmetrix برای امتیاز خوب دادن به DOM سایت شما در نظر می‌گیرد که عبارتند از:
-
تعداد داکیومنت‌های سایت
اولین شرطی که جی تی متریکس آن را بررسی می‌کند، تعداد داکیومنت‌های موجود در صفحه سایت شما است. اگر این تعداد زیاد باشد، سایت شما خطای DOM دارد. این تعداد نباید از حداکثر تعیین شده GTmetrix که عدد 1500 است، بیشتر باشد؛ زیرا در غیر این صورت از حالت بهینه بودن خارج می شود! اگر تعداد کل داکیومنت‌ها از این عدد بیشتر باشد، باعث می‌شود که سرعت پردازش سایت توسط مرورگر کاهش پیدا کند! همچنین تعداد زیاد آن پردازنده سیستم کاربران را خیلی درگیر می‌کند و می‌تواند به آن آسیب بزند. بنابراین GTmetrix برای آن که یک سایت بهینه داشته باشید، از شما درخواست می‌کند تا تعداد داکیومنت‌های خود را به کمتر از 1500 عدد برسانید. البته میانگین تعداد داکیومنت‌های بسیاری از سایت‌ها حتی به 500 هم نمی‌رسد و نیازی نیست خیلی نگران این موضوع باشید.
-
عمق کدهای سایت (Depth)
در کدنویسی مسئله‌ای به نام عمق کد وجود دارد که می‌توان آن را به عنوان زیرمجموعه کدها در نظر گرفت! عمق کد روی خطای DOM تاثیر بسیار زیادی دارد. در حقیقت، هنگام کدنویسی شما برخی کدها را زیر مجموعه برخی دیگر می‌نویسید و همین مسئله باعث می‌شود تا سرعت پردازش کاهش پیدا کند. این تعداد 32 است! حال اگر زیرمجموعه کدهای شما که اصطلاحاً به آن Depth گفته می‌شود بیشتر از 32 باشد، باعث کاهش سرعت پردازش و مصرف بیش از حد رم (Memory) سرور و پردازنده سیستم کاربران می‌شود. اگر عمق کدهای سایت از 32 عدد بیشتر باشد، سرور شما تحت فشار قرار می گیرد و ممکن است مرورگر کاربر آن را به صورت کامل بارگذاری نکند. پس اگر خودتان کدنویس هستید، حتماً سعی کنید که عمق کدها زیاد نباشد تا بارگذاری سایت روی مرورگر کاربران به راحتی انجام شود.
-
تعداد زیرمجموعه‌ها
تعداد زیرمجموعه کدها هم تاثیر بسیار زیادی روی DOM سایت خواهد داشت! زیرمجموعه کدها همان والد بودن کد است که در بخش بالا قرار می‌گیرد و کدهایی هم در زیر آن هستند که به عنوان زیرمجموعه شناخته می‌شوند. به توصیه جی‌تی‌متریکس، تعداد کدهای زیرمجموعه که به آن کد فرزند (Child) گفته می‌شود نباید از 60 مورد بیشتر باشد. شما با رعایت این مسئله خیلی راحت می‌توانید DOm سایت بهینه‌سازی کنید و خطای آن را رفع کنید. اگر با این خطا روبرو هستید، احتمال آن که این مورد برای شما اتفاق افتاده باشد بسیار زیاد است. اگر با این مورد مواجه شدید، باید ببینید که کدام بخش از سایت مشکل دارد تا بتوانید آن را رفع کنید! این کار به شما کمک می‌کند تا با خطای DOM روبرو نشوید.
با رعایت این 3 مورد در صفحات سایت خود به راحتی می‌توانید جلوی این خطا را بگیرید و یک سایت استاندارد داشته باشید.
رفع خطای DOM چگونه است؟
تا اینجای مقاله به بررسی کامل خطای DOM پرداختیم و اکنون می‌دانید که این خطا می‌تواند روی بهینه بودن سایت شما تاثیر زیادی داشته باشد. اگر سایت شما با چنین خطایی روبرو باشد، ممکن است نیاز به آموزش رفع این خطا داشته باشید. لازم است بگوییم این خطا روش خاصی برای رفع ندارد و باید المان‌های سایت خود را با کدنویسی برطرف کنید اما 3 راه‌کار را به شما ارائه می‌کنیم که روی بهبود امتیاز این مورد بی‌تاثیر نیست. گاهی اوقات هم با توجه به اهمیت پایین این خطا، بهتر است آن را رها کنید! راه‌هایی را در این قسمت بررسی می‌کنیم که می‌تواند در رفع این خطا به شما کمک کند:
-
بهینه‌سازی سایز DOM
اگر می‌خواهید خیلی ساده این خطا را رفع کنید، اولین قدم کاهش سایز مربوط به کدهای سایت است! معمولاً مهم‌ترین دلیل خطای DOM دقیقاً همین مسئله است و با بهینه‌سازی کدها می‌توانید این خطا را رفع کنید. دلیل آن هم این است که در بسیاری از مواقع کدنویس ها به دلیل تجربه کافی نداشتن از کدهای غیربهینه و سنگین استفاده می کنند که منجر به چنین خطایی می شود. همچنین گاهی از کدهای اضافی استفاده می‌کنند که در این صورت باعث بروز خطای DOM می‌شود. به مثالی که در ادامه بررسی می‌کنیم، دقت کنید:
نمونه بالا، یک نمونه کد اضافی و غیربهینه است که توسط یک کدنویس غیرحرفه‌ای انجام شده است! در حالی که کد بالا را می‌توان به صورت زیر نوشت:
<ul id="navigation-main"> TEXT </ul>
کد بالا یک نمونه کد بهینه و استاندارد است که به راحتی می‌توانید از بروز خطای DOM جلوگیری کنید. این موضوع برای تمام کدنویسی‌های سایت شما است که اگر رعایت نکنید، قطعاً با خطای DOM روبرو خواهید بود. برای رفع این خطا باید از یک کدنویسی حرفه‌ای کمک بگیرید تا بتواند کدهای سایت شما را کاملاً بهینه‌سازی کند.
-
استفاده از قابلیت Lazy Load و Pre Load
ویدیو و تصاویر از مهم‌ترین محتواهای سنگین در صفحات سایت است که باعث بروز خطای DOM می‌شود! برای آن که بتوانید جلوی این مشکل را بگیرید، بهتر است از Lazy Load یا پیش بارگذاری استفاده کنید. این مسئله باعث می‌شود تا میزان پردازش کمتری برای مرورگر کاربران لازم باشد و به راحتی بتوانید خطای DOM را رفع کنید. همچنین اگر در صفحات خود ویدیو هم دارید، می‌توانید از قابلیت Preload استفاده کنید تا ویدیوهای شما راحت‌تر برای کاربران بارگذاری شوند. با کمک این مورد، به راحتی می‌توانید این خطا را رفع کنید و هنگام بررسی سایت با جی تی متریکس، با آن روبرو نشوید.
-
محدودسازی تعداد محصولات در دسته‌بندی محصول
دسته‌بندی محصولات و مقالات از مهم‌ترین صحفات سایت هستند که هنگام وارد شدن به آن، با تعدادی محصول و مقاله روبرو می‌شوید. گاهی اوقات در سایت‌ها به هر دلیل که معمولاً عمدی نیست، تعداد آن‌ها بسیار زیاد است که این مسئله روی تعداد اسناد موجود در صفحه تاثیر دارد و می‌تواند باعث خطای DOM شود. برای آن که به این دلیل با خطای DOM روبرو نشوید، بهتر است تعداد مقالات موجود در دسته‌بندی مقالات و تعداد محصولات موجود در دسته‌بندی محصولات را محدود کنید. این تعداد بستگی به نظر شما دارد اما بهتر است آن را محدود کنید. تعداد آن بستگی به میزان سنگین بودن تصاویر و محتوا دارد که گاهی اوقات 10 عدد مناسب است و گاهی اوقات 30 عدد.
- چگونه منابع خارج از سرور را بدون افت سرعت بارگذاری کنیم؟
-
صفحه‌بندی نظرات کاربران در صورت زیاد بودن
در هر سایت برخی پست‌ها وجود دارند که نظرات زیادی دریافت می‌کنند که این مورد گاهی اوقات باعث بروز خطای DOM می‌شود. دلیل آن هم این است که اگر تعداد کامنت‌ها از حد مشخصی بیشتر شود، این مسئله روی سرعت سایت و همچنین بروز خطای DOM تاثیر بسیار زیادی دارد. برای آن که با چنین مشکلی مواجه نشوید، می‌توانید به راحتی از قابلیت صفحه‌بندی نظرات استفاده کنید! به خصوص در سیستم‌های مدیریت محتوا این قابلیت وجود دارد و به راحتی می‌توانید به صفحه بندی نظرات در سایت خود بپردازید.
-
حذف یا غیرفعال کردن پلاگین‌های بلااستفاده
سایت‌های وردپرسی در صورتی که پلاگین‌های زیادی روی آن نصب شوند، سرعتش کاهش پیدا می‌کند. این مسئله می‌تواند باعث بروز خطای DOM شود که به راحتی قابل رفع است. در واقع ممکن است سایت شما با خطای DOM روبرو شود و دلیل آن فعال بودن پلاگین‌هایی است که از آن استفاده نمی‌کنید. این مسئله باعث می‌شود که کدهای مربوط به آن پلاگین در صفحات شما وجود داشته باشند و باعث افزایش تعداد اسناد شود. اگر با این خطا روبرو هستید یا حتی سایت شما با چنین خطایی روبرو نیست، بهتر است پلاگین‌های غیرضروری را غیرفعال کنید تا سایت شما با مشکل مواجه نشود و مرورگر کاربران راحت‌تر بتواند آن را پردازش کند.
تقریبا بهترین راه‌کارهایی که با استفاده از آن می‌توانید خطای DOM را رفع کنید، در این مقاله بررسی شد. این خطاها ارتباط مستقیم به کدنویسی سایت شما دارند که نیازمند یک کدنویس متخصص هستید تا بتوانید به راحتی آن را رفع کنید. این خطا از جمله خطاهایی است که ارتباط مستقیم به کدهای سایت شما دارد و نمی‌توان با ترفند آن را رفع کرد. البته لازم است بگوییم که این خطا اهمیت خیلی زیادی ندارد و اگر با آن روبرو شدید، برای رفع آن تلاش کنید. اما اگر موفق نشدید، به آن اهمیت زیادی ندهید و رها کنید.
در حقیقت این خطا مربوط به تعداد داکیومنت‌های یک صفحه و همچنین میزان عمق کدنویسی آن صفحه بستگی دارد که اگر از حد خود بیشتر باشد، با آن روبرو می‌شوید. رفع این خطا معمولاً ساده نیست و نیازمند تخصص کافی در کدنویسی است! بنابراین اگر با روش‌های ساده بالا مشکل سایت شما رفع نشد، بهتر است به آن اهمیت ندهید یا اگر خیلی برایتان مهم است، از یک کدنویس ماهر بتوانید آن را به راحتی رفع کنید.
