CSS Sprites bilan saytingizni tezlashtirish

spritemaster veb

Men ushbu saytda sahifalar tezligi haqida ozgina yozaman va bu bizning mijozlarimiz saytlarini tahlil qilish va takomillashtirishning muhim qismidir. Kuchli serverlarga o'tish va shunga o'xshash vositalardan tashqari Mazmun va tarqatish tarmoqlari, o'rtacha veb-ishlab chiquvchi foydalanishi mumkin bo'lgan bir qator boshqa dasturlash texnikalari mavjud.

Cascading Style Sheet uchun standart 15 yoshdan oshgan. CSS veb-ishlab chiqishda muhim evolyutsiya bo'ldi, chunki u tarkibni dizayndan ajratdi. Ushbu blogga va boshqalarga qarang va uslublar farqining aksariyati shunchaki biriktirilgan uslublar jadvalida. Stylesheets ham muhimdir, chunki ular sizning brauzeringizdagi keshda mahalliy sifatida saqlanadi. Natijada, odamlar saytingizga tashrif buyurishni davom etar ekan, ular har safar uslublar varag'ini yuklab olishmayapti ... faqat sahifa mazmuni.

Tez-tez ishlatilmaydigan CSS elementlaridan biri CSS Sprite. Agar foydalanuvchi veb-saytingizga tashrif buyurganida, ular shunchaki sahifa uchun bitta so'rov yuborayotganligini tushunmasligingiz mumkin. Ular bir nechta so'rovlarni yuboring… Sahifa, har qanday uslublar jadvallari, biriktirilgan JavaScript-fayllar va keyin har bir rasm uchun so'rov. Agar sizda chegaralar, navigatsiya panellari, orqa fon rasmlari, tugmalar va boshqalar uchun bir qator rasmlar mavjud bo'lsa ... brauzer veb-serveringizdan har birini birma-bir so'rashi kerak. Buni minglab mehmonlarga ko'paytiring va bu sizning serveringizga o'n minglab so'rovlar bo'lishi mumkin!

Bu, o'z navbatida, saytingizni sekinlashtiradi. A sekin sayt qo'shilish va konversiyalarga keskin ta'sir ko'rsatishi mumkin tomoshabinlaringiz yaratadigan narsalar. Ajoyib veb-ishlab chiquvchilar foydalanadigan strategiya barcha rasmlarni bitta faylga joylashtirishdir ... a deb nomlangan sprite. Har bir fayl rasmingiz uchun so'rov qilish o'rniga, endi bitta sprite rasm uchun bitta so'rov bo'lishi kerak!

O'qishingiz mumkin CSS Sprites CSS-Tricks-da qanday ishlaydi or Smashing Magazine CSS Sprite post. Mening maqsadim ulardan qanday foydalanishni ko'rsatish emas, balki sizning rivojlanish guruhingiz ularni saytga qo'shilishini ta'minlash uchun sizga maslahat berishdir. CSS Tricks taqdim etgan misolda 10 ta so'rovdan iborat bo'lgan va 10Kb gacha bo'lgan 20.5 ta rasm ko'rsatilgan. Bitta spritega yig'ilganda, bu 1kb bo'lgan 13 ta so'rov! 9 ta rasm uchun sayohat uchun so'rov va javob berish muddati tugadi va ma'lumotlar miqdori 30% dan kamqa kamaydi. O'zingizning saytingizga tashrif buyuruvchilar soniga ko'paytiring, shunda siz ba'zi resurslardan voz kechasiz!

globalnavThe olma navigatsiya paneli ajoyib misoldir. Har bir tugmachada bir nechta holat mavjud: siz sahifada bo'lasizmi, sahifadan tashqarida bo'lasizmi yoki tugmachani bosasizmi. CSS tugmachaning koordinatalarini belgilaydi va foydalanuvchilarning brauzeriga to'g'ri holat mintaqasini taqdim etadi. Ushbu holatlarning barchasi bitta grafikada birlashtirilgan - ammo uslublar jadvalida ko'rsatilgan mintaqalar bo'yicha ko'rsatiladi.

Agar sizning ishlab chiquvchilaringiz asboblarni yaxshi ko'rsalar, unda ularga yordam beradigan bir tonna bor, shu jumladan Kompas CSS ramkasi, So'rovni qisqartirish ASP.NET uchun, CSS-Spriter Ruby uchun, CSSSprite skript Photoshop uchun, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Projectue fondining CSS Sprite generatori, Sprite Master Web, va SpriteMe Xatcho'p.

Screenshot Sprite Master Web:
spritemaster veb

Martech Zone mavzusi davomida fon rasmlarini ishlatmaydi, shuning uchun hozirda ushbu texnikani qo'llashimiz shart emas.

2 Comments

  1. 1

    Kutib turing… butun kollektsiya “tasvir” (yoki “samolyot”) va har bir kichik rasm (yoki jonlantirilgan yoki interaktiv tarzda oʻzgaruvchan tasvirlar kichik guruhi) “sprite” emasmi?

    Ehtimol, men oxirgi marta bunday ishlarni qilganimdan beri narsalar nomi o'zgartirilgandir, lekin men qasamyod qila olamanki, Sprite katta ma'lumotlar jadvali emas, balki ko'rsatiladigan elementdir.

    ("Sprite stoli"... bu shunday emasmidi?)

    • 2

      Biz ikki xil narsa haqida gaplashayotgandirmiz, Mark. CSS yordamida siz asosan koordinatalardan foydalangan holda tasvir faylining qaysi "qismini" ko'rsatishni belgilashingiz mumkin. Bu sizga barcha rasmlaringizni bitta "sprite" ga joylashtirish imkonini beradi va keyin faqat CSS bilan ko'rsatmoqchi bo'lgan maydonni ko'rsating.

Siz nima deb o'ylaysiz?

Ushbu sayt spamni kamaytirish uchun Akismet-dan foydalanadi. Fikringiz ma'lumotlarining qanday ishlashini bilib oling.