آموزش کامل و راحت css-sprites برای افزایش سرعت وب سایت (همراه با تصویر)

[s1r101 15]

با سلام خدمت همه کاربران عزیز

ابتدا یه توضیحی در مورش بدم

css-sprites چیست؟

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

مرورگر برای بارگذاری هر کدام از اجزای صفحه (مانند تصاویر ، فایل های CSS و جاوا اسکریپت و…) یک درخواست (Request) به سرور ارسال می کند تا سرور ، فایل درخواستی را برای مرورگر بفرستد. ارسال هر Request و دریافت پاسخ آن ، بخشی از زمان بارگذاری صفحه است.

هرچه تعداد Request ها کمتر باشد ، زمان بارگذاری صفحه کمتر می شود. به جای چند فایل CSS بهتره از یک فایل استفاده کنیم. به جای چند فایل JS میتونیم از یک فایل استفاده کنیم ؛ میتونیم تصاویری که به عنوان بکگراند المنت ها در صفحه استفاده میکنیم را در یک تصویر قرار بدیم.

در حالت عادی ، با استفاده از تگ <img> یا در بکگراند المنت ها این تصاویر رو در صفحه قرار میدهیم.

مرورگر برای بارگذاری ۱۰ فایل، ۱۰ Request ارسال میکند. اگر این ۱۰تصویر در یک تصویر قرار بگیرند، مرورگر برای بارگذاری صفحه، ۹ درخواست کمتر ارسال می کند و تمام تصاویر با بارگذاری یک فایل در قسمت های مختلف صفحه قرار می گیرند و با این کار هم حجم عکس ها کمتر میشه، و همین طور تعداد Request ها.

امروز قصد معرفی ابزار آنلاین spriteme.org رو دارم که خیلی خیلی راحت با محیط کاملا گرافیکی سایت تمام تصاویر شما رو به صورت sprites در میاره میدونم که خیلی ها این مشکل رو داشتن سعی میکنم آموزشم ساده و روان برای همه باشه و بعد از انجام دادن متوجه تغییر سرعت وبسایت و کم کردن درخواست ها خواهید شد!حتما تست کنید!

تمامی کار هارو روی همین انجمن انجام میدم

ابتدا شما باید این کار هارو بکیند

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

برای این کار ابتدا به آدرس SpriteMe برید و یه لینک هستش به نام sprite me ;که کنارش نوشته drog this link روی sprite me کلیک راست کنید و bookmark کنید

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

مانند من که روی انجمن جوملا فروم روی اون بوک مارک کلیک کردم و کادر جاوا به طور اتوماتیک سمت راست قالب اضافه شد!

2.حالا طبق عکس زیر بر روی make all کلیک کنید

3.بعد از کلیک شما میبینید که به شما عکس هایی که در سایتتون امکان مخلوط کردن اون وجود داره در یک فایل png بهتون تحویل میده و اونارو روی هاستتون آپلود کنید

4.سپس روی گزینه export css مانند تصویر زیر کلیک کنید

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

تذکر:لطفا قبل از هر کاری از فایل های css خود بکاپ بگیرید

نکته:میتونید از افزونه firebug در فایر فاکس برای دیدن تغییرات هم استفاده کنید و تمامی کد هارو تو یه فایل php ذخیره کنید اون فایل رو بدید gtmetrix و بعد متوجه سرعت فوق العادتون میشید

فقط به یاد داشته باشید که هر جا که عکس ها رو آپلود کردید به همون جا آدرس بدید و اشتباهی آدرس ندید

امیدوارم این مقاله مفید واقع شده باشه!

ویرایش شده در خرداد 92 توسط s1r101

[s1r101 15]

شما با css-sprites کردن تصاویر خودتون میتونید هم سئو خودتون رو بهبود ببخشید هم سرعت وب سایت خودتون رو از این رو به اون رو کنید و هم تعداد درخواست های سایتتون رو کم کنید که با یه تیر چند نشون میزنید!

:ad54ad::ad54ad::ad54ad::ad54ad:

تشکر یادتون نره!

[raminramz 12]

آقا خیلی خیلی منونم خیلی وقت بود دنبالش بودم اما خیلی سخت بود این کار اما دیگه با این روش مثل هلو خوردنه!

عالی بود من انجام دادم سرعت سایتم 40 درصد بهتر شد!!!

[aligoli 12]

با سلام خدمت همه کاربران عزیز

ابتدا یه توضیحی در مورش بدم

css-sprites چیست؟

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

مرورگر برای بارگذاری هر کدام از اجزای صفحه (مانند تصاویر ، فایل های css و جاوا اسکریپت و…) یک درخواست (request) به سرور ارسال می کند تا سرور ، فایل درخواستی را برای مرورگر بفرستد. ارسال هر request و دریافت پاسخ آن ، بخشی از زمان بارگذاری صفحه است.

هرچه تعداد request ها کمتر باشد ، زمان بارگذاری صفحه کمتر می شود. به جای چند فایل css بهتره از یک فایل استفاده کنیم. به جای چند فایل js میتونیم از یک فایل استفاده کنیم ؛ میتونیم تصاویری که به عنوان بکگراند المنت ها در صفحه استفاده میکنیم را در یک تصویر قرار بدیم.

در حالت عادی ، با استفاده از تگ <img> یا در بکگراند المنت ها این تصاویر رو در صفحه قرار میدهیم.

مرورگر برای بارگذاری ۱۰ فایل، ۱۰ request ارسال میکند. اگر این ۱۰تصویر در یک تصویر قرار بگیرند، مرورگر برای بارگذاری صفحه، ۹ درخواست کمتر ارسال می کند و تمام تصاویر با بارگذاری یک فایل در قسمت های مختلف صفحه قرار می گیرند و با این کار هم حجم عکس ها کمتر میشه، و همین طور تعداد request ها.

امروز قصد معرفی ابزار آنلاین spriteme.org رو دارم که خیلی خیلی راحت با محیط کاملا گرافیکی سایت تمام تصاویر شما رو به صورت sprites در میاره میدونم که خیلی ها این مشکل رو داشتن سعی میکنم آموزشم ساده و روان برای همه باشه و بعد از انجام دادن متوجه تغییر سرعت وبسایت و کم کردن درخواست ها خواهید شد!حتما تست کنید!

تمامی کار هارو روی همین انجمن انجام میدم

ابتدا شما باید این کار هارو بکیند

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

برای این کار ابتدا به آدرس spriteme برید و یه لینک هستش به نام sprite me ;که کنارش نوشته drog this link روی sprite me کلیک راست کنید و bookmark کنید

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

مانند من که روی انجمن جوملا فروم روی اون بوک مارک کلیک کردم و کادر جاوا به طور اتوماتیک سمت راست قالب اضافه شد!

2.حالا طبق عکس زیر بر روی make all کلیک کنید

3.بعد از کلیک شما میبینید که به شما عکس هایی که در سایتتون امکان مخلوط کردن اون وجود داره در یک فایل png بهتون تحویل میده و اونارو روی هاستتون آپلود کنید

4.سپس روی گزینه export css مانند تصویر زیر کلیک کنید

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

تذکر:لطفا قبل از هر کاری از فایل های css خود بکاپ بگیرید

نکته:میتونید از افزونه firebug در فایر فاکس برای دیدن تغییرات هم استفاده کنید و تمامی کد هارو تو یه فایل php ذخیره کنید اون فایل رو بدید gtmetrix و بعد متوجه سرعت فوق العادتون میشید

فقط به یاد داشته باشید که هر جا که عکس ها رو آپلود کردید به همون جا آدرس بدید و اشتباهی آدرس ندید

امیدوارم این مقاله مفید واقع شده باشه!

برای اولین بار هست در محیط جوملا مشاهده میکنم نکات seo و بهینه سازی مناسب آموزش و ارایه داده میشه، امیدوارم بحث های بیشتری در مورد اولویت ها و عوامل این مورد ایجاد کنید.

[s1r101 15]

آقا علی بنده خدا مهندس مرادی این همه مقالات مفید میزارن

چشم انشاء ا... در زمینه ای دیگه و کمیاب هم مقاله های جدید میزارم

[aligoli 12]

آقا علی بنده خدا مهندس مرادی این همه مقالات مفید میزارن

چشم انشاء ا... در زمینه ای دیگه و کمیاب هم مقاله های جدید میزارم

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

[elme32 10]

دوست من عکس های آموزشی وجود نداره ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

[reza.sh 19]

عکس تمامی موجود هستند

[jao 11]

چرا همه عکس های داخل سایت رو شامل نمیشه ؟

[s1r101 15]

چرا همه عکس های داخل سایت رو شامل نمیشه ؟

با سلام

منظورتان را واضح تر بگوید.همه 5 عکس واضح هستند!

[ali09366 13]

سلام

بنده وقتی داخل سایتم گزنه make all رو میزنم هیچ اتفاقی نمیوفته !! یعنی عکسی رو با عکس دیگه ترکیب نمیکنه

ولی توی سایت های دیگه کار میکنه

این بخاطر چیست ؟

[saber 208]

این سایت عکسهایی رو که امکان یکپارچه شدن داشته باشن به هم پیوند میده نه همه تصاویر رو

خودش بررسی میکنه تصاویری رو که برای قالب هستن و امکان یکپارچه شدن دارن پیوند میده

[s1r101 15]

سلام

بنده وقتی داخل سایتم گزنه make all رو میزنم هیچ اتفاقی نمیوفته !! یعنی عکسی رو با عکس دیگه ترکیب نمیکنه

ولی توی سایت های دیگه کار میکنه

این بخاطر چیست ؟

دمو قرار بدید

[ali09366 13]

خدمت شما :

پایگاه اینترنتی مسجد جامع شهر گرگاب

[s1r101 15]

تو توضیحاتش گفته که میتونید با زدن گزینه new sprite و با افزونه فایر باگ در فایر فاکس عکس هایی که مد نظرتونه رو دراپ کنید و sprite بسازید که متاسفانه درگیر امتحانات دانشگاه هستم و وقت نکردم ترجمه کنم اگه خودتون میتونید برید ببینید ماجرا از چه قراره!

[s1r101 15]

این تصاویر در سایتتون قابلیت sprite داره

• http://www.inddeco.ir/components/com_jcomments/tpl/default/images/jc_blog_rtl.gif
  
• http://www.inddeco.ir/modules/mod_p30prayertime/images/flasher.gif
  
• http://www.inddeco.ir/modules/mod_p30prayertime/images/s-flash.gif
  
• http://www.inddeco.ir/templates/gorgabweb/images/menuseparator.png
  
• http://www.inddeco.ir/templates/gorgabweb/images/nav.png
  
• http://www.inddeco.ir/templates/gorgabweb/images/system/emailButton.png
  
• http://www.inddeco.ir/templates/gorgabweb/images/system/printButton.png
  

فایر باگ نصب کنید و تجربه کنید!

[pirane 10]

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

تذکر:لطفا قبل از هر کاری از فایل های css خود بکاپ بگیرید

نکته:میتونید از افزونه firebug در فایر فاکس برای دیدن تغییرات هم استفاده کنید و تمامی کد هارو تو یه فایل php ذخیره کنید اون فایل رو بدید gtmetrix و بعد متوجه سرعت فوق العادتون میشید

فقط به یاد داشته باشید که هر جا که عکس ها رو آپلود کردید به همون جا آدرس بدید و اشتباهی آدرس ندید

امیدوارم این مقاله مفید واقع شده باشه!

درود به دوستان و خسته نباشید

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

اینم آدرس سایت

پبرانه پند

یا خودتون زحمتشو بکشید یه چک کنید [ATTACH=CONFIG]4038[/ATTACH]

[pirane 10]

دوستان کسی نبود کمک کنه

[e-maqale 10]

میشه یکی که کامل انجام داده یه فیلم آموزشی تهیه کنه ؟؟

[e-maqale 10]

توی تعویض کدهای سی اس اس مشکل دارم

یکی فیلم آموزشی میذاره ؟

[Farzadtehran1390 10]

درود

وقتی کدهای css جدید رو میزارم قالب به هم میریزه

کسی میتونه کمک کنه ؟

[Farzadtehran1390 10]

درود

وقتی کدهای css جدید رو میزارم قالب به هم میریزه

کسی میتونه کمک کنه ؟

up.....:13:

[irantej 10]

من هم همین مشکل رو دارم

[reyhani 10]

سلام من در روي سايتم روي اسپريت مي كليك مي كنم مي ره تو خود سايت و به سايتم منتقل نمي شه آيا من دارم راه رو اشتباه مي رم؟

[reyhani 10]

كسي راه حلي براي من تازه كار داره؟