رفع خطای Specify image dimensions در gtmetrix

اگر به دنیال رفع ارور Specify image dimensions هستید باید بگم کمی بدشانس هستید چرا که کمتر سایتی چنین خطایی دارد. از طرفی رفع خطای Specify image dimensions چندان باعث افزایش سرعت وبسایتتان نخواهد شد. نکته بعدی گاهی حل این مشکل به سختی و گاهی به راحتی است. برویم سراغ اصل مطلب.

سلام و عرض ادب، من پوریا آریافر متخصص سئو هستم و در ادامه آموزش gtmetrix از مقالات سئو سایت میزفا در خدمت شما هستم. در جلسه گذشته که درباره رفع خطای Specify a cache validator مقاله‌ای را انتشار دادیم، در این جلسه قصد داریم درباره مشکل Specify image dimensions و حل آن در جی تی متریکس صحبت کنیم، این خطا جزء خطاهای رفع خطاهای PageSpeed گوگل است. با میزفا همراه باشید.

خلاصه‌ای از خطای Specify image dimensions

نحوه حل ارور Specify image dimensions

اول علت خطا و دوم راه حل رفع آن

این ارور وقتی به وجود می‌اید که شما در تصاویر خود از اتریبیوت‌های مانند width و  height استفاده نکرده باشید. برای رفع این مشکل باید در تمام تصاویر خود عرض و ارتفاع آن را مشخص کنید.

مثالی از یک عکس بدون مشخص بودن ابعاد (در این حالت gtmetrix از شما خطا میگیرد):

<img src="image.jpg" />

مثالی از یک عکس با مشخص بودن ابعاد (ولی اگر همانند مثال بالا ابعاد را مشخص کنید خطا حل می‌شود):

<img src="image.jpg" width="200" height="200" />

کمی دقیق‌تر درباره image dimensions صحبت کنیم:

گزارش زیر از سایت اکادمی میزفا هست، لطفا توجه کنید:

گزارش GTmetrix بالا یک عکسی را نمایش می‌دهد ولی جلوی آن عکس مقادیر برای طول و عرض را مشخص کرده است. حال من مدیر سایت حتما میدانیم این عکس در کجا لود می‌شود و باید بریم ابعاد آن را درج کنم.

با این حال فکر کنم با مقایسه دو مثال بالا نحوه حل مشکل Specify image dimensions را متوجه شده باشید. باید عکس هایی که شبیه مثال اول هستند را به مثال دوم تبدیل کنید. حال یا باکدنویسی و یا دستی اضافه کنید.

حالت کدنویسی: باید طوری برنامه نویسی کنید که ابتدا به دنبال عکس‌هایی بدون اتریبویت width و height  باشید، سپس به کمک کد مقادیر عکس‌ها یعنی width و height بدست اورده و بعد همانند مثال دوم آن‌ها را در تگ img درج کنید.
طبیعتا اگر آشنایی با برنامه نویسی ندارید بهتر است به یک متخصص بسپارید. همینطور یک افزونه قدیمی در این لینک می‌توانید به شما دوستان وردپرسی کمک کند.

حالت دستی: به مکانی که عکس در آن وجود دارد می‌رویم و سپس به کدهای مربوط به عکس که اصولا با تگ img شروع می‌شود را پیدا می‌کنیم. سپس همانند عکس بالا مقادیر یعنی یعنی width و height را درج می‌کنیم. همانند عکس زیر:

تاثیر این ارور بر سرعت سایت

رفع خطای Specify image dimensions باعث می‌شود تا تصاویر موجود در سند HTML شما سریع‌تر رندر شوند و نیازهای غیرضروری برای اجرای بازنگری عکس‌ها رفع می‌شود، وقتی مرورگر صفحه‌ای از سایت را رندر می‌کند تا به کاربر نشان دهد فایل‌های مختلفی را دانلود می‌کند که عکس هم شامل موارد دانلود شده می‌باشد.
حال اگر ابعاد عکس مشخص نباشد و یا ابعاد مشخص شده با اندازه واقعی آن فرق داشته باشد مرورگر در اینجا برای نشان دادن صحیح المان‌های HTML مجبور است بازنگری لازمه را بر روی عکس انجام دهد، درحالی که اگر ابعاد به شکل صحیح مشخص شده باشند نیازی به این بازنگری نیست.
شاید چنین خطایی در زمان قابل تشخص برای ما نباشد ولی هر چه تعداد عکس‌ها بیشتر باشد و ابعاد مشخص نشده باشند زمان نسبتا بیشتری طول می‌شد صفحات رندر شود تا در حالی که ابعاد مشخص است و مرورگر قبل از رندر کردن توسط اتریبیوت های CSS از ابعاد عکس‌ها به خوبی آگاهی پیدا می‌کند.

پیشنهاد بیشتر برای بهبود سرعت سایت شما

توجه داشته باشید بهینه سازی تصاویر از مهم‌ترین فاکتورها در بالا بردن سرعت سایت است بنابراین مطالعه مقالات زیر هم به شما پیشنهاد می‌شود تا بتوانید عکس‌های بهینه در صفحات ایجاد نمایید.

• رفع خطای Serve scaled images
• رفع خطای Optimize images

✔ همینطور اگر علاقه دارید میتونید مقاله افزونه های برتر سرعت سایت وردپرس مطالعه کنید.

امیدوارم آموزش حل ارور Specify image dimensions در جی تی متریکس برای شما بسیار راحت باشد. سعی کردیم در این آموزش رایگان سئو که باعث بالا بردن سرعت سایت و افزایش رتبه سایت در گوگل می‌شود، کمک شایانی کرده باشیم،

اگر سوالی داشتید حتما در نظرات میزفا بپرسید. این جلسه از دوره آموزش جامع جی تی متریکس که مربوط به رفع ارور Specify image dimensions بود، هم به پایان رسید در جلسات بعد به معرفی خطاهای YSLOW می‌پردازیم و قسمت PageSpeed گوگل به پایان رسید. با میزفا همراه باشید.