Hraðað síðunni þinni með CSS sprites

spritemaster vefur

Ég skrifa töluvert um blaðamannahraða á þessari síðu og það er mikilvægur þáttur í greiningu og endurbótum á vefsíðum viðskiptavina okkar. Fyrir utan að flytja á öfluga netþjóna og nota verkfæri eins og Net fyrir afhendingu efnis, það er fjöldi annarra forritunaraðferða sem hinn almenni vefhönnuður getur notað.

Staðallinn fyrir upprunalega Cascading Style Sheet er yfir 15 ára núna. CSS var mikilvæg þróun í vefþróun vegna þess að það aðgreindi efni frá hönnun. Skoðaðu þetta blogg og annað og meirihluti stílmunsins er einfaldlega í meðfylgjandi stílblaði. Stílblöð eru einnig mikilvæg vegna þess að þau eru geymd á staðnum í skyndiminni í vafranum þínum. Þar af leiðandi, þegar fólk heldur áfram að heimsækja síðuna þína, er það ekki að hlaða niður stílblaði í hvert skipti ... bara innihald síðunnar.

Einn þáttur í CSS sem oft er vannýttur er CSS Sprites. Þegar notandi heimsækir vefsíðuna þína áttarðu þig kannski ekki á því að þeir eru ekki einfaldlega að leggja fram eina beiðni um síðuna. Þeir gerðu margar beiðnir... beiðni um síðuna, fyrir hvaða stílblöð, fyrir allar meðfylgjandi JavaScript skrár og síðan hverja mynd. Ef þú ert með þema sem hefur röð mynda fyrir landamæri, siglingastika, bakgrunn, hnappa osfrv ... vafrinn þarf að biðja um hverja og eina í einu frá vefþjóninum þínum. Margfaldaðu það með þúsundum gesta og það geta verið tugþúsundir beiðna sem gerðar eru á netþjóninum þínum!

Þetta hægir síðan á síðunni þinni. A hægur staður getur haft mikil áhrif á þátttöku og viðskipti sem áhorfendur þínir búa til. Stefna sem frábærir vefhönnuðir nota er að setja allar myndirnar í eina skrá ... kallast a Sprite. Frekar en að gera beiðni um hverja skráarmynd, þarf nú aðeins að vera ein beiðni um eina sprite myndina!

Þú getur lesið um hvernig CSS Sprites vinna hjá CSS-Tricks or Smashing Magazine CSS Sprite staða. Mál mitt er ekki að sýna þér hvernig á að nota þær, bara til að ráðleggja þér að tryggja að þróunarteymið þitt fella þær inn á síðuna. Dæmið sem CSS Bragðarefur veitir sýnir 10 myndir sem eru 10 beiðnir og bæta allt að 20.5 KB. Þegar það er safnað saman í einum sprite er það 1 beiðni sem er 13kb! Beiðni hringtímabilsins og viðbragðstími fyrir 9 myndir eru nú horfin og gagnamagn minnkar um meira en 30%. Margfaldaðu það með fjölda gesta á síðunni þinni og þú munt raunverulega raka af þér auðlindirnar!

globalnavThe Apple siglingar bar er frábært dæmi. Hver hnappur hefur nokkur ríki ... hvort sem þú ert á síðunni, utan síðunnar eða músar yfir hnappinn. CSS skilgreinir hnit hnappsins og kynnir svæðið í réttu ástandi fyrir vafra notenda. Öll þessi ríki eru hrundin saman í einni mynd - en birt svæði eftir svæðum eins og tilgreint er í stílblaðinu.

Ef forritarar þínir elska verkfæri eru tonn þarna úti sem geta hjálpað þeim, þar á meðal Kompás CSS rammi, RequestReduce fyrir ASP.NET, CSS-Spriter fyrir Ruby, CSSSprite handrit fyrir Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondue er CSS Sprite rafall, Sprite Master Web, Og SpriteMe Bókamerki.

Skjámyndir af Sprite Master Web:
spritemaster vefur

Martech Zone notar ekki bakgrunnsmyndir í gegnum þemað og því þurfum við ekki að beita þessari tækni eins og er.

2 Comments

  1. 1

    Bíddu ... er ekki allt safnið „mynd“ (eða „flugvél“) og hver undirmynd (eða undirhópur mynda ef um er að ræða líflegar eða gagnvirkar breytingar) „sprite“?

    Kannski hefur dóti verið endurnefnt síðan síðast þegar ég höndlaði svona hluti en ég gæti svarið að Sprite var þátturinn sem endaði á að birtast, ekki stóra gagnataflan sem það var dregið úr.

    („Sprite borð“ ... var það ekki satt?)

    • 2

      Við erum kannski að tala um tvo mismunandi hluti, Markús. Með CSS geturðu í grundvallaratriðum tilgreint hvaða „hluta“ myndaskrár sem á að sýna með því að nota hnit. Þetta gerir þér kleift að setja allar myndirnar þínar í einn „sprite“ og benda svo bara á svæðið sem þú vilt sýna með CSS.

Hvað finnst þér?

Þessi síða notar Akismet til að draga úr ruslpósti. Lærðu hvernig ummæli þín eru unnin.