Css Sprite چیست؟
در هر صفحه وب‌سایت تصاویر متعددی آپلود شده‌اند که هنگام لود سایت، آن تصاویر هم لود می‌شوند. در واقع در هر بار لود شدن صفحه، درخواستی به سمت سرور ارسال می‌شود که این ارسال درخواست و دریافت پاسخ از سمت سرور نیاز به زمان دارد. هر چه تعداد این تصاویر بیشتر شود، تعداد درخواست‌ها و درنیتجه درگیری سرور بیشتر می‌شود.
وقتی ترافیک بالایی نداشته باشید، این موضوع مشکل‌ساز نخواهد بود اما وقتی که بازدید وب‌سایت بالا برود (مثلا زمانی که سایت شما در یک کلمه کلیدی در نتایج اول گوگل باشد و یا تبلیغات کرده باشید) سرعت پایین لود شدن سایت، برای کاربر آزاردهنده خواهد بود. در چنین مواقعی وقتی سایت خود را در جی‌تی‌متریکس آنالیز کنید، ممکن است با ارور Combine images using CSS مواجه شوید که بهترین روش برای رفع این مشکل، استفاده از Css Sprite است. با استفاده از این تکنولوژی کمک بزرگی به بهینه سازی سایت هم در سمت سرور و هم در سمت کاربر خواهید کرد.
در Css Sprite تمام تصاویر در یک عکس بزرگ ترکیب می‌شوند و درخواست‌های زیاد تبدیل به یک درخواست می‌شوند. در واقع یک درخواست ارسال می‌شود و چندین بار از این تصویر استفاده می‌شود. به همین دلیل سرعت سایت افزایش پیدا می‌کند.
Css Sprite چیست؟
تصاویر وب‌سایت نقش مهمی در سرعت سایت دارند و بهینه سازی آن‌ها یکی از اصول مهم در سئو و بهینه سازی سایت است. Css Sprite تکنیک بهینه سازی عملکرد است که این بهینه کردن را با ترکیب چند تصویر به یک تصویر منفرد به نام صفحه Sprite انجام می‌دهد. وقتی از این تکنیک استفاده می‌شود، تعداد بارگیری‌های لازم برای لود شدن یک صفحه وب کاهش یافته و درنتیجه تراکنش شبکه هم کاهش می‌یابد.
همانطور که می‌دانید، تصاویر یک وب‌سایت در فایل‌های مشخصی ذخیره می‌شوند. گاهی بعضی از این تصاویر بهم مرتبط هستند یا تغییرات کمی دارند. مثلا تصویر یک دکمه در حالت عادی یا حالت هاور آن فرق می‌کند و در حالت هاور تصویر کمی سایه و یا حالت برجسته دارد. وقتی کاربر این صفحه وب را در مرورگر خود باز می‌کند، برای بارگیری تصاویر دو درخواست به سمت سرور ارسال می‌شود. هر چه تعداد این درخواست‌ها بیشتر شود، کاربر سرعت لود پایین‌تری را تجربه می‌کند. برای رفع این مشکل، تکنولوژی Css Sprite به‌وجود آمده است.
دنیای بزرگ مخاطبای آنلاین رو از دست نده!
Css Sprite یک مجموعه عکس است که درون یک عکس ذخیره شده‌اند. برای مثال شما سه تصویر از از سه آیکون شبکه‌های اجتماعی متفاوت دارید، این سه آیکون را در کنار هم در یک عکس ذخیره می‌کنید و با توجه به محل جای‌گیری هر آیکون، با کمک CSS فقط آیکون مدنظرتان را نمایش می‌دهید. با این کار دیگر به جای ارسال درخواست بارگیری 3 عکس، فقط درخواست لود یک عکس را خواهیم داشت.
Css Sprite برای چه تصاویری مناسب است؟
استفاد از این روش برای تصاویری مناسب است که در سایت ثابت هستند و به مرور زمان زیاد تغییر نمی‌کنند. برای مثال آیکون‌هایی که در سایت استفاده می‌شوند، گزینه خوبی برای تکنیک Css Sprite هستند.
از طرفی فراموش نکنید که قرار است چند تصویر در یک تصویر واحد جایگزین شوند پس ابعاد هر تصویر مهم است و این ابعاد باید خیلی بهم نزدیک باشند در غیراینصورت سعی کنید مجموعه تصاویر را در دو یا سه تصویر اصلی بگنجانید.
چرا از Css Sprite استفاده کنیم؟ لود شدن تصاویر کوچکتر سرعت سایت را افزایش نمی‌دهد؟
همانطور که گفتیم استفاده از این روش باعث افزایش سرعت سایت می‌شود. شاید به نظر بیاید که استفاده از تصاویر کوچکتر با حجم کم، باعث افزایش لود تصاویر و سرعت سایت شود. ولی توجه داشته باشید که هر تصویری که در سایت به صورت مجزا آپلود می‌شود، به معنای یک درخواست مجزا به سمت سرور و یک پاسخ مجزا به آن است. زیاد بودن تصاویر به معنای افزایش تعداد درخواست‌های ارسالی به سمت سرور و در نتیجه کاهش سرعت سایت می‌شود. به همین دلیل اکثر مدیران وب‌سایت‌ها به جای استفاده از چند عکس کوچک، استفاده از تکنولوژی Css Sprite را در دستور کار خود قرار می‌دهند.
طبق آنالیزی که روی سایت‌های معتبر انجام شده است، 5 الی 38 درصد از زمان لودینگ صفحات این وب‌سایت‌ها برای دانلود HTML مصرف شده است و مابقی آن یعنی چیزی بین 62 تا 95 درصد برای فراخوان HTTP و پیکربندی مطالب شامل تصاویر، استایل و اسکریپت می‌شود. با در نظر گرفتن این نکته که مرورگرها به طور همزمان 2 تا 5 درخواست را با هم پردازش می‌کنند، با افزایش تعداد فراخوان‌ها، سرعت لود سایت به طور چشم‌گیری کاهش می‌یابد.
روش‌های استفاده از Css Sprite
به طور کلی دو روش برای استفاده از Css Sprite وجود دارد. هم می‌توانید از فتوشاپ استفاده کنید و هم می‌توانید از ابزارهای آنلاین برای این منظور استفاده کنید. در هر دو روش نهایتا باید تصویر نهایی که شامل ترکیب و ادغام تصاویر کوچک است را به همراه کدهای CSS مربوط به جای‌گیری تصویر در صفحه وب، در هاست خود آپلود کنید. در ادامه این دو روش را با هم بررسی میکنیم.
استفاده از فتوشاپ
تصاویری که قصد ادغام آن‌ها را دارید در کنار هم در یک لایه فتوشاپ قرار دهید. پیشنهاد میکنیم به منظور بازدهی بهتر، فرمت تصاویر کوچک را به صورت png. و شفاف یا transparent در نظر بگیرید. بعد از اینکه تصاویر را در جای درست قرار دادید و جابجایی‌های لازم را در فتوشاپ انجام دادید، خروجی آن‌ها را به عنوان یک تصویر واحد بگیرید.
حال نوبت به آپلود تصویر در هاست و اعمال کدهای CSS برای نمایش هر تصویر در موقعیت درست است. این روش کمی زمان‌بر است و وقتی تعداد تصاویر زیاد باشد، نیاز به حوصله نسبتا زیادی دارد که برای موقعیت‌های مناسب، کد CSS درستی اعمال کنید.
استفاده از ابزارهای آنلاین
این روش نسبت به فتوشاپ راحت‌تر است. در این روش وارد یکی از سایت‌هایی زیر می‌شوید و تصاویر کوچک را در سایت آپلود می‌کنید. ابزارهای آنلاین این تصاویر را کنار هم قرار داده و کدهای مربوط به آن‌ها را به شما می‌دهند. بعد از اینکه کدها را دریافت کردید، آن‌ها را در سایت به شکل صحیح و در جای درست قرار دهید.
لیست ابزارهای آنلاین برای Css Sprite:
سخن آخر
یکی از فاکتورهای مهم در سئو سایت، سرعت آن است. خصوصا در نسخه موبایل که کاربران زیادی دارد اهمیت سرعت دوچندان می‌شود. به همین دلیل نباید از اهمیت آن غافل شد. یکی از عواملی که در سرعت سایت تاثیر می‌گذارد تعداد تصاویری است که در سایت آپلود می‌شود. هر چه تعداد این تصاویر بیشتر باشد، تعداد درخواست‌هایی که برای سرور ارسال می‌شود هم بیشتر خواهد بود. تعداد درخواست بالا به معنای فشار روی سرور و کاهش سرعت سایت است. به همین منظور استفاده از Css Sprite برای حل این مشکل پیشنهاد می‌شود.
با استفاده از این تکنولوژی امکان افزایش سرعت سایت را خواهیم داشت چون به جای استفاده از چندین عکس، از یک عکس که چند تصویر را با هم ترکیب کرده است، استفاده خواهیم کرد. با این کار سرعت پردازش بسیار بالا می‌رود و در نتیجه سرعت سایت هم افزایش می‌یابد.
در بحث پیرامون این مقاله شرکت کنید