آموزش رفع خطای Combine images using CSS sprites
از سری مقالات آموزش کامل سایت جی تی متریکس به رفع خطاهای سایت gtmetrix پرداختیم. در مقاله قبل به رفع خطای Avoid landing page redirects در سایت GTmetrix پرداختیم. امروز در بخش رفع خطاهای pagespeed به آموزش رفع ارور و خطای 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 sprite چیست
- روش استفاده از CSS sprites
* روش اول CSS sprites با استفاده از فتوشاپ (روش سخت)
* روش دوم CSS sprites با استفاده از ابزارهای آنلاین (روش ساده) - نتیجه گیری درخصوص مشکل Combine images using CSS sprites
خلاصهای از خطای Combine images using CSS sprites
نام: Combine images using CSS sprites
نوع: مربوط به عکس
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: ۸۷%
مقاله آموزش رفع خطای Minify CSS نیز کاملا مرتبط هست.
CSS sprites چیست
پیش ازاینکه به آموزش رفع خطای Combine images using CSS sprites بپردازیم بهتر است بامفهوم CSS sprite آشنا شویم.
بدانیم که CSS sprite چیست ؟
طبیعتا وقتی شما یک سایت را باز میکنید در هرصفحهای با یک یا چند عکس مواجه میشوید. مرورگر برای اینکه تصاویر سایت را باز نماید مجبور است که هر بار برای هر عکس یک درخواست به سرور ارسال کند و یک پاسخ که هم دریافت نماید. اگر تعداد بازدید کننده های سایت شما زیاد نباشد این موضوع خیلی اهمیتی پیدا نمیکند اما اگر تعداد بازدید کننده های سایت شما بالا باشد قطعا این موضوع مشکل ساز خواهد شد.
دلیل بوجود آمدن خطای Combine images using CSS sprites در سایت gtmetrix هم همین میباشد که با رفع خطای Combine images using CSS sprites این مشکل کاملا حل خواهد شد.
برای بهینه سازی تصاویر این روش یک روش بسیار مهم و کاربردی است. اکنون باید بگوییم که CSS sprites چیست و چگونه عمل میکند. CSS sprites یعنی ما تمام تصاویر را در یک تصویر واحد ترکیب نماییم و به کمک کد css به هر تصویر مختصات بدهیم. به این ترتیب وقتی شما یک صفحه از یک سایت را با چند عکس باز نمایید مرورگر فقط 1 بار به سرور درخواست ارسال میکند و یک تصویر واحد را فراخوانی میکند و چندین بار از قسمت های مختلف آن عکس استفاده میکند.
مقاله آموزش رفع خطای Inline small CSS و خطای Inline small JavaScript نیز کاربردی است.
مزایای CSS sprites چیست ؟
با انجام این روش سرعت بارگذاری سایت شما بسیار بیشتر میشود.
سرعت سایت یک موضوع بسیار با اهمیت است که باید حتما به آن توجه شود.
فراموش نکنید که کاربران سایت هایی را میپسندند که سرعت بالایی در باز شدن صفحات دارند.
نکته آخر هم اینکه سرعت بالای سایت باعث افزایش رتبه سایت در گوگل و موتورهای جستجو میشود.
css sprites چیست
روش استفاده از CSS sprites
پس ازاینکه متوجه شدیم css sprites چیست حال میخواهیم به آموزش روشهای رفع خطای Combine images using CSS sprites بپردازیم.
برای رفع خطای Combine images using CSS sprites دو روش را به شما معرفی خواهیم کرد. یکی از این روش ها استفاده از نرم افزارهایی مانند فتوشاپ است. شما میتوانید همه تصاویر خود را در فتوشاپ ادغام نمایید و در قالب یک تصویر خروجی بگیرید و بعد از آن کدنویسی را انجام دهید. روش دیگر اما استفاده از ابزارهای آنلاین برای رفع خطای Combine images using CSS sprites است. ابزارهای آنلاین تصاویر شما را ادغام مینمایند و پس از آن کد مربوط به هر بخش را برای استفاده به شما میدهند که میتوانید از آن کد در هر قسمتی از سایت که میخواهید استفاده نمایید.
1) رفع خطای CSS sprites به کمک فتوشاپ (روش سخت)
آموزش رفع خطای Combine images using CSS sprites به روش فتوشاپ کمی دشوارتر است. تمام تصاویری که میخواهید استفاده نمایید را در فتوشاپ باز نمایید و همه آنها را در یک تصویر واحد ادغام نمایید. هر تصویر را دریک قسمت قراردهید و از آن خروجی بگیرید. حال آن یک عکس را روی سایت خود (سرور) آپلود نمایید. به کمک کد css به هر یک از تصاویر مدنظرتان در آن یک تصویر میتواند هر زمان که خواستید تصویر مدنظر خود را فراخوانی نمایید.
لازم به ذکر است که این روش به همن سادگی نیست و اگر تعداد تصاویر زیاد باشد باید همه تصاویر را با دقت در فتوشاپ کنار هم قراردهید تا در هنگام فراخوانی با کد css به مشکل نخورید. بعنوان مثال به تصویر زیر دقت کنید، 6 لوگو در یک تصویر درکنار هم ادغام شدهاند، به این ترتیب ما یک تصویر را روی سرور آپلود میکنیم و مرورگر هم برای نمایش هر 6تصویر یکبار برای سرور درخواست ارسال و دریافت خواهد کرد.
آموزش رفع خطاهای سایت gtmetrix
مثال یک
سایت 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 را فشار دهید.
مثال دوم آموزش رفع خطای Combine images using CSS sprites
در مثال پایین از هر ۳ ایکون استفاده کردیم، به کدهای زیر توجه کنید:
<!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>
خروجی دستورات بالا را میتوانید در این لینک مشاهده کنید.
درست است که روش اول کمی سخت است اما با کمی تلاش قابل انجام است.
2) رفع خطای CSS sprites به کمک ابزارهای آنلاین (روش ساده)
برای آموزش رفع خطای Combine images using CSS sprites این روش بسیار ساده تر از روش اول است. در این روش شما کافیست به سایت یکی از ابزارهای آنلاین css sprites بروید. برای اینکار کافیست کلمه css sprites generator را جستجو نمایید و یکی از سایت های مرتبط را باز نمایید. روند کار اکثر این ابزارهای آنلاین به یک شکل است.
به این ترتیب که شما تصاویری که میخواهید را در این سایت ها آپلود میکنید و این ابزارها کلیه تصاویر شما را ادغام میکنند و کد مربوط به هرکدام از تصاویر را بصورت مجزا به شما میدهد. تنها کاری که شما نیاز است انجام دهید این است که کدهای دریافتی از ابزارهای آنلاین را در بخش های مختلف سایت خود قراردهید.
لیست برخی از ابزار های آنلاین برای css sprites :
spritepad.wearekiss.com
spritegen.website-performance.org
css.spritegen.com
www.spritecow.com
برای دریافت نتیجه مطلوب از CSS sprites بهتر است که تصاویر خود را با فرمت png و بدون بکگراند یا transparent استفاده کنید.
جمعبندی درباره آموزش رفع خطای Combine images using CSS sprites
همانطور که گفتیم افزایش سرعت سایت بسیار اهمیت دارد و امروزه به دلیل افزایش استفاده از موبایل سرعت باز شدن صفحات بیش از پیش اهمیت پیدا کرده است. بنابراین کاهش سرعت بارگذاری سایت میتواند به بازدید سایت شما بسیار کمک نماید. لذا با کاهش تعداد رکوئست های سمت سرور سرعت سایت شما زیاد میشود و بازدید از سایت شما نیز افزایش خواهد یافت. بسیار از سایت های داخلی و خارجی که جزو سایت های بزرگ و برند هستند همگی از این روش اسفاده مینمایند.
بعنوان مثال نمونه داخلی این موضوع، سایت دیجی کالا میباشد. دیجی کالا از روش css sprites برای استفاده از تصاویر داخل سایت استفاده نموده است. تصویر زیر عکسی است که سایت دیجی کالا از آن استفاده مینماید. همانطور که ملاحظه میکنید تقریبا حدود 100 تصویر در یک عکس ادغام شدهاند.
حال در نظر بگیرید که سایت دیجی کالا در روز حدود 500 هزار بازدید داشته باشد. سرورها باید روزانه برای 500 هزار نفر 100 درخواست ارسال و دریافت کنند. یعنی روزانه حدودا 50 میلیون درخواست فقط برای تصاویر به سرور ارسال میشود. در نظر بگیرید که با css sprites تعداد 100 عکس به 1 عکس تبدیل شده است. یعنی 100برابر کاهش در تعداد رکوئست ها و تبدیل 50 میلیون رکوئست به 500 هزار رکوئست.
عکس CSS sprites شده در دیجی کالا
پایان مقاله آموزش رفع خطای Combine images using CSS sprites
لازم به ذکر است که با آموزش رفع خطای Combine images using CSS sprites از سری مقالات آموزش رفع خطاهای سایت gtmetrix شما علاوه بر اینکه میتوانید رفع خطای Combine images using CSS sprites را انجام دهید با رفع این خطا بصورت اتوماتیک باعث کاهش HTTP رکوئست هم میشوید. برای کاهش تعداد رکوئست های سایت و بهینه سازی این بخش از سایت مقاله رفع خطای Make fewer HTTP requests را نیز مطالعه نمایید.
دیجی کالا را بعنوان مثال گفتیم تا اهمیت این موضوع را به خوبی درک نمایید.
مقاله آموزش رفع خطای Avoid CSS @import را حتما مطالعه نمایید.
با رفع این خطا میتوانید به میزان قابل توجهی سئوی سایت خود را بهبود ببخشید.
جهت حل مشکلات سایت خود، افزایش سرعت سایت و بهبود سئوی سایت با مشاوران و کارشناسان شرکت تبلیغاتی ماکان تماس حاصل فرمایید.
این جلسه از سری مقالات آموزش رفع خطاهای سایت gtmetrix هم به پایان رسید.
در جلسه بعد به معرفی خطای Defer parsing of JavaScript در pagespeed گوگل میپردازیم. با ما همراه باشید.
