s1r101

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

آغاز شده توسط: s1r101,

33 پست در این موضوع

ارسال شده در (ویرایش شده)

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

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

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 کنید

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

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

do.php?imgf=joomlaforum.ir_13706022321.jpg

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

do.php?imgf=joomlaforum.ir_13706022322.jpg

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

do.php?imgf=joomlaforum.ir_13706022333.jpg

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

do.php?imgf=joomlaforum.ir_13706024341.jpg

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

do.php?imgf=joomlaforum.ir_13706024342.jpg

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

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

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

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

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

Share this post

Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

ارسال شده در

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

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

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

1 کاربر پسند دیده است

Share this post

Link to post
Share on other sites

ارسال شده در

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

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

Share this post

Link to post
Share on other sites

ارسال شده در

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

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

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 کنید

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

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

do.php?imgf=joomlaforum.ir_13706022321.jpg

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

do.php?imgf=joomlaforum.ir_13706022322.jpg

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

do.php?imgf=joomlaforum.ir_13706022333.jpg

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

do.php?imgf=joomlaforum.ir_13706024341.jpg

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

do.php?imgf=joomlaforum.ir_13706024342.jpg

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

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

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

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

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

Share this post

Link to post
Share on other sites

ارسال شده در

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

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

Share this post

Link to post
Share on other sites

ارسال شده در

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

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

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

Share this post

Link to post
Share on other sites

ارسال شده در

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

Share this post

Link to post
Share on other sites

ارسال شده در

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

با سلام

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

Share this post

Link to post
Share on other sites

ارسال شده در

سلام

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

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

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

Share this post

Link to post
Share on other sites

ارسال شده در

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

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

Share this post

Link to post
Share on other sites

ارسال شده در

سلام

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

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

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

دمو قرار بدید

Share this post

Link to post
Share on other sites

ارسال شده در

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

Share this post

Link to post
Share on other sites

ارسال شده در

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

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

Share this post

Link to post
Share on other sites

ارسال شده در

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

do.php?imgf=joomlaforum.ir_13706024342.jpg

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

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

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

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

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

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

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

پبرانه پند

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

Share this post

Link to post
Share on other sites

ارسال شده در

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

Share this post

Link to post
Share on other sites

ارسال شده در

درود

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

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

up.....:13:

Share this post

Link to post
Share on other sites

ارسال شده در

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

Share this post

Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری
بازگشت به لیست عناوین تاپیک آموزشهای جوملا 1.7 و 2.5