اگر از همراهان همیشگی پرشین تولز هستید، حتماً مقاله قبلی در مورد رفع خطاهای سایت به کمک GTmetrix را خوانده‌اید! در این مقاله هم قصد داریم به بررسی ادامه این بحث بپردازیم تا بتوانید با افزایش سرعت سایت، وضعیت سئوی سایت خود را بهبود ببخشید و رضایت کاربران را هم جلب کنید.
آموزش رفع خطای Combine images using CSS sprites
Combine images using CSS sprites راهکاری است که با استفاده از زبان CSS می‌توانید بخشی از تصاویر را نمایش داده و بخشی را مخفی کنید. یعنی می‌توان برای کاهش تعداد درخواست HTTP با قرار دادن چند تصویر که ثابت هستند، کاری کرد که فقط یک درخواست به سایت ارسال شود، اما در عین حال بتوانیم بخشی از تصویر را نمایش دهیم.
برای این که بهتر متوجه شوید Combine images using CSS sprites چیست، با یک مثال شروع می‌کنیم. یک سایت همچون دیجی کالا را در نظر بگیرید که روزانه چندین هزار بازدید کننده دارد، در فوتر و صفحات محصول این سایت یک سری تصاویر مربوط به شبکه‌های اجتماعی، وضعیت ارسال مرسوله و… وجود دارد که در تمامی صفحات ثابت هستند. هر کاربری که وارد این سایت می‌شود یک درخواست به سرور برای لود این تصاویر ارسال خواهد شد. هر درخواست هم مساوی است با درگیر کردن سرور که اگر در سطح بزرگ بازدید دیجی کالا و از طرفی دیگر تعداد تصاویر ثابتی که در هر بار لود می‌شود این موضوع را بررسی کنید، سرور مدام با درخواست درگیر خواهد بود. این درگیری می‌تواند فاجعه بار باشد و باعث افت شدید سرعت سایت شود. اما برای این کار راهکاری وجود دارد که می‌توان این تصاویر ثابت را با استفاده از برنامه‌های ویرایشگر عکس در کنار هم قرار داد. سپس یک خروجی نهایی از این مجموعه تصاویر را تهیه کرده و به جای داشتن چند تصویر، یک تصویر داشته باشیم. پس در این صورت اگر به عنوان نمونه تصویر زیر را در نظر بگیریم که در آن ۷ تصویر قرار دارد، برای لود این تصاویر ۷ درخواست به سرور ارسال خواهد شد. اما می‌توان با در کنار هم قرار دادن این تصاویر و تهیه یک خروجی ۷ تصویر را در داخل یک تصویر قرار داد و استفاده کرد که در این صورت فقط ۱ درخواست برای سرور ارسال خواهد شد. در این صورت تعداد درخواست‌ها را به میزان ۶ مرتبه کاهش داده‌ایم.
اما ما چطور از این تصویر طوری استفاده کنیم که فقط برخی از تصاویر داخلی که در کنار هم قرار دارند را نمایش دهیم؟ راهکار این روش در زبان CSS نهفته است. شما می‌توانید با استفاده از CSS کاری کنید که برخی از این تصاویر نمایش داده نشود. فقط کافی است به دانش CSS مسلط باشید و با تعریف نقاطی که در تصویر قرار دارند، بخش دلخواه را نمایش دهید. به عنوان مثال اگر بخواهیم صرفا آیکون لینکدین را نمایش دهیم، کافی است با استفاده از CSS کاری کنیم که فقط موقعیت این آیکون که در تصویر قرار دارد نمایش داده شود.
روش اول: استفاده از برنامه‌های ویرایشگر
در این روش اول باید تصاویر خود را داخل برنامه ویرایشگر عکس مثل فتوشاپ طراحی کرده و با تناسب درستی کنار هم بچینید. به عنوان نمونه در تصویر بالا کافی است همه آیکون‌هایی که به صورت تصویری هستند و برای نمایش شبکه‌های اجتماعی استفاده شده اند را با تناسب درست و فاصله مناسب در کنار هم قرار بدهیم و یک خروجی در قالب تصویر از آن بگیریم.
سپس این تصویر را در هاست خود آپلود کنیم و در نهایت برای اینکه بخواهیم کدام آیکون از این تصویر رو نشان دهیم، کافی است با CSS موقعیت عکس را تعریف کنیم. این موضوع نیاز به دانش فنی دارد و برای همین از توضیحات بیشتر درباره آن می‌گذریم. اما اگر دانش فنی در این زمینه ندارید، می‌توانید از روش دوم که راهکار ساده‌ای است استفاده کنید.
روش دوم: استفاده از ابزار آنلاین
در این روش نیازی به استفاده از برنامه ویرایشگر تصویر و دانش فنی برای کدنویسی css ندارید. کافی است تصاویر خود را در این ابزار آنلاین آپلود کنید. این ابزار آنلاین خروجی CSS را به شما می‌دهند تا در سایت از آن استفاده کنید. برای این منظور ابتدا روی دکمه زیر کلیک کنید تا به سایت معرفی شده هدایت شوید. همان‌طور که میبینید ابتدا باید روی دکمه Open کلیک کنید و تک تک تصاویری که می‌خواهید را در این سایت کنار هم به صورت افقی یا عمودی آپلود کنید. بعد با استفاده از دکمه Setting می‌توانید تنظیمات دلخواه خود را که شامل لایه بندی، انتخاب نام پیشوند برای کلاس css، فاصله هر تصویر از هم است، انتخاب و شخصی سازی کنید. بعد از آن که تصاویر و چیدمان آن‌ها نهایی شد، روی دکمه Downloads کلیک کنید پنجره‌ای به شکل زیر به شما نمایش داده می‌شود.
حالا چند خروجی در قالب تصویر نهایی png، css، html و مشاهده دمو برای شما قرار دارد. ابتدا باید تصویر نهایی را از ستون png مشاهده و دانلود کنید. سپس آن را در هاست خود آپلود کنید. سپس با استفاده از ستون CSS کدهایی که ایجاد شده را به فایل css سایت خود اضافه کنید. در نهایت می‌توانید از ستون HTML هم کدهایی که باید توسط آن‌ها تصاویر را نمایش دهید، کپی کنید. حال پس از انجام این کار به جای آن که چندین درخواست برای دانلود این چند تصویر کوچک ارسال شود و سرور درگیر این مسئله شود، فقط یک بار دانلود می‌شود و با استفاده از CSS می‌توانید هر بخش از تصویر را که می‌خواهید، نمایش دهید. در مقاله بعدی به بررسی این بحث می‌پردازیم!
