خوش آمدید!

برای دریافت آخرین بروزرسانی‌های افزونه، استایل و ... نیازمند ثبت‌نام در انجمن می‌باشید تا با ما بروز بمانید!

ثبت نام!
آموزشهای وردپرس

WALKER

مدیر کل انجمن
تاریخ ثبت‌نام
11/13/18
نوشته‌ها
6,138
پسندها
5,556
امتیازها
113
محل سکونت
tehran
آنتی ویروس
fix-combine-images-using-css-sprites-600x600.png

همه ما با جی تی متریکس آشنا هستیم. با استفاده از این وب‌سایت می‌توانید سایت خود را از نظر سرعت و بهینه بودن برنامه‌نویسی تست کنید و نتیجه تست را بصورت حروف لاتین از A تا F دریافت کنید. البته A بهترین رتبه و F بدترین رتبه‌ای هست که می‌توانید دریافت کنید.

اما یکی از خطاهای معروف جی تی متریکس که همیشه به چشم می‌خورد، این خطاست:

Combine Images Using CSS Sprites
GTMetrix
و اما چطور باید خطای Combine Images Using CSS Sprites را حل کنیم؟! اصلا دلیل به‌وجود آمدن این خطا چیست؟

دلیل ارور Combine Images Using CSS Sprites

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

حالا فرض کنید در یک قالب از ۳۰ آیکون استفاده کرده‌اید و باید ۳۰ درخواست برای دریافت این ۳۰ آیکون کوچک به سمت سرور ارسال شود. یک فاجعه‌ی بزرگ‌تر که باید حتما حلش کنیم.

در نتیجه این خطا می‌گوید تصاویری که در قالب سایتتان از طریق CSS لود می‌شود را با یک تصویر لود کنید. مگر می‌شود؟ بله. بریم که حلش کنیم!

حل خطای Combine Images Using CSS Sprites

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

2988



2989

که البته این دو آیکون دو تا فایل مجزا هستند، این دو را بصورت یک فایل لود کنیم. به این شکل:

2990

حالا دیگه نیازی نیست که ۲ درخواست به سمت سرور ارسال شود تا دو فایل داشته باشیم. برای دریافت هر دو آیکون می‌توانیم یک درخواست به سمت سرور ارسال کنیم. هرچه Requestهایی که به سمت سرور ارسال می‌کنیم کمتر باشه در نتیجه سرعت بیشتری هم خواهیم داشت.

معمولا در تست‌های سرعت، با کاهش تعداد Requestها به راحتی می‌توانید سرعت سایت خود را تا ۳ ثانیه کاهش دهید و ۳ ثانیه زمان بسیار زیادی برای منتظر ماندن تا لود یک صفحه هست. پس کاهش تعداد Requestهای سایت را فراموش نکنید.

اما چطور آیکون‌ها را بصورت جداگانه استفاده کنیم؟

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

برای اینکار کافیست کمی دست به CSS شویم. یعنی با استفاده از سی اس اس مشخص کنیم که این قسمت از تصویر را برای این بخش از سایت استفاده کن و مابقی تصویر نمایش داده نشود. شروع می‌کنیم به سی اس اس. اگر با سی اس اس آشنایی دارید این کار بسیار ساده هست. اما اگر با سی اس اس آشنایی ندارید پیشنهاد می‌کنم از یک طراح سایت کمک بگیرید یا آموزش طراحی سایت با وردپرس را ببینید. (یکم تبلیغ هم بد نیست.) 🙂

جدا کردن بخشی از تصویر در CSS


ابتدا حتما یک طول و عرض برای بخشی که می‌خواهید از تصویر به عنوان پس زمینه آن بخش استفاده کنید، مشخص کنید. مثلا:

کد:
width:32px;
height:32px;

حالا شروع می‌کنیم Background دادن به آن بخش. بعد از طول و عرض پس زمینه را مشخص می‌کنیم به این شکل:

کد:
background: url(social.gif) 0 2px;

دو مقدار 0 و 2 مشخص می‌کنند که در طول و ارتفاع تصویر Combine شده. (یعنی تصویری که تمام آیکون‌ها را در آن قرار دادیم.) چه مقدار به سمت x و y حرکت کنیم.

مثلا اگر آیکون شما از ۵۰ پیکسل سمت چپ تصویر Combine شده شروع به نمایش داده شدن می‌کند، پس باید مقدار 0 را به 50 تغییر دهید و همین کار را برای y هم انجام دهید.

این‌کار باید برای تمام بخش‌هایی که آيکون‌ها در آن استفاده شده اند، استفاده کنید. سپس کش سایت را خالی کنید و سایت را با استفاده از جی تی متریکس دوباره تست کنید.

نتیجه باید به این شکل باشد:

2991

Combine Images Using CSS Sprites

نکته: اگر از افزونه وردپرس راکت استفاده کنید این خطا بصورت خودکار توسط افزونه حل می‌شود.
 
  • Love
واکنش‌ها[ی پسندها]: Admin
ارسال کننده موضوعات مشابه انجمن پاسخ ها تاریخ
WALKER آموزش آموزش رفع خطای Specify a character set early در GTmetrix آموزشهای وردپرس 0
WALKER آموزش آموزش رفع خطای Specify a cache validator و Configure entity tags آموزشهای وردپرس 0
WALKER آموزش آموزش رفع خطای Avoid AlphaImageLoader filter در GTmetrix آموزشهای وردپرس 0
WALKER آموزش آموزش رفع خطای افزونه های وردپرس آموزشهای وردپرس 0
WALKER آموزش آموزش رفع مشکل نصب افزونه و قالبهای وردپرس آموزشهای وردپرس 0
masoudfn آموزش تنظیمات درگاه پرداخت رایان پی آموزشهای وردپرس 0
grrrh درخواست آموزش ionCube آموزشهای وردپرس 1
M مباحث و مشکلات آموزش نصب وب سرور Apache مباحث و مشکلات سیستم عامل ها 0
aliilapro آموزش آموزش کرک یا نال قالب جی نیوز آموزشهای وردپرس 0
arezoshomali مسیر آموزش برنامه نویسی اندروید را بشناسید آموزش های برنامه نویسی 3
lordmehdi درخواست آموزش قرار دادن گروه کاربری در پائین انجمن آموزشهای زنفورو 6
mona.habibizadeh آموزش همه کلیدهای میانبر در محیط Gmail اخبار 0
E آموزش ترفند تبدیل اپلیکیشن فروشگاهی به کاتالوگ گفتگوی آزاد 0
sslri آموزش آموزش گرفتن تیک آبی اکانت اینستاگرام آموزش های نرم افزار 0
maede آموزش افزودن ابزارک (تولبار) به ادیتور متن در چتروم پشتیبانی زنفورو 2
afshin171 درخواست آموزش تغییر دامنه زنفور آموزشهای زنفورو 1
sslri آموزش آموزش رایگان فارسی سازی قالب و افزونه وردپرس آموزشهای وردپرس 1
afshin171 درخواست آموزش راست چین و فارسی کردن قالب وردپرس آموزشهای وردپرس 3
afshin171 درخواست افزونه یا آموزش براس سئو کردن درخواست قالب و افزونه 0
aliilapro آموزش آموزش غیرفعال کردن اپدیت ویندوز 10 آموزش های سیستم عامل ویندوز 0
alirahmani7443 راهنمایی در مورد قالب مرکز آموزش وردپرس قالب های وردپرس 1
Admin آموزش آموزش فعالسازی جستجوی پیشرفته در دسکتاپ ویندوز 10 آموزش های سیستم عامل ویندوز 0
sslri آموزش آموزش کامل ساخت شماره مجازی تلگرام رایگان آموزش های پرمیوم 1
P آموزش دسترسی به [ شبکه TOR] با دو کلیک آموزش های سیستم عامل ویندوز 0
F آموزش رایگان سئو وردپرس آموزشهای وردپرس 1
sslri نرم افزار دانلود ربات کامنت گذار در سایت ها + آموزش ویدئویی درخواست و دانلود نرم افزار 2
WALKER آموزش آموزش افزونه W3 Total Cache برای افزایش سرعت وردپرس آموزشهای وردپرس 0
soheilnew درخواست آموزش ساخت گروه کاربری vip با قابلیت پرداخت پشتیبانی زنفورو 0
A آموزش طراحی سایت با وردپرس آموزشهای وردپرس 0
WALKER آموزش آموزش تصویری قفل کردن کامپیوتر از راه دور در ویندوز 10 توسط Dynamic Lock آموزش های سیستم عامل ویندوز 0
WALKER آموزش آموزش تغییر فونت پیش فرض ویندوز 10 آموزش های سیستم عامل ویندوز 0
WALKER آموزش آموزش فعال سازی تم Light ویندوز 10 آموزش های سیستم عامل ویندوز 0
WALKER آموزش آموزش غیرفعال کردن کورتانا در ویندوز 10 آموزش های سیستم عامل ویندوز 0
M آموزش طراحی اپ برای ساعت اپل اخبار 1
A آموزش هک برنامه subcake اندروید با لاکی پچر آموزش ها 0
M آموزش استفاده و شخصی سازی Action Center در ویندوز 10 آموزش های نرم افزار 0
WALKER آموزش آموزش نمایش نقشه گوگل در سایت آموزشهای وردپرس 0
M آموزش ساخت واترارک با استفاده از نرم افزار Arclab Watermark Studio آموزش های نرم افزار 0
M آموزش بالا بردن امنیت گوشی با استفاده از نرم‌افزار Lookout Security Antivirus اندروید آموزش های نرم افزار 1
M آموزش رجیستر کردن IDM (کرک) آموزش های نرم افزار 0
M آموزش ساخت اکانت Origin آموزش های نرم افزار 0
M آموزش ساخت اکانت Steam درخواست کرک و فعال ساز نرم افزارها 0
M آموزش نصب بازی Fortnite آموزش های نرم افزار 0
WALKER آموزش آموزش نصب چایلد تم وردپرس آموزشهای وردپرس 0
saeedGeo آموزش فعال سازی ssl رایگان بر روی دامنه آموزش ها 0
WALKER آموزش آموزش نصب و راه اندازی افزونه MemberPress آموزشهای وردپرس 0
WALKER آموزش آموزش راه اندازی و تنظیم افزونه امنیتی Wordfence آموزشهای وردپرس 0
WALKER آموزش آموزش کار با افزونه Polylang آموزشهای وردپرس 0
TheFlash آموزش دانلود برخی از برنامه های پولی بازار و مارکت های دیگر (تصویری) آموزش های پرمیوم 0
A آموزش آموزش دانلود از سایت فیلیمو با افزونه مرورگر فایرفاکس آموزش های پرمیوم 1

موضوعات مشابه

بالا