ویدئوی آموزشی خطای Combine images using CSS sprites در جی تی متریکس

رفع خطای Combine images using CSS sprites در جی تی متریکس با کدنویسی یه مقدار مشکل میشه. امروز در این مطلب ابتدا از اهمیت این خطا میگیم بعد هم راه حلی برای فرار از کدنویسی 🙂 در جهت افزایش سرعت سایت شما و در نهایت بهبود سئو.

مفهوم خطای Combine images using CSS sprites در جی تی متریکس:

اول بهتره ببینیم CSS Sprite چیه؟ در هر صفحه سایتی تعدادی عکس وجود داره. مرورگر برای لود هر عکس باید یک درخواست به سمت سرور بده. اگه تعداد عکسهای سایت زیاد باشه رد و بدل کردن این درخواستها بین مرورگر و سرور زمان زیادی رو به خودش اختصاص میده. روش CSS Sprite تمام تصاویر رو در یک عکس کنار هم میچینه و با استفاده از مختصات اون به کمک CSS در مکانهای دلخواه درجشون میکنه. اینطوری فقط یک تصویر لود شده و یک درخواست فرستاده شده اما چندین بار ازش استفاده میشه. در نتیجه سرعت سایت بالا میره.

برای اینکه بهتر موضوع رو درک کنیم. بعنوان نمونه سایت دیجی کالا رو در نظر بگیرین. از تصویر ادغام شده زیر به روش CSS Sprites تونسته میلیونها درخواست رو در روز کاهش بده. اگه دیجی کالا هر روز نیم میلیون کاربر ورودی داشته باشه و اگه به جای روش CSS Sprites هر عکس و آیکن که در تصویر زیر میبینین رو در یک فایل جداگانه آپلود کنه. فرض هم میکنیم که تصویر زیر شامل 100 عکس باشه. روزانه 50 میلیون درخواست فقط از سمت عکس و آیکنهای زیر رو باید سرورهای دیجی کالا پاسخگو باشن. ولی وقتی همه عکسها در یک تصویر ادغام بشه 100 برابر به بهینه سازی سایت کمک شده و به نیم میلیون درخواست کاهش پیدا میکنه.

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