اگر از همراهان همیشگی پرشین تولز هستید، حتماً مقاله قبلی در مورد رفع خطاهای سایت به کمک GTmetrix را خواندهاید! در این مقاله هم قصد داریم به بررسی ادامه این بحث بپردازیم تا بتوانید با افزایش سرعت سایت، وضعیت سئوی سایت خود را بهبود ببخشید و رضایت کاربران را هم جلب کنید.
رفع خطای Avoid AlphaImageLoader filter در GTmetrix
یکی از خطاهای رایجی که هنگام تست سرعت سایت با GTmetrix با آن برخورد میکنیم، با عنوان Avoid AlphaImageLoader filter به ما نمایش داده میشود که بیشتر در زمانی که سایت برای مرورگر IE 7 به پایین بهینه سازی شده باشد، با این مشکل مواجه خواهید شد. متاسفانه استفاده از مرورگر IE همچنان مشکلات بسیار زیادی دارد و در مرور سایتها با این مرورگر دچار مشکلات زیادی میشویم، هر چند درصد کمی از کاربران دیگر از این مرورگر استفاده میکنند، اما به این معنی نیست که سایت را برای این درصد کم بهینه سازی نکنیم.
بخاطر این که در مرورگر IE تصاویر شفاف یا همان تصاویری که رنگ پس زمینه ندارند و قطعا با فرمت PNG هستند را بتوانیم بهتر نمایش دهیم، مجبور هستیم که با استفاده از فیلتر AlphaImageLoader کاری کنیم که تصاویر ابتدا به صورت کامل در صفحه سایت لود شوند و بعد از لود کامل سایر بخشهای سایت که هنوز بارگذاری نشدهاند، به صورت کامل لود شوند. فیلتر AlphaImageLoader مربوط به زبان CSS است که برنامه نویسان برای جلوگیری از مکشلات نمایشی در مرورگر IE که عموما از نسخه ۷ به پایین وجود دارد، استفاده میکنند.برای رفع ارور Avoid AlphaImageLoader filter در جی تی متریکس طبق گفته خود سایت باید از استفاده کردن از این فیلتر دوری کنیم.
زیرا این فیلتر باعث درگیر شدن بیشتر حافظه هاست میشود و از طرف دیگه هم بخاطر این که تا تصویر لود نشده باشد، سایر بخشهای صفحه دانلود نمیشوند به همین خاطر مدت زمان خواندن و لود کامل یک صفحه بیشتر طول میکشد که این عمل باعث عدم بهینه سازی در سایت خواهد شد. این خطا در ستون Yslow نمایش داده میشود که مربوط به الگوریتمهای یاهو برای بهینه سازی سرعت سایت است. برای از بین بردن این قابلیت کافیه در فایلهایی که از فیلتر AlphaImageLoader استفاده شده این بلاکها را حذف کنید تا مشکل AlphaImageLoader در جی تی متریکس را برطرف کنید. در صورتی که اطلاعات کافی در این زمینه ندارید، بهتر است از یک برنامه نویس برای این کار کمک بگیرید.
رفع خطای Reduce the number of DOM elements در GTmetrix
یکی از خطاهای gtmetrix که معمولا ما کاربران ایرانی به دلیل استفاده از قالبهای آماده وردپرس با آن مواجه میشویم، خطای Reduce the number of DOM elements است که در Yslow جی تی متریکس نمایش داده میشود که مربوط به استفاده از المانهای مختلف در یک صفحه است. DOM مخفف عبارت Document Object Model است که مربوط به انواع مختلفی از اشیا و عناصر موجود در یک صفحه که به صورت HTML در دسترس است، میشود! این اشیا شامل موارد مختلفی مثل فرمها، دکمهها، چک باکسها و… هستند که در یک صفحه وب مورد استفاده قرار میگیرند و در یک ساختار درختی مانند که از ابتدا تا انتها ادامه دارند، در نهایت شکل یک وبسایت را تشکیل خواهند داد.
همانطور که گفتیم، یک صفحه وب HTML میتواند از خیلی موارد نظیر فرم، جدول، چک باکس، لیست، رمز، تاریخچه، لینک و… تشکیل شود که در هر وبسایت برای زیبا کردن و تکمیل کردن محتوا سعی میشود از بیشتر این المانها استفاده شود. اکنون وقتی این المانها استفاده میشوند، به صورت یک ساختار درختی که از ابتدای صفحه شروع به بارگذاری و نمایش در سایت میکنند تا زمانی که به پایان صفحه برسند و محتوای صفحه که با این موارد ساخته شده را نمایش دهند! اگر زیاد باشند، به نسبت باعث افزایش مدت زمان لود سایت هم خواهد شد. چرا که در بیشتر موارد با استفاده از CSS هم سعی میشود که استایل و ظاهر نمایش این موارد را تغییر دهند تا یک شکل جدید و بهروز به خودش بگیرد. برای همین استفاده از چندین المان DOM در یک صفحه پیشنهاد نمیشود و به گفته Yslow جی تی متریکس که مربوط به الگوریتمهای گوگل است، باید سعی کنید به صورت استاندارد ازش استفاده کنید.
مدل DOM مخفف عبارت Document Object Model است که برای دسترسی به اشیا و عناصر موجود در یک سند HTML یا صفحه HTML است! این مدل از یک سری درخت سلسله مراتبی برای این دسترسی استفاده میکند. این درخت از شی Window به عنوان عنصر مادر یک صفحه HTML شروع شده و به ترتیب به عناصر رده پایین تر ادامه پیدا میکند، تا به پایینترین رده عناصر یعنی متن و نوشته برسد. شکل زیر یک نمای کلی از درخت سلسله مراتب در مدل DOM است:
یک سایت از قسمت های مختلفی تشکل شده است مثل تصاویر، فرم ها، جدول ها و ده ها چیز دیگه و برای اینکه این قسمت های مختلف از یک سایت لود بشوند یک ساختار درختی دارند و از حالت DOM استفاده میشود، اگر این ساختار کندتر لود شوند و یا تداخل داشته باشد چنین خطاهایی در جی تی متریکس صورت میگیرد.
استفاده بیشتر این عناصر DOM باعث کند شدن سایت میشود و همانطور که میبینید، خطای Reduce the number of DOM elements یعنی تعداد المانهای DOM را کاهش دهید و برای این کاهش باید زبان جاواسکریپت و DOM آشنایی داشته باشید. مشکل سرعت وردپرس خیلی از افراد که از قالبهای اماده استفاده میکنند، میتواند این خطا هم باشد هر چند اگر بقیه موارد بهینه سازی شده باشند خطای Reduce the number of DOM elements را بهتر است نادیده بگیرید. پس اگر بخواهید تعداد DOM elements ها را کاهش دهید یا باید برنامه نویس حرفه ای جاوا اسکریپت باشید و یا یک برنامه نویس جاوا اسکریپت استفاده کنید! هر دو حالت برای شما هزینه بسیاری دارد؛ حالت اول هزینه زمانی دارد و حداقل ۱ سال زمان نیاز است و حالت دوم هزینه مالی بسیاری دارد.
از طرفی هر قالبی به شکل های مختلفی کدنویسی شده و برای همین برای سایت و قالبی باید مختص آن کدنویسی صورت گیرد.با این حال متاسفانه برخی دوستان به دنبال یک کد جادویی هستند و انتظار دارند همانند برخی خطاهای جی تی متریکس کد را در سایت بگذارند و سریع خطا رفع شود ولی برای این خطا چنین چیزی امکان پذیر نیست و اگر در کل وب سایت های ایرانی و خارجی جستجو انجام دهید هیچ راه حل یک شبه ای پیدا نمیکنید. از طرفی بحث اولویت بندی در این حالت پررنگ تر میشود و شما باید سعی کنید اولویت بندی لازم را داشته باشد چرا که شما محدودیت مالی و زمانی و انرژی دارید و نمی توانید با این محدودیت ها به فکر رفع همه نوع خطاها باشید. به جای تلاش چشم بسته باید تلاش هوشمندانه انجام دهید و سعی کنید در کمترین زمان بیشترین بهره بری در جهت افزایش سرعت سایت خود داشته باشید. به عبارت دیگر به دنبال خطاهایی باشید که براساس محدودیت هایی که دارید ارزش رفع کردن را دارند.
به خصوص افرادی که سایت وردپرسی دارند و از قالب های آماده وردپرس استفاده میکنند، همه به دنبال راه حل برای رفع این مشکل هستند اما باید بگوییم که رفع کامل آن معمولاً امکانپذیر نیست! بنابراین اگر فقط به دنبال رفع این خطا در جی تی متریکس هستید، بهتر است این مسئله را نادیده بگیرید؛ هیچ سایت ایرانی و خارجی نمیتواند آموزش رفع خطای Reduce the number of DOM elements را بدهد، حتی ما در پروژههایی که جهت افزایشسرعت سایت برای ما ارسال میشوند اگر چنین اروری داشته باشیم، بررسی نمیکنیم و البته اهمیت زیادی هم ندارد. حالا برای آن که بتوانیم ارور Reduce the number of DOM elements را در GTmetrix از بین ببریم، کافی است استفاده از این المانها رو کمتر کنیم. بنابراین در مطالب و صفحات خودتون سعی کنید به شکلی از این موارد استفاده کنید که تعداد آنها زیاد نباشد و از طرفی هم زیاد روی مسئله تغییر استایل این المانها تمرکز نکنید، زیرا باعث میشود لود سایت بخاطر تغییرات استایل مدت زمان بیشتری را از کاربر بگیرد.
در مقاله بعدی به بررسی ادامه این بحث میپردازیم.