آموزش سئو فنیآموزش سئو پیشرفتهآموزش افزایش سرعت سایت با ابزار GTMetrix

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

css sprites چیست را در این مقاله به شکل کامل میپردازیم و اینکه چطور بتوانیم از تکنیک css sprite در جهت بهبود عکس‌ها استفاده کنیم؟

از سری دوره‌های آموزش و بهینه کردن وبسایت با ابزار آنلاین جی تی متریکس در خدمت شما هستیم. در جلسه قبل درباره ارور Avoid Landing Page Redirects صحبت کردیم در این جلسه قصد داریم درباره مشکل Combine images using CSS sprites صحبت کنیم و ببینیم چطور میتونیم این مشکل را در سایت پیدا و رفع کنیم و چرا اصلا css sprites برای بهینه سازی عکس‌های ما لازم و ضروری است؟ چطور css sprite کنیم؟. رفع خطای Combine images using CSS sprites برای خیلی از دوستان سخت هست و کمی نیاز به دانش کدنویسی دارد ولی با ابزارهای آنلاین می‌شود به راحتی خطای مربوطه را بهینه سازی کرد.

خلاصه‌ای از خطا Combine images using CSS sprites

نام: Combine images using CSS sprites
نوع: مربوط به عکس
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: ۸۷%
[gap height=”20″]

آموزش ویدیویی CSS sprites به شکل رایگان در لینک زیر:

[gap height=”15″]

CSS sprites چیست

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

css-sprite

روش استفاده از CSS sprites

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

روش اول CSS sprites به کمک فتوشاپ (روش سخت)

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

 

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

<!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 را فشار دهید.

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

<!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 sprites generator را در موتورهای جستجو سرچ کنید تا لیستی از ابزارهای کمکی برای css sprites نمایش داده شود. روش استفاده از این ابزارها بسیار ساده و یک شکل می‌باشد، بعد از وارد شدن به یکی از سایت‌ها، عکس‌های کوچک خود را وارد کنید، ابزارهای آنلاین خودشان عکس‌ها را کنار هم قرار داده و کدهای مربوط به آنها را به شما نمایش می‌دهند، حال تنها کاری که شما باید انجام دهید این است که خروجی گرفته شده از ابزارها را در سایت خود به شکل صحیح و در مکان مناسب قرار دهید.

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

برای CSS sprites کردن عکس‌های خود بهتر از فرمت عکس‌های کوچک PNG بوده و بکگراند آن نیز شفاف (transparent) باشد.

 

جمع‌بندی درباره مشکل Combine images using CSS sprites

با رشد روزافزون استفاده از موبایل، افزایش سرعت سایت به‌مراتب از اهمیت بیشتری برخوردار شده است. ازاین‌رو جلوگیری از تعداد درخواست‌های غیرضروری و کاهش ریکوئست‌های اضافی جدا از اینکه کمک زیادی به بهینه شدن سرور و بالا رفتن راندمان آن خواهد شد، تجربه کاربری مناسبی را برای بازدیدکنندگان سایت شما به ارمغان خواهد اورد، و به همین علت است که سایت‌های بزرگ داخلی و خارجی از چنین روش‌هایی استفاده می‌کنند، نمونه آن سایت دیجی کالا می‌باشد که از عکس ادغام شده زیر و به روش css sprites نزدیک به میلیون‌ها درخواست در روز را کم کرده است، ما فرض بر آن میگیریم که دیجی کالا هر روز نیم میلیون کاربر واردش می‌شود و اگر به جای روش css sprites بیایید هر عکس و ایکون زیر را در یک فایل جداگانه آپلود و استفاده کند (با فرض اینکه عکس زیر مثلا ۱۰۰ تصویر هست)، روزانه حدود ۵۰ میلیون درخواست فقط از سمت عکس و ایکون‌های زیر را باید سرورهای دیجی کالا پاسخگو باشند، ولی اگر همه ایکون‌ها همانند عکس زیر ادغام و یک واحد شده باشند، ۱۰۰ برابر به بهینه سازی سایت کمک کرده و به نیم میلیون درخواست کاهش پیدا میکند.

CSS sprites
عکس CSS sprites شده در دیجی کالا

این خطا باعث کاهش تعداد درخواست های HTTP هم می‌شود و شما اگر قصد دارید تعداد درخواست های سایت خود را در جهت بهینه سازی، کاهش دهید حتما مقاله رفع خطای Make fewer HTTP requests را هم بخوانید.

توجه توجه: ما یک دوره بسیار مفید و حرفه ای برای بهینه سازی حجم و اندازه عکس ها و همینطور سئو تصاویر به شکل اصولی برگزار کردیم، برای مشاهده سرفصل‌های دوره میتونید روی عکس زیر کلیک کنید:

آموزش کاهش حجم تصاویر بدون افت کیفیت

با مثال بالا خواستیم اهمیت این موضوع را به خوبی درک کنید که با رفع یک خطا چه میزان بالایی می‌توانید به سئو داخلی و سئو خارجی سایتتان کمک کنید، اگر سوالی داشتید حتما در انجمن میزفا مطرح کنید. این جلسه از آموزش GTmetrix هم به پایان رسید در جلسه بعد به معرفی خطای Defer parsing of JavaScript در pagespeed  گوگل میپردازیم. با ما همراه باشید.

برچسب ها

پوریا آریافر

اولین کسب و کار آنلاین خودم را در فیسبوک راه‌اندازی کردم و در سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال را داشتم. سپس وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت را دریافت کردم، در دوران خدمت سربازی مسئول بهینه سازی یک وبسایت خبری معتبر شدم و آشنایی با سئو را آموختم و در سال ۲۰۱۴ توانستم به رتبه ۴۰۰ الکسا نزدیک کنم. برخلاف میل درونی، وارد دانشگاه شدم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، در همان سال بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو را داشتم، که فروختم تا بتوانم تمرکز را فقط بر روی سئو بگذارم، فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌می‌گیرد، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کرده‌ام. در همه ابزارهای گوگل به جز adwords تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری را یادگیری و یاددادن می‌دانم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شده، می‌تواند چنین بستر مناسبی را فراهم کند. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم ...

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

‫22 نظرها

  1. سلام و خسته نباشید من طبق فیلمی که گذاشته بودید عکس 80 تا پرچم را در یک قاب spritepad قرار دادم و فایل آن را در هدر سایتم قرار دادم و اوکی شد ولی وقتی جتمتریکس را میزنم تعداد رکوئست هام کاهش نیافته و هنوز همان 80 تا ارور Combine images using CSS sprites میده به نظرتون چرا نشد مشکل کجاست ؟

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

  2. سلام و خسته نباشید من افزونه ی Gtranslate را نصب کردم و برای همین به تعداد پرچم ها من خطای Combine images using CSS sprites دارم . ممکنه راهنمایم کنید که من چگونه عکس این پرچم های کوچک از این افزونه را بگیرم و در این سایت های آماده در یک صفحه قرار دهم و این صفحه را در افزونه سایتم بگذارم که دیگه ای تعداد بالا خطا نده؟

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

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

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

    1. سلام علی جان. خوشحالیم مقاله مورد استفاده شما قرار گرفته.

  3. سلام توی وردپرس که از صفحه ساز ساخته شده چه طوری میشه این خطارو رفع کرد!!!

    1. سلام. اگر کدها در داخل خوده HTML باشه و در CSS نباشه قابل حل نیست. (البته هست ولی سخت میشه) ولی اگر صفحه ساز باشه یا هر قالب دیگر و در CSS عکس ها لود بشه قابل حل است.

  4. سلام جناب اریافر عزیز

    مقالات شما در کل وب فارسی فوق العاده است ممنون
    من با آموزش شما از ابزار انلاین یک فایل از عکس های کوچک ساختم ولی نمی دانم این فایل را کجا آپلود کنم یعنی تا ساختن خوب رفتم ولی بعدش نمی دونم چی کارش کنم این فایل ها را یا این فایلی که همه عکس ها در آن جمع شده اند ؟
    میشه راهنمایی کنیئد
    بازم ممنون از اسایت خوبتان

    1. سلام آقا/خانم پرورش قارچ، خواهش میکنم 😉
      این مورد رو در دوره جامع افزایش سرعت سایت گفتیم ولی شما میتونید با سماجت بیشتر عکس مورد نظر رو در مکان مناسب قرار بدید هر چند در این اموزش رایگان به شکل کلی هم در انتهای ویدیو اشاره کردم.

  5. سلام
    چطور میتونم بدونم مثلا یک فایل جاوا توی سایت در کدام صفحه ها استفاده شده که بتونم روش تغییر انجام بدم. چون سایت من با جوملا انجام شده و از نظر بهینه بودن میخوام روش کار کنم ولی نمیتونم فایلهایی رو که مشکل دارن پیدا کنم.؟!

    سپاس

    1. سلام
      در یک پست دیگر شما همین سوال رو کرده بودید، ممنون میشم هر سوال رو فقط یک بار بپرسید.

  6. سلام
    ممنون بابت مطلب تون
    چطور باید عکسی که کمباین کردیم و کد هارو در سایت قرار بدهیم؟
    در کدوم قسمت؟

    1. سلام
      خب ما در این مقاله به همین موضوع اشاره کردیم دیگه، مقاله رو ظاهرا خوب نخوندید
      اینکه در کدوم قسمت باید قرار بگیره بستگی به طراحی سایت داره ولی به شکل کلی در فایل های CSS قرار میدن
      البته در دوره افزایش سرعت به شکل عملی به این موضوع اشاره شده.

  7. ای کاش یک مثال تصویری و ویدیویی از این کار میگرفتین و میزاشتین عالی بود

    1. سلام
      مثالی که زدیم به ساده‌ترین بیان ممکن ذکر شده و بسیار شفاف هست، لطفا دوباره به دقت مطالعه فرمایید و سوالی داشتید مطرح کنید.
      درضمن بر روی افزایش سرعت لود سایت خود کار کنید چرا که به شدت کند می‌باشد.

پاسخی بگذارید

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

همچنین ببینید

بستن
دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر