جلسه ۱۳ – رفع خطای Avoid an excessive DOM size

Reduce the number of DOM elements یا Avoid an excessive DOM size در جی تی متریکس

رفع خطای Avoid an excessive DOM size

نکته مهم: در جی تی متریکس جدید معیاری به نام Avoid an excessive DOM size ایجاد شده که تقریبا شبیه به یکی از معیارهای قدیم جی تی متریکس هست، یعنی ارور Reduce the number of DOM elements.

من پوریا آریافر هستم از سایت میزفا و قصد دارم بگم که DOM چیست و المان های DOM چرا تعدادشون و اندازشون مهم هست و چرا نباید به فکر رفع خطای Avoid an excessive DOM size باشیم؟ مخصوصا دوستانی که سایت وردپرسی با قالب های آماده دارن. همه به دنبال راه حل برای رفع این مشکل هستن ولی بدونید که اصلا ساده نیست. در ادامه همراه میزفا باش.

فقط بدون که اگر به دنبال رفع این خطا در جی تی متریکس یعنی Avoid an excessive DOM size هستی به قول یکی از دوستان در نظرات، “بی خیال این خطا” شو، هیچ سایت ایرانی و خارجی نمی‌تونه آموزش رفع خطای Avoid an excessive DOM size رو بده، البته یک سری راه‌ حل ها هست ولی راه حل اصلی زیر ساخت مربوط به برنامه نویسی سایتت هست.
حتی ما در پروژه‌های افزایش سرعت سایت چنین اروری رو خیلی کم بررسی میکنیم (مگر سایت تیم برنامه نویس داشته باشه و یا بودجه کافی برای در اختیار گرفتن برنامه نویس بده). با این حال من اگر جای شما باشم وارد دسته آموزش رفع خطاهای gtmetrix میزفا میشم و سایر موارد بررسی میکنیم.

خلاصه‌ای از خطا Reduce the number of DOM elements در قدیم

نام: Reduce the number of DOM elements
نوع: محتوا
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 92%

مدل DOM چیست

مدل DOM مخفف عبارت Document Object Model است که برای دسترسی به اشيا و عناصر موجود در يک  سند HTML یا صفحه HTML  است، این مدل از يک سری درخت سلسله مراتبی برای این دسترسی استفاده می‌کند. اين درخت از شی Window به عنوان عنصر مادر يک صفحه HTML شروع شده و به ترتيب به عناصر رده پايين تر ادامه پیدا می‌کند، تا به پايين‌ترين رده عناصر يعنی متن و نوشته برسد . شکل زیر يک نمای کلی از درخت سلسله مراتب در مدل DOM است:

رفع خطا Document Object Model
Document Object Model

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

بذارید ساده تر درباره DOM توضیح بدم:

زمانی که مرورگر سند HTML دریافت میکنه در کنار CSS و JS به نمودار درختی تبدیل میکنه. این ساختار درختی رو DOM یا Document Object Model میگن.

Avoid an excessive DOM size

  • Nodes: به همه المان‌های HTML در DOM بالا میگن Nodes (اصولا برگه هم میگن).
  • Depth: به تعداد شاخته هایی که طی میشه depth میگن (مثلا طبق DOM بالا تگ img دارای depth برابر ۳ هست و مسیر HTML -> body -> div -> img طی کرده).
  • Child Elements: به تمام Nodes های بچه داخل Nodes میگن.

چه زمانی Avoid an excessive DOM size رخ میده؟

  • زمانی که به صورت کلی بالای ۱۵۰۰ عدد Nodes داشته باشیم.
  • زمانی که Depth بیشتر از ۳۲ عدد در Nodes ها داشته باشیم.
  • زمانی که Child Nodes بالای  ۶۰ عدد داشته باشیم.

ارور Avoid an excessive DOM size روی چه چیزی اثر داره؟

  • حجم DOM زیاد باعث بالا رفتن زمان FCP GTmetrix میشه.
  • زیاد بودن سایز DOM باعث بالا رفتن Memory سایت هم میشه.
  • سایر زیاد DOM اثر روی TTFB و بالا رفتن اون هم داره.

۱ – از نظر تکنیکی چطوری DOM size بهبود بدیم؟

کد اول نگاه کنید:

<div id="navigation-main">
<ul>
هر چی ...
</ul>
</div>

اینم کد دوم بهینه شده هست:

<ul id="navigation-main">
هر چی ...
</ul>

در کد اول اصلا وجود div لازم نبود ولی خیلی از دوستان برنامه نویس این کار میکنن. سعی کنید هر جا نیاز بود یک المان HTML بیارید. حتما آموزش HTML رو سعی کنید دوستان متخصص سئو پیش ببرن.

کد اول وقتی در کل پروژه و بک‌اند سایت شما وجود داشته باشه باعث اینجا خطای Avoid an excessive DOM size میشه. البته این موضوع در کدهای جاوااسکریپت و همینطور کدهای CSS هم هست.

۲ – یک سری روش های ساده برای رفع ارور Avoid an excessive DOM size

  • سعی کنید برای ویدیوها از Lazy Load استفاده کنید. همیطور ویژگی Preload برای ویدیو گزینه خوبی هست.
  • حتما یک سری مقاله داخل صفحات دسته بندی بلاگ یا یک سری محصولات داخل دسته بندی محصول دارید، سعی کنید در هر صفحه نهایتا ۱۰ مقاله (یا محصول) لود کنید، این اشتباه هست که داخل یک صفحه بالای ۳۰ یا بیشتر مقاله یا محصول لود کنید.
  • حتما برخی از پست‌های شما یا محصولات شما نظرات زیادی دارن، سعی کنید نظرات رو Lazy Load کنید و یا صفحه بندی کنید تا سرعت بهبود پیدا کنه.
  • پلاگین هایی که در وردپرس استفاده نمیکنید غیرفعال کنید.

هنوز مشکل داری و حل نشده؟ پس از اینجا به بعد کار براتون سخته!!!!

۳ – رفع خطای Avoid an excessive DOM size سخت شد

رفع ارور Avoid an excessive DOM size

اگر دو مورد بالا رو انجام دادی و مشکل حل نشد بدون که از الان به بعد برات سخت خواهد بود و فکر نکنم بتونی حل کنی.

باید از الان دونه دونه کدهای سی اس اس و جاوااسکریپتی که استفاده نمیشه و یا بهینه نوشته نشده رو پیدا کنی و پاک کنی.

استفاده بیشتر این عناصر DOM باعث کند شدن سایت میشه، و همان‌طور که نوشته شده Reduce the number of DOM elements یعنی کاهش بدید، حتی خطای جدید یعنی Avoid an excessive DOM size هم میگه پرهیز کن از DOM.

مشکل سرعت وردپرس خیلی از دوستان هم همینه، از قالب های آماده با امکانات زیاد استفاده میکنن، چشم بسته کلی افزونه نصب میکنن و بعد انتظار دارن سرعت موشک رو داشته باشن. با این حال اگر فکر میکنید سایر خطاهای جی تی متریکس رو بهینه کردید میتونید خطای Reduce the number of DOM elements و خطای Avoid an excessive DOM size نادیده بگیرید.

اگر اصرار دارید تعداد DOM elements ها رو کاهش بدید باید برنامه نویس حرفه ای جاوااسکریپت داشته باشید و یا دوره برنامه نویسی جاوااسکریپت برید. هر دو حالت برای شما هزینه بسیاری داری. حالت اول هزنیه مالی بسیاری داره و حالت دوم هم هزینه زمانی خیلی داره و حداقل ۱ سال زمان نیاز هست. و از طرفی هر قالبی به شکل های مختلفی کدنویسی شده و برای همین این موضوع کدنویسی رو سخت تر میکنه.

با این حال متاسفانه برخی دوستان به دنبال یک کد جادویی هستن و انتظار دارن یک کد بهشون بدیم و اون کد رو در سایت بذارن و سریع خطا رفع بشه ولی برای این خطا چنین چیزی امکان پذیر نیست و اگر در کل وب سایت های ایرانی و خارجی جستجو انجام بدید هیچ راه حل یک شبه ای پیدا نمیکنید.

پایان

پس برای Reduce the number of DOM elements یا Avoid an excessive DOM size در جی تی متریکس باید سعی کنید کمترین کد HTML و CSS و JS استفاده کنید. دوستان وردپرسی از قالب های بهینه و با کمترین افزونه استفاده کنید.

شما راه حل بهتری به ذهنتون میرسه؟ لطفا در نظرات با بقیه دوستان به اشتراک بذارید.

به پایان مقاله رسیدیم. امیدوارم تونسته باشیم اطلاعاتی درباره مشکل Avoid an excessive DOM size و سختی رفع حل به شما داده باشم. این خطا از دوره آموزش جی تی متریکس سایت میزفا بود و سعی میکنیم در این آموزش های سئو به شما در جهت افزایش رتبه سایت کمک شایانی کرده باشیم، اگر سوالی داشتید حتما در قسمت نظرات مطرح کنید. در جلسه بعد به معرفی خطای Avoid chaining critical requests می‌پردازیم. با ما میزفا همراه باشید.

فیلم آموزشی افزایش سرعت سایت با gtmetrix
فیلم آموزشی افزایش سرعت سایت با gtmetrix
پوریا آریافر
اولین کسب و کار آنلاین خودم رو در فیسبوک راه‌اندازی کردم، سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال رو داشتم. بعد اینکه فیسبوک خالی از کاربر ایرانی شد وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت رو دریافت کردم، در حالی که نمره بالا گرفتم ولی کسی به دلیل به خطر افتادن موقعیت شغلی خودش به عنوان کارآموز منو قبول نمی‌کرد، بعدش با شروع دوران خدمت سربازی، مسئول بهینه سازی یک سایت خبری معتبر شدم و سئو یاد گرفتم. در ابتدای سال ۲۰۱۴ تونستم از رتبه ۱۵۰۰۰ به ۴۰۰ الکسا نزدیک کنم، اون زمان الکسا خیلی مهم بود. وارد دانشگاه شدم، به دلیل عدم علاقه به دانشگاه سعی کردم زودتر تمومش کنم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، توی دانشگاه هر کسی منو میدید یاد سئو میوفتاد، در همون سال آخر دانشگاه بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو رو داشتم، که به مجتمع فنی فروختم تا بتونم تمرکز رو فقط بر روی عشق خودم یعنی سئو بذارم، وقتی کانال تلگرام فروختم حس پرواز بهم دست داد، هرچند درآمد چندین میلیون ماهانه رو از دست دادم ولی دوباره باید مثل گذشته با پوستی نو یک فصلی نو رو میساختم. در این چندین سال فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌گرفته، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کردم. در اکثر ابزارهای کاربردی گوگل تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری رو یادگیری و یاددادن می‌دونم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شد تونست چنین بستر مناسبی رو برام فراهم کنه. همینطور در حال حاضر مدیریت یک تیم ۱۰ نفری از جوانان فعال و پرانگیزه رو در میزفا به عهده دارم. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم …
لیست آموزش GTmetrix نسخه جدید

29 نظر

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر