بهینه سازی و افزایش سرعت با المنتور

توضیحات دوره

بهینه سازی و افزایش سرعت با المنتور

بهینه سازی و افزایش سرعت با المنتور از طریق بهینه کردن چینش کانتیننر ها و بهینه کردن از طریق حذف کردن المان های غیر قابل استفاده صورت میگیرد.

1- بهینه سازی و افزایش سرعت با المنتور : بهینه سازی از طریق بهینه کردن چینش کانتینر ها

در این روش شما باید تا جای ممکنه از کانتینر های کمتری استفاده کنید و به جای اینکه مثلا برای یک باکس سه ردیفه بیایید و یک کانتینر اصلی و سه کانتینر زیر مجموعه بسازید و المان ها را داخل آن قرار دهید،

از یک کانتینر اصلی و سه المان با درصد های 33% ( یک سوم ) قرار دهید تا دقیقا همان نتیجه را در طراحی بگیرید اما با کانتینر کمتر ، این کار باعث کم شدن کانتینر ها و در نهایت کم شدن حلقه های DOM میشود.این مشکل به سئو و سرعت سایت آسیب وارد میکند.

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

این ارور با متن Avoid an excessive DOM size نمایش داده میشود.

DOM چیست ؟

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

DOM در واقع به تو در تو کردن کانتینر ها یا المان ها گفته میشود که در اصل همان کد باکس هایی هستند که در HTML با div نمایش داده میشن.

اگر بخواهیم به صورت کد این موضوع رو نمایش بدهیم به حالت زیر میشود.

در تصویر زیر میتوانید مثال مربوطه را مشاهده کنید

همانطور که در مثال بالا میبینید هر دو کد یک نتیجه را ( متن در خط اول به صورت وسط چین ) نمایش میدهند.

اما کد سمت راست ( قرمز رنگ ) از div های بیشتری استفاده شده است و کد طولانی شده ، این کار باعث میشود که بابت تجزیه تحلیل هر div مرورگر وقت بیشتری صرف کند و سایت شما کند شود.

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