تسريع موقعك باستخدام CSS Sprites

ويب spritemaster

أكتب عن سرعة الصفحة قليلاً على هذا الموقع وهي جزء مهم من التحليل والتحسينات التي نجريها على مواقع عملائنا. بصرف النظر عن الانتقال إلى خوادم قوية واستخدام أدوات مثل شبكات توصيل المحتوى، هناك عدد من تقنيات البرمجة الأخرى التي يمكن لمطور الويب العادي استخدامها.

يبلغ الآن معيار ورقة الأنماط المتتالية الأصلية أكثر من 15 عامًا. كان CSS تطورًا مهمًا في تطوير الويب لأنه فصل المحتوى عن التصميم. انظر إلى هذه المدونة وأي مدونة أخرى وستجد غالبية الاختلافات في التصميم ببساطة في ورقة الأنماط المرفقة. تعتبر أوراق الأنماط مهمة أيضًا لأنها مخزنة محليًا في ذاكرة تخزين مؤقت داخل متصفحك. نتيجة لذلك ، مع استمرار الأشخاص في زيارة موقعك ، لا يقومون بتنزيل ورقة أنماط في كل مرة ... محتوى الصفحة فقط.

أحد عناصر CSS التي غالبًا ما تكون غير مستغلة هي العفاريت CSS. عندما يزور أحد المستخدمين موقع الويب الخاص بك ، قد لا تدرك أنهم لا يقدمون ببساطة طلبًا واحدًا للصفحة. هم تقديم طلبات متعددة... طلب ​​للصفحة ، لأي أوراق أنماط ، لأي ملفات JavaScript مرفقة ، ثم كل صورة. إذا كان لديك موضوع يحتوي على سلسلة من الصور للحدود وأشرطة التنقل والخلفيات والأزرار وما إلى ذلك ... يجب على المتصفح أن يطلب كل واحدة على حدة من خادم الويب الخاص بك. ضاعف ذلك بآلاف الزوار ويمكن أن يكون ذلك عشرات الآلاف من الطلبات المقدمة إلى خادمك!

وهذا بدوره يؤدي إلى إبطاء موقعك. أ يمكن أن يكون لموقع الويب البطيء تأثير كبير على التفاعل والتحويلات التي يصنعها جمهورك. الإستراتيجية التي يستخدمها مطورو الويب المتميزون هي وضع كل الصور في ملف واحد ... يسمى أ شبح. بدلاً من تقديم طلب لكل صورة من صور ملفك ، لا يلزم الآن سوى أن يكون هناك طلب واحد لصورة كائن واحد!

يمكنك أن تقرأ عنها كيف يعمل CSS Sprites في CSS-Tricks or سحق المجلة CSS العفريت بريد. وجهة نظري ليست أن أوضح لك كيفية استخدامها ، فقط أنصحك للتأكد من أن فريق التطوير لديك يدمجها في الموقع. يوضح المثال الذي توفره CSS Tricks 10 صور مكونة من 10 طلبات وتضيف ما يصل إلى 20.5 كيلوبايت. عندما يتم جمعها في كائن واحد ، يكون طلب واحد بحجم 1 كيلوبايت! لقد انتهى الآن طلب الذهاب والعودة وأوقات الاستجابة لـ 9 صور وتم تقليل كمية البيانات بأكثر من 30٪. ضاعف ذلك في عدد الزوار على موقعك وستحلق بالفعل بعض الموارد!

جلوبالنافإن أجهزة آبل شريط التنقل هو مثال رائع. يحتوي كل زر على عدد قليل من الحالات ... سواء كنت في الصفحة أو خارج الصفحة أو بالماوس فوق الزر. تحدد CSS إحداثيات الزر وتقدم منطقة الحالة الصحيحة لمتصفح المستخدمين. يتم طي كل هذه الحالات معًا في رسم واحد - ولكن يتم عرضها حسب المنطقة كما هو محدد في ورقة الأنماط.

إذا كان المطورون لديك يحبون الأدوات ، فهناك الكثير من الأشياء التي يمكن أن تساعدهم ، بما في ذلك إطار عمل البوصلة CSS, طلب تخفيض لـ ASP.NET ، CSS-Spriter لروبي ، CSSSprite النصي لبرنامج Photoshop ، سبرايت باد, سبرايت, سبرايت كاو, زيروسبريتس, مولد العفريت CSS الخاص بمشروع فوندو, سبرايت ماستر ويب، و ال سبرايت مي Bookmarklet.

لقطة شاشة من سبرايت ماستر ويب:
ويب spritemaster

Martech Zone لا تستخدم صور الخلفية في جميع أنحاء موضوعها ، لذلك لا يتعين علينا نشر هذه التقنية في الوقت الحالي.

2 تعليقات

  1. 1

    انتظر ... أليست المجموعة بأكملها "صورة" (أو "طائرة") ، وكل صورة فرعية (أو مجموعة فرعية من الصور في حالة الصور المتحركة أو المتغيرة بشكل تفاعلي) هي "كائن"؟

    ربما تمت إعادة تسمية الأشياء منذ آخر مرة تعاملت فيها مع هذا النوع من الأشياء ، لكن كان بإمكاني أن أقسم أن Sprite هو العنصر الذي انتهى به الأمر ليتم عرضه ، وليس جدول البيانات الضخمة الذي تم سحبه منه.

    ("جدول Sprite"… هل كان ذلك صحيحًا؟)

    • 2

      قد نتحدث عن شيئين مختلفين ، مارك. باستخدام CSS ، يمكنك تحديد "الجزء" من ملف الصورة لعرضه باستخدام الإحداثيات. يتيح لك هذا وضع كل صورك في "كائن" واحد ثم الإشارة فقط إلى المنطقة التي ترغب في عرضها باستخدام CSS.

ما رأيك؟

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.