آموزش سئوافزایش سرعت سایت

رفع خطای Combine images using CSS sprites

رفع ارور Combine images using CSS sprites

نکات برگزیده مطلب

  • رفع ارور Combine images using CSS sprites
  • علت خطای Combine images using CSS sprites
  • مشخصات خطای Combine images using CSS sprites
  • تشریح کامل خطای Combine images using CSS sprites

با یک آموزش دیگر از سری آموزش های افزایش سرعت سایت در GTmetrix همراه شما هستیم. در جلسه قبل درباره خطا های Avoid landing page redirects و Minimize Redirects صحبت کردیم و در این مقاله قصد داریم که خطای Combine images using CSS sprites را در رفع کنیم.
در ادامه ؛ با روش های مختلف حل خطای Combine images using CSS sprites آشنا می شوید.

مشخصات خطای Combine images using CSS sprites

نام: Combine images using CSS sprites
نوع: تصاویر
دسته: خطا های PageSpeed
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 89%

خطای Combine images using CSS sprites چیست؟

معمولا در هر صفحه از هرسایتی تعدادی عکس (آیکن یا تصاویر کوچک) وجود دارند و در این شکی نیست؛ چرا که تصاویر نقش به سزایی در ارتباط بین سایت و کاربر ایفا می کنند، این خطا زمانی رخ می دهد شما از تعداد زیادی تصاویر کوچکی در سایت خود استفاده کنید مانند تصاویر زیر:

CSS sprites تصاویر سایت
CSS sprites تصاویر

طبیعتا هر یک از تصاویر بالا دارای حجم مشخصی هستند و مرورگر برای نمایش دادن تک تک این تصاویر به کاربران ،درخواستی به سمت سرور ارسال می کند و اگر تعداد عکس ها زیاد باشد، سرور زمان بیشتر را برای پاسخ به این درخواست ها صرف می کند و این اصلا خوب نیست!

در ادامه خواهیم گفت که چگونه با ترکیب این تصاویر با یکدیگر و ساخت تصویر واحد؛ خطای Combine images using CSS sprites را به طور کامل رفع کنید تا علاوه بر کاهش در خواست های سرور، باعث افزایش سرعت سایت شما شود.

رفع خطای Combine images using CSS sprites

همان طور که قبلا گفتیم ؛ برای رفع خطای Combine images using CSS sprites باید تصاویر یا آیکن ها را با یکدیگر در قالب یک عکس ، ترکیب کنیم تا از مصرف بسیار زیاد پهنای باند سرور جلوگیری کنیم. اهمیت این ویژگی آنقدر بسیار است که سایت های بزرگی مثل دیجی کالا نیز از این برای افزایش سرعت سایت استفاده می کنند:

CSS sprites سایت
نمونه عکس CSS sprites شده دیجی کالا

شما تصور کنید که دیجی کالا اگر هر یک از آیکن های بالا را به صورت جداگانه آپلود می کرد و با توجه به بازدید بالای کاربران از این سایت، چه اتفاقی برای سرور این سایت رخ می داد؟!!

اما چگونه با این روش تصاویر سایت مان را تبدیل به یک عکس واحد کنیم؟ برای انجام این کار دو راه وجود دارد:

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

در این مرحله شما باید با استفاده از یک برنامه ویرایشگر مثل فوتوشاپ ، عکس ها یا آیکن های خودتان را به صورت دقیق در کنار هم قرار دهید و سپس از با فرمت مناسبی از آن خروجب بگیرید (اگر بک گراند تصاویر شما transparent است ، توصیه می کنیم از فرمت PNG برای تصاویر خود استفاده کنید).

برای درک بهتر مثالی از سایت w3schools می آوریم که به صورت کلی به این مساله اشاره کرده است؛ عکس پایین را در نظر بگیرید:

CSS sprites تصاویر

حالا ما قصد داریم فقط آیکن Home (خانه) را فقط نمایش دهیم ، پس از کد زیر استفاده می کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url('https://www.w3schools.com/css/img_navsprites.gif') 0 0;
}

</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
</ul>

</body>
</html>

می توانید خروجی این کد را در این لینک مشاهده کنید؛ کافیست بعد از رفتن به لینک ذکر شده روی دکمه RUN کلیک کنید.

در مثال پایین از هر 3 آیکون استفاده کردیم، به کد های زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

خروجی دستورات بالا را می‌توانید این لینک مشاهده کنید.

اگر این روش برای شما سخت است می توانید از روش دوم که راحت تر است استفاده کنید 🙂

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

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

برخی از ابزار های آنلاین css sprites :

اگر هرگونه سوال یا مشکلی در مورد خطای Combine images using CSS sprites دارید؛ در بخ نظرات همین صفحه مطرح کنید تا آن ها را بررسی کنیم.

همچنین می توانید برای بهینه سازی تصاویر سایت تان از مقاله بهینه سازی تصاویر سایت استفاده نمایید.


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

5
برچسب ها

مهدی اشرفی

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

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

4 × پنج =