همه ما با جی تی متریکس آشنا هستیم. با استفاده از این وب‌سایت می‌توانید سایت خود را از نظر سرعت و بهینه بودن برنامه‌نویسی تست کنید و نتیجه تست را بصورت حروف لاتین از A تا F دریافت کنید. البته A بهترین رتبه و F بدترین رتبه‌ای هست که می‌توانید دریافت کنید. آموزش کامل رفع خطاهای GTMetrix در آموزش افزایش سرعت سایت توضیح داده شد.
اما یکی از خطاهای معروف جی تی متریکس که همیشه به چشم می‌خورد، این خطاست:
Combine Images Using CSS Sprites
GTMetrix
و اما چطور باید خطای Combine Images Using CSS Sprites را حل کنیم؟! اصلا دلیل به‌وجود آمدن این خطا چیست؟
آنچه در این مطلب می‌خوانید:
دلیل ارور Combine Images Using CSS Sprites
این خطا زمانی بوجود می‌آید که شما در قالب سایتتان از تصاویری استفاده کرده‌اید و این تصاویر از فایل‌های مختلفی لود می‌شوند. مثلا یک تصویر ایمیل در قالب سایت استفاده کرده‌اید و یک تصویر پس زمینه برای فوتر و برای لود شدن هر کدام از این دو تصویر، نیاز هست تا کاربر یک درخواست مجزا به سمت سرور شما ارسال کند! فاجعه‌ای بسیار بزرگ!
حالا فرض کنید در یک قالب از ۳۰ آیکون استفاده کرده‌اید و باید ۳۰ درخواست برای دریافت این ۳۰ آیکون کوچک به سمت سرور ارسال شود. یک فاجعه‌ی بزرگ‌تر که باید حتما حلش کنیم.
در نتیجه این خطا می‌گوید تصاویری که در قالب سایتتان از طریق CSS لود می‌شود را با یک تصویر لود کنید. مگر می‌شود؟ بله. بریم که حلش کنیم!
حل خطای Combine Images Using CSS Sprites
برای حل این خطا باید تصاویر استفاده شده در سی اس اس قالب سایتمان را از یک منبع لود کنیم. یعنی همه تصاویر را در یک فایل کنار هم قرار دهیم. مثلا اگر دو آیکون به این شکل داریم:
که البته این دو آیکون دو تا فایل مجزا هستند، این دو را بصورت یک فایل لود کنیم. به این شکل:
حالا دیگه نیازی نیست که ۲ درخواست به سمت سرور ارسال شود تا دو فایل داشته باشیم. برای دریافت هر دو آیکون می‌توانیم یک درخواست به سمت سرور ارسال کنیم. هرچه Requestهایی که به سمت سرور ارسال می‌کنیم کمتر باشه در نتیجه سرعت بیشتری هم خواهیم داشت.
معمولا در تست‌های سرعت، با کاهش تعداد Requestها به راحتی می‌توانید سرعت سایت خود را تا ۳ ثانیه کاهش دهید و ۳ ثانیه زمان بسیار زیادی برای منتظر ماندن تا لود یک صفحه هست. پس کاهش تعداد Requestهای سایت را فراموش نکنید.
اما چطور آیکون‌ها را بصورت جداگانه استفاده کنیم؟
تا اینجای کار مشکلی نیست. با استفاده از فتوشاپ، آیکون‌ها را کنار هم در یک فایل وارد قرار می‌دهیم. اما چطور باید این آیکون‌ها را بصورت جدا برای بخش‌های مختلف سایت استفاده کنیم؟
برای اینکار کافیست کمی دست به CSS شویم. یعنی با استفاده از سی اس اس مشخص کنیم که این قسمت از تصویر را برای این بخش از سایت استفاده کن و مابقی تصویر نمایش داده نشود. شروع می‌کنیم به سی اس اس. اگر با سی اس اس آشنایی دارید این کار بسیار ساده هست. اما اگر با سی اس اس آشنایی ندارید پیشنهاد می‌کنم از یک طراح سایت کمک بگیرید یاآموزش طراحی سایت با وردپرس را ببینید. (یکم تبلیغ هم بد نیست.)
