منظور از DOM چیست؟

کلمه DOM مخفف Document Object Model می‌باشد که به فارسی مدل شی‌گرای سند ترجمه می‌شود. DOM یک رابط برنامه نویسی مخصوص HTML و XML می‌باشد و یک نمایه ساختار یافته (نمودار درختی) را برای سند فراهم می‌کند، برای تعریف نحوه دسترسی و دستکاری آن‌ها نیز از زبان‌های اسکریپتی مانند JavaScript استفاده می‌شود.

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

نمودار درختی DOM

شرایط Laymen در DOM

برای ساده‌تر کردن شرایط بهتر است از ابزار Devtools Chrome استفاده کنید. (در مقاله تجزیه و تحلیل سرعت وبسایت به وسلیه کروم بیشتر درباره ابزار قدرتمند Devtools Chrome صحبت کردیم ) این ابزار بخشی مخصوص DOM HTML دارد که شما می‌توانید به راحتی به این بخش دسترسی داشته باشید. توجه داشته باشید که فایل HTML سایت شما به صورت پیش‌فرض از DOM تشکیل نشده است بلکه این مرورگر کاربر است DOM را پس از ادغام فایل HTML و منابع Javascript و CSS  ایجاد می‌کند. بنابراین شما می‌توانید محتوایی که در ابزار Devtools Chrome می‌بینید را نسخه تجزیه‌شده HTML خود بدانید.

ابزار توسعه دهندگان Chrome

منظور از مسدود سازی DOM چیست؟

اگر قصد بهینه سازی سرعت وب سایت خود، توسط وب سایت‌های آنالیز سرعت وب سایت دارید، می‌بایست به بخش مسدودسازی DOM توجه زیادی کنید زیرا بخشی بسیار مهم در کاهش لود سرعت وب سایت می‌باشد. این بخش‌ها در بیشتر اوقات در وب سایت‌ها در قسمت منابع render blocking قرار می‌گیرند. مانند HTML Render Blocking – CSS Render Blocking – JavaScript Render Blocking به این بخش مربوط می‌شوند.

یکی از بهترین راه‌های یافتن مسدودسازی DOM استفاده از بخش Devtools Chrome می باشد که در زیر راه استفاده از آن را به شما می‌آموزیم:

1 – راه‌اندازی ابزار توسعه‌دهنده در گوگل Chrome

ویندوز : F12 – یا استفاده از Ctrl + Shift + I

مکینتاش : Cmd + Opt + I

2 – به پنل Network بروید و صفحه را با Ctrl + R رفرش کنید.

3 – اکنون شما یک نمودار آبشاری از لود وب سایتتان را مشاهده می‌کنید. در حال حاضر ما می‌خواهیم به دوچیز بپردازیم یکی از آن‌ها سرعت لود محتوای DOM می‌باشد و که براساس میلی ثانیه می‌باشد و در نمودار قبل از رنگ آبی می‌باشند.

از آنجا که فایل‌های CSS و جاوا‌اسکریپت از دسته منابعی هستند که امکان render blocking در آن‌ها وجود دارد و بین یا قبل از رنگ آبی مخصوص DOM لود می‌شوند ، می‌توانیم فرض کنیم که آن‌ها باعث مسدود‌سازی DOM نیز می‌شوند.

توجه داشته باشید که تصاویر به عنوان Render Blocking شناخته نمی‌شوند بنابراین درصورتی که در بخش DOM نمایش داده شدند می‌توانید آن‌ها را نادیده بگیرید، اگرچه ما همچنان توصیه می‌کنیم که تصاویر خودتان را بهینه‌سازی کنید.

در نمونه زیر دو منبع Style.css و Jquery.min.js هردو DOM را مسدود می‌کنند.

مسدودسازی DOM

نمونه دیگری که می‌توانید برای این کار استفاده کنید ،ابزار PageSpeed Insights گوگل می‌باشد. همانطور که در زیر مشاهده می‌کنید، همان دوفایلی که در بالا به آن‌ها اشاره کردیم در اینجا نیز مشکل render blocking دارند.

گوگل PageSpeed Insight

توصیه های ما را دنبال کنید تا مشکل مسدود‌ شدن DOM وب سایت خود توسط فایل‌های CSS و JavaScript را حل کنید و سرعتتان را افزایش دهید. شما می‌توانید کاری کنید تا DOM وب سایت شما به تدریج ایجاد شود.

این را در نظر بگیرید که اصلا نیازی به این نیست که حتما نمره ۱۰۰ از ۱۰۰ را در بررسی‌های PageSpeed Insights گوگل کسب کنید ، برای مثال باید عرض کنیم که برای فونت‌های گوگل شما راهی برای حل مشکل Render Blocking ندارید. پس سعی کنید که منابعی که Render Block می‌شوند در وب سایت شما بیشتر از ۱۰ عدد نشوند و همیشه کمتر از ۱۰ عدد باشند. با این‌کار سرعت لود وب سایت شما بسیار افزایش پیدا می‌کند.

CSS

non-render blocking کردن CSS

اگر می‌خواهید که به صورت کامل فایل‌های CSS وب سایتتان را Non-Render Blocking کنید، تنها یک راه خوب دارید. آن هم inline کردن فایل‌های CSS می‌باشد. برای اینکار می‌بایست کد‌های CSS وب سایتتان را در تگ‌های