ویدئوی آموزشی خطای Specify image dimensions در gtmetrix

همراه شما عزیزان هستیم در سری مطالب معرفی و بررسی خطاهای جی تی متریکس در سایت آکادمی میزفا، برای افزایش سرعت سایت شما و بهبود سئوی سایتها. امروز به معرفی خطای Specify image dimensions در gtmetrix میپردازیم. اشکال زدایی این خطا بسیار راحته و در کل فقط یه دقت کوچولو روی عکسهاتون باید انجام بدین.

خب خطای Specify image dimensions در gtmetrix چه مفهومی داره؟

این خطا برای ما عکسهایی رو که عرض و ارتفاعی مشخصی براشون تعیین نکردیم رو لیست میکنه.

عکس بدون مشخص کردن ابعادش بصورت زیر هست:

عکس با اتربیوتهای Width و Height مشخص بصورت زیر هست.

خب حالا چه تأثیری روی سرعت سایت ما داره؟ چرا سایت Gtmetrix برای فاکتورهای Page Speed به این موضوع اشاره میکنه؟ رفع این خطا در تصاویر باعث میشه نیاز های غیر ضروری برای اجرای بازنگری عکسها رفع بشه. شما فرض کنین یه مرورگری یک صفحه از سایت رو رندر میکنه که بتونه به کاربر نشون بده.

قطعاً فایلهای مختلفی دانلود میکنه که بین اون فایلها، عکسها هم هستن و عکسها رو هم دانلود میکنه. طبیعتاً سایز همه عکسها برابر نیست. و ابعاد همه عکسها با هم فرق میکنه. و طبیعیه دیگه همه عکسها که سایزشون یکسان نیست 🙂 حالا اگه ابعاد اون عکس در سند HTML مشخص نباشه، مرورگر میاد برای نشون دادن صحیح المانهای HTML یک بازنگری روی اون عکسها انجام میده. ولی اگه ابعاد به شکل دقیقی مشخص شده باشه، دیگه نیاز به این بازنگری نیست.

شاید فکر کنین که رفع این خطا زیاد در سرعت سایت شما مؤثر نیست. اما اگه تعداد عکسهاتون زیاد باشه به اندازه کافی میتونه تأثیرگذار باشه. شما فرض کنن این خطا رو ندارین و تمام عکسهای شما Width و Height دارن. اون موقع چه اتفاقی میفته؟ مرورگر قبل از اینکه رندر کنه و قبل از اینکه بیاد سند Html رو کامل بخونه اول میاد CSS ها رو میخونه، چون CSS ها در هدر و بالای تگ قرار دارند.

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

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