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

وب spritemaster

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

استاندارد صفحه اصلی Cascading Style اکنون بیش از 15 سال دارد. CSS یک تکامل مهم در توسعه وب بود زیرا محتوا را از طراحی جدا می کرد. به این وبلاگ و هر وبلاگ دیگری نگاه کنید و اکثر تفاوت های سبک در صفحه سبک پیوست شده است. صفحه های سبک نیز مهم هستند زیرا در مرورگر شما به صورت محلی ذخیره می شوند. در نتیجه ، وقتی مردم به سایت شما مراجعه می کنند ، هر بار یک صفحه سبک بارگیری نمی کنند ... فقط محتوای صفحه.

یکی از عناصر CSS که اغلب از آن کم استفاده می شود ، هستند CSS Sprites. هنگامی که یک کاربر از وب سایت شما بازدید می کند ، ممکن است متوجه نشوید که او به سادگی یک درخواست برای صفحه ارائه نمی دهد. آنها چندین درخواست کنید… یک درخواست برای صفحه ، برای هر سبک سبک ، برای هر فایل جاوا اسکریپت پیوست شده ، و سپس هر تصویر. اگر موضوعی دارید که دارای مجموعه ای از تصاویر برای حاشیه ها ، میله های ناوبری ، پس زمینه ، دکمه ها و غیره است ... مرورگر باید هر یک را یک بار از وب سرور شما بخواهد. این را در هزاران بازدید کننده ضرب کنید و این می تواند ده ها هزار درخواست از سرور شما باشد!

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

شما می توانید اطلاعات بیشتر در مورد نحوه کار CSS Sprites در CSS-Tricks or مجله Smashing's CSS Sprite پست. هدف من این نیست که به شما نحوه استفاده از آنها را نشان دهم ، فقط به شما توصیه می کنم که تیم توسعه خود را در سایت بگنجانید. مثالی که CSS Tricks ارائه می دهد ، 10 تصویر را نشان می دهد که 10 درخواست است و حداکثر 20.5 کیلوبایت را جمع می کند. هنگامی که در یک روح جمع می شود ، این است 1 درخواست که 13 کیلوبایت است! زمان درخواست رفت و برگشت و زمان پاسخگویی برای 9 تصویر اکنون از بین رفته و میزان داده ها بیش از 30 درصد کاهش یافته است. این را در تعداد بازدیدکنندگان سایت خود ضرب کنید و واقعاً برخی منابع را تراشید!

globalnavLa سیب نوار پیمایش یک مثال عالی است. هر دکمه چند حالت دارد… چه در صفحه باشید ، چه از صفحه خارج شوید یا از روی دکمه استفاده کنید. CSS مختصات دکمه را تعریف می کند و منطقه وضعیت صحیح را به مرورگر کاربران ارائه می دهد. همه این حالت ها در یک نمودار واحد جمع می شوند - اما منطقه به منطقه نشان داده می شوند همانطور که در صفحه سبک مشخص شده است.

اگر توسعه دهندگان شما ابزار را دوست دارند ، یک تن وجود دارد که می تواند به آنها کمک کند ، از جمله چارچوب CSS قطب نما, درخواست کاهش برای ASP.NET ، CSS-Spriter برای روبی ، اسکریپت CSSSprite برای فتوشاپ ، SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondue's CSS Sprite Generator, وب سایت Sprite Master، و SpriteMe نشانک

عکس از وب سایت Sprite Master:
وب spritemaster

Martech Zone از تصاویر پس زمینه در سرتاسر تم خود استفاده نمی کند ، بنابراین در حال حاضر نیازی به استفاده از این روش نداریم.

2 نظرات

  1. 1

    صبر کنید ... آیا کل مجموعه "تصویر" (یا "صفحه") نیست و هر زیر تصویر (یا زیر گروه تصاویر در مورد تصاویر متحرک یا تغییر تعاملی) "روح" نیست؟

    شاید از آخرین باری که این نوع کارها را انجام داده ام موارد دیگری تغییر نام داده است اما نمی توانم قسم بخورم که Sprite عنصری بود که در نهایت نمایش داده شد ، نه جدول داده های بزرگی که از آن بیرون کشیده شد.

    ("میز Sprite" ... اینطور نبود؟)

    • 2

      ممکن است ما در مورد دو چیز متفاوت صحبت کنیم ، مارک. با استفاده از CSS ، شما می توانید با استفاده از مختصات مشخص کنید کدام بخش از یک فایل تصویری نمایش داده شود. با این کار می توانید تمام تصاویر خود را در یک "sprite" قرار دهید و سپس فقط به ناحیه ای که می خواهید با CSS نمایش داده شود اشاره کنید.

شما چه فکر میکنید؟

این سایت از Akismet برای کاهش هرزنامه استفاده می کند. بدانید که چگونه نظر شما پردازش می شود.