Akselere sit ou a ak luten CSS

entènèt spritemaster

Mwen ekri sou vitès paj yon ti jan sou sit sa a epi li se yon pati enpòtan nan analiz la ak amelyorasyon nou fè nan sit kliyan nou yo. Akote de deplase nan serveurs pwisan ak itilize zouti tankou Rezo livrezon kontni, gen yon kantite lòt teknik pwogramasyon pwomotè entènèt an mwayèn ka itilize.

Estanda a pou fèy orijinal style kaskad la gen plis pase 15 an kounye a. CSS se te yon evolisyon enpòtan nan devlopman entènèt paske li separe kontni de konsepsyon. Gade nan blog sa a ak nenpòt lòt ak majorite nan diferans lan manier se senpleman nan Fèy estil la tache. Stylesheets yo enpòtan tou paske yo estoke lokalman nan yon kachèt nan navigatè ou a. Kòm yon rezilta, menm jan moun kontinye vizite sit ou, yo pa ap telechaje yon fèy style chak fwa ... jis kontni paj la.

Yon eleman nan CSS ki nan souvan underutilized yo CSS luten. Lè yon itilizatè vizite sit entènèt ou, ou ka pa reyalize ke yo pa senpleman fè yon sèl demann pou paj la. Yo fè plizyè demann... yon demann pou paj la, pou nenpòt ki fèy papye style, pou nenpòt ki dosye JavaScript tache, ak Lè sa a, chak imaj. Si ou gen yon tèm ki gen yon seri de imaj pou fwontyè, ba navigasyon, orijin, bouton, elatriye ... navigatè a gen pou mande pou chak, youn nan yon moman nan sèvè entènèt ou an. Miltipliye ke pa dè milye de vizitè e ke yo ka dè dizèn de milye de demann ki fèt nan sèvè ou!

Sa a, nan vire, ralanti sit ou. Yon sit ralanti ka gen yon enpak dramatik sou angajman an ak konvèsyon ke odyans ou fè. Yon estrateji ke devlopè entènèt gwo itilize se mete tout imaj yo nan yon dosye sèl ... yo rele yon luten. Olye ke fè yon demann pou chak nan imaj dosye ou, kounye a gen sèlman bezwen gen yon sèl demann pou imaj la luten sèl!

Ou ka li sou ki jan CSS luten travay nan CSS-Ke trik nouvèl or Sprite magazin CSS luten la pòs. Pwen mwen se pa yo montre w kouman yo sèvi ak yo, jis konseye w asire ekip devlopman ou enkòpore yo nan sit la. Egzanp ke CSS Ke trik nouvèl bay montre 10 imaj ki 10 demann epi ajoute jiska 20.5Kb. Lè yo rasanble nan yon luten sèl, li la 1 demann sa a 13kb! Demann nan vwayaj wonn ak repons fwa pou 9 imaj yo kounye a se ale ak kantite lajan an nan done redwi a plis pase 30%. Miltipliye ke pa kantite vizitè sou sit ou epi ou pral reyèlman kale kèk resous la!

globalnavJounal Apple ba navigasyon se yon gwo egzanp. Chak bouton gen yon eta kèk ... si wi ou non ou nan paj la, sou paj la, oswa sourit sou bouton an. CSS defini kowòdone yo nan bouton an epi prezante rejyon an nan eta ki kòrèk la nan navigatè itilizatè yo. Tout eta sa yo tonbe ansanm nan yon grafik sèl - men parèt rejyon pa rejyon jan sa espesifye nan fèy style la.

Si devlopè ou renmen zouti, gen yon tòn yo deyò ki ka ede yo, ki gen ladan Compass CSS fondasyon, RequestReduce pou ASP.NET, CSS-Spriter pou Ruby, CSSSprite script pou fotoschop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, CSS Sprite Generator Pwojè Fondue a, Sprite Mèt entènèt, Ak nan SpriteMe Bookmarklet.

Ekran de Sprite Mèt entènèt:
entènèt spritemaster

Martech Zone pa itilize simagri background nan tout tèm li yo, kidonk nou pa bezwen deplwaye teknik sa a nan moman sa a.

2 Kòmantè

  1. 1

    Rete tann ... se pa koleksyon an antye yon "imaj" (oswa yon "avyon"), ak chak sub-imaj (oswa sub-gwoup nan imaj nan ka a nan anime oswa entèaktif chanje yo menm) yon "luten"?

    Petèt bagay yo te chanje non depi dènye fwa mwen okipe sa a sòt de bagay men mwen te kapab fè sèman luten la te eleman ki te fini ke yo te parèt, pa gwo tab done li te rale soti nan.

    ("Sprite tab" ... ki te li pa t 'li?)

    • 2

      Nou ka pale de bagay diferan, Mak. Avèk CSS, ou ka fondamantalman presize ki 'pòsyon' nan yon dosye imaj yo montre lè l sèvi avèk kowòdone. Sa a pèmèt ou mete tout imaj ou nan yon sèl 'luten' ak Lè sa a, jis pwen nan zòn nan ou ta vle montre ak CSS la.

Ki sa ou panse?

Sit sa a sèvi ak Akismet diminye Spam. Aprann kijan kòmantè ou a trete.