آموزش رفع خطای Combine images using CSS sprites در GTmetrix

در این آموزش، قصد داریم به چگونگی رفع خطای “Combine images using CSS sprites” در GTmetrix بپردازیم.

تکنیک “Combine images using CSS sprites” یک راهکار مناسب برای کاهش تعداد درخواست‌های HTTP است. با استفاده از این روش، می‌توانید چندین تصویر ثابت را در یک تصویر واحد ترکیب کنید و با کمک CSS، بخش‌هایی از آن را نمایش دهید یا پنهان کنید. به این ترتیب، به جای ارسال درخواست‌های متعدد برای بارگذاری تصاویر جداگانه، فقط یک درخواست برای بارگذاری تصویر ترکیبی ارسال می‌شود. اگر به دنبال رفع این خطا و افزایش سرعت سایت هستید، تا انتهای این آموزش با ما همراه باشید.

آموزش رفع خطای Combine images using CSS sprites

بهینه‌سازی تصاویر یکی از مهمترین جنبه‌های افزایش سرعت بارگذاری سایت است. تکنیک Combine images using CSS sprites یک راهکار کارآمد برای کاهش تعداد درخواست‌های سرور و بهبود عملکرد است. برای درک بهتر این روش، فرض کنید سایتی مانند دیجی‌کالا را در نظر بگیرید که روزانه بازدیدکنندگان زیادی دارد. در فوتر و صفحات محصولات این سایت، تصاویری مربوط به شبکه‌های اجتماعی، وضعیت ارسال و غیره وجود دارد که در تمام صفحات ثابت هستند. هر بازدیدکننده برای بارگذاری این تصاویر، یک درخواست به سرور ارسال می‌کند که می‌تواند باعث اشغال منابع سرور و کاهش سرعت سایت شود.

راهکار CSS sprites این است که تمامی تصاویر ثابت را در یک تصویر واحد ترکیب کنید. به این صورت، به جای ارسال چندین درخواست برای بارگذاری تصاویر جداگانه، فقط یک درخواست برای بارگذاری تصویر ترکیبی ارسال می‌شود. این روش می‌تواند تعداد درخواست‌ها را به میزان قابل توجهی کاهش دهد و در نتیجه، سرعت بارگذاری سایت را افزایش دهد.

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

روش اول: استفاده از برنامه ویرایشگر

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

سپس این تصویر رو در هاست خودمون آپلود کنیم و در نهایت برای اینکه بخوایم کدوم آیکون از این تصویر رو نشون بدیم کافیه با CSS موقعیت عکس رو تعریف کنیم. این موضوع نیاز به دانش فنی داره و برای همین از توضیحات بیشتر درباره اون می‌گذریم. اما اگر دانش فنی در این زمینه ندارید، میتونید از روش دوم که راهکار ساده‌ای هست استفاده کنید.

روش دوم: استفاده از ابزار آنلاین

در این روش نیازی به استفاده از برنامه ویرایشگر تصویر و دانش فنی برای کدنویسی css ندارید. کافیه تصاویر خودتون رو در این ابزار آنلاین آپلود کنید. بعدش خود این ابزار آنلاین خروجی CSS رو به شما میدن تا در سایت ازشون استفاده کنید. برای این منظور ابتدا روی دکمه زیر کلیک کنید تا به سایت معرفی شده هدایت بشید.

website-performance

همونطور که میبینید ابتدا باید روی دکمه Open کلیک کنید و تک تک تصاویری که میخواین رو در این سایت کنار هم به صورت افقی یا عمودی آپلود کنید. بعد با استفاده از دکمه Setting میتوتید تنظیمات دلخواه خودتون رو که شامل لایه بندی، انتخاب نام پیشوند برای کلاس css، فاصله هر تصویر از هم هست رو انتخاب و شخصی سازی کنید. بعد از اینکه تصاویر و چیدمان اونا نهایی شد روی دکمه Downloads که کلیک کنید پنجره‌ای به شکل زیر بهتون نمایش داده میشه.

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

امیدوارم این آموزش نیز مورد توجه و پسند شما قرار گرفته باشد و توانسته باشید با نحوه رفع خطای “Combine images using CSS sprites” در GTmetrix آشنا شوید. در صورت داشتن هرگونه سؤال یا مشکل در ارتباط با این مقاله، می‌توانید آن را در بخش نظرات مطرح کنید.

سبحان لطیف کار