اگر از همراهان همیشگی پرشین تولز هستید، حتماً مقاله قبلی در مورد رفع خطاهای سایت به کمک GTmetrix را خوانده‌اید! در این مقاله هم قصد داریم به بررسی ادامه این بحث بپردازیم تا بتوانید با افزایش سرعت سایت، وضعیت سئوی سایت خود را بهبود ببخشید و رضایت کاربران را هم جلب کنید.
رفع خطای serve scaled images در GTmetrix
استفاده از تصاویر در سایت بخش عمده فایل‌های آپلود شده روی یک سایت را تشکیل می‌دهند و تاثیر بسیار زیادی روی ایجاد تغییرات ظاهری در سایت دارند. همه وبمستران در هر نوشته از چند تصویر به خاطر آن که بتوانیم در جستجوی تصاویر گوگل هم بالا باشیم، استفاده می‌کنیم. در این بین سعی می‌شود همیشه از تصاویر با کیفیت و زیبایی استفاده شود که با خواندن پیام چشمی توسط بازدیدکننده در نگاه اول کاری کند که محتوای سایت شما رو تا انتها دنبال کنند. اما یک شرط مهمی که برای استفاده از تصاویر در سایت وجود دارد و متاسفانه نادیده گرفته می‌شود،بهینه سازی کردن تصاویر سایت از نظر اندازه است که با نام serve scaled images یاد می‌شود. این بهینه‌سازی از دو جهت مورد بررسی قرار می‌گیرد که بخش اول شامل اندازه تصاویر و بخش دوم شامل حجم تصاویر می‌شود که منظور ما، بهینه‌سازی اندازه تصاویر است.
وقتی هنگام تست سرعت سایت با جی تی متریکس به خطای serve scaled images برخورد می‌کنید، با این خطا مواجه می‌شوید. منظور از مشکل serve scaled images این است که تصاویر در اندازه درست و استانداردی قرار ندارند.
هر تصویری که به صورت بهینه قرار داده نشده باشد، در مقابل اندازه استانداردی که می‌توانید استفاده کنید به همراه میزان فشرده شدن آن نشان داده شده که اگه بتوانید به این عدد نزدیک کنید تاثیر زیادی روی سرعت بارگذاری صفحات سایت شما خواهد داشت. حالا که با این خطا آشنا شدیم، اجازه دهید ببینیم علت رخ دادن این خطا چیست! وقتی از قالبی استفاده می‌کنید که اندازه استاندارد تصاویر شاخص برای نوشته‌ها روی ۲۵۰*۱۰۰ تنظیم شده باید از همین اندازه تو همه نوشته‌ها استفاده کنید تا بر اساس امکانات قالب برای سایر بخش‌ها مثل نوشته‌های مرتبط، نمایش مطالب در سایدبار و… که وجود داره بیاید و از برش تصاویر استفاده کند. بنابراین وقتی تصویری را آپلود می‌کنید، وردپرس از تصویر ۲۵۰*۱۰۰ پیکسلی که آپلود می‌کنید در چند اندازه مختلف برش می‌زند که هر کدام برای نمایش نوشته در یک بخش دیگه از سایت است. به عنوان نمونه برای سایدبار ممکن است از یک تصویر با اندازه ۴۸*۱۱۰ استفاده شود.
اگر فرض کنیم که تصویر اولیه و اصلی ما که با اندازه ۲۵۰*۱۰۰ بارگذاری حجمی برابر با ۶۰۰ کیلوبایت رو داشته باشد، در این صورت موقع برش خوردن ممکن است به حجم ۶۰ کیلوبایت برسد که این عدد خیلی عالی است. اما برخی قالب‌ها هستند که چنین قابلیتی را ندارند و از تصاویر تو اندازه مختلف برش نمی‌زنند. اینجا است که با استفاده از CSS اندازه تصاویر تغییر داده می‌شود و در قالب گفته می‌شود که برای نمایش آخرین مطالب در سایدبار اندازه تصویر رو با استفاده از CSS مثلا روی ۴۸*۱۱۰ نمایش داده شود. اتفاق بد درست اینجا است که درست تصویر اصلی با همان حجم ۶۰۰ کیلوبایت نمایش داده می‌شود. در این صورت برای لود هر بار این تصویر ۶۰۰ kb از ترافیک هاست شما مصرف می‌شود که اگر در روز فرض کنیم برای ۱۰۰۰ بازدیدکننده این تصویر لود شود، در این صورت برای این تعداد بازدید باید ۶۰۰ مگابایت پهنای باند رو از دست دهید، در صورتی که اگه تصویر رو برش دهید و حجمش به ۶۰ کیلوبایت برسد، شما برای این تعداد بازدید فقط ۶۰ مگابایت پهنای باند رو در هر روز مصرف خواهید کرد.
روش اول: در این روش شما باید با قالب خودتون آشنایی داشته باشید و تصاویری که قصد دارید در نوشته‌ها استفاده کنید را با اندازه استاندارد بسازید. به عنوان نمونه در قالب جنه استانداردی که برای تصاویر شاخص گرفته شده روی ۴۰۵*۷۸۰ پیکسل است و هنگامی که از این اندازه استفاده کنید، تصاویر که در اندازه‌های دیگری برش می‌خورد هم به صورت استاندارد هستند. پس وقتی دارید تصویر برای نوشته می‌سازید باید از این اندازه استفاده کنید که دیگه نیاز نباشد قالب با استفاده از CSS اندازه تصویر را کوچک نشان دهد. هر چند این گزینه در وردپرس استفاده نمی‌شود و خود وردپرس بسته به امکان قالب این برش را انجام می‌دهد اما اگر تصویر با اندازه خیلی بزرگ هم استفاده کنید، موقع برش خوردن ممکن است اندازه استاندارد خود را از دست دهد.
روش دوم: یکی از سایت‌های آنلاین که با استفاده از آن می‌توانید اندازه تصاویر خودتان رو تغییر دهید، سایت Imageresize است که امکان آپلود تصویر از کامپیوتر و آپلود از آدرس رو به شما خواهد داد. کافی است روی دکمه زیر کلیک کنید تا به سایت مورد نظر مراجعه کنید. بعد از آن که وارد سایت شدید، می‌توانید تصویر را آپلود کرده و یا آدرس تصویر را از سایتی وارد کنید. سپس این تصویر روی سرورهای سایت قرار می‌گیرد و با ابزاری که در اختیار شما قرار می‌دهد، می‌توانید اندازه دلخواه برای تصویر را ایجاد کرده و در نهایت خروجی ازش تهیه کنید. حالا تصویر رو در سایت با اندازه استاندارد که آپلود کنید، ارور serve scaled images هم برطرف می‌شود!
روش سوم: به صورت پیش فرض امکان تعیین برش تصاویر رو در سه سطح بزرگ، میانه و بندانگشتی به شما داده می‌شود اما این که بتوانید بیشتر از این تعداد روی برش تصاویر کاری انجام دهید، وجود نداره و باید از افزونه برای این کار استفاده کنید. یکی از افزونه‌های خوب و در عین حال در وردپرس با نام Imsanity در مخزن وردپرس به ثبت رسیده که به شما این امکان را می‌دهد، اندازه مختلفی بر اساس تنظیمات قالب خودتان برای تصاویر در نظر بگیرید که هنگامی که دارید آپلود می‌کنید، علاوه بر اندازه‌های خود وردپرس با این اندازه‌ها هم تصاویر برش بخورند.
در مقاله بعدی به ادامه این بحث می‌پردازیم.
