Kuongeza kasi ya Tovuti yako na Sprites za CSS

mtandao wa wataalam

Ninaandika juu ya kasi ya ukurasa kidogo kwenye wavuti hii na ni sehemu muhimu ya uchambuzi na maboresho tunayofanya kwa wavuti za wateja wetu. Mbali na kuhamia kwa seva zenye nguvu na kutumia zana kama Mitandao ya Uwasilishaji wa Yaliyomo, kuna mbinu zingine kadhaa za programu ambayo msanidi programu wa wastani anaweza kutumia.

Kiwango cha Karatasi ya Asili ya Kuondoa ina zaidi ya miaka 15 sasa. CSS ilikuwa mageuzi muhimu katika ukuzaji wa wavuti kwa sababu ilitenganisha yaliyomo na muundo. Angalia blogi hii na nyingine yoyote na tofauti kubwa ya mtindo ni tu kwenye lahaja ya mitindo. Karatasi za mitindo pia ni muhimu kwa sababu zinahifadhiwa ndani ya kashe ndani ya kivinjari chako. Kama matokeo, watu wanapoendelea kutembelea wavuti yako, hawapakua karatasi ya mtindo kila wakati… yaliyomo kwenye ukurasa.

Kipengele kimoja cha CSS ambacho hutumiwa mara nyingi ni Sprites za CSS. Mtumiaji anapotembelea wavuti yako, huenda usitambue kuwa hawafanyi tu ombi moja la ukurasa. Wao fanya maombi mengi… Ombi la ukurasa, kwa karatasi yoyote ya mitindo, kwa faili zozote zilizoambatanishwa na JavaScript, na kisha kila picha. Ikiwa una mandhari ambayo ina safu ya picha za mipaka, baa za urambazaji, asili, vifungo, nk ... kivinjari kinapaswa kuuliza kila moja, moja kwa wakati kutoka kwa seva yako ya wavuti. Zidisha hiyo kwa maelfu ya wageni na hiyo inaweza kuwa makumi ya maelfu ya maombi yaliyotolewa kwa seva yako!

Hii, kwa upande wake, inapunguza kasi tovuti yako. A tovuti polepole inaweza kuwa na athari kubwa kwa ushiriki na wongofu ambayo wasikilizaji wako hufanya. Mkakati ambao watengenezaji wakuu wa wavuti hutumia ni kuweka picha zote kwenye faili moja… iitwayo a sprite. Badala ya kufanya ombi kwa kila picha yako ya faili, sasa kuna haja tu ya kuwa na ombi moja kwa picha moja ya sprite!

Unaweza kusoma juu jinsi CSS Sprites inavyofanya kazi katika CSS-Tricks or CSS Sprite ya Jarida la Smashing chapisho. Maana yangu sio kukuonyesha jinsi ya kuzitumia, kukushauri tu kuhakikisha timu yako ya maendeleo inaiingiza kwenye wavuti. Mfano ambao CSS Tricks hutoa inaonyesha picha 10 ambazo ni maombi 10 na huongeza hadi 20.5Kb. Unapokusanywa katika sprite moja, ni Ombi 1 hiyo ni 13kb! Ombi la kwenda na kurudi na nyakati za majibu ya picha 9 sasa zimekwenda na idadi ya data imepunguzwa kwa zaidi ya 30%. Zidisha hiyo kwa idadi ya wageni kwenye wavuti yako na utanyoa rasilimali kadhaa!

globalnavThe Apple bar ya urambazaji ni mfano mzuri. Kila kifungo kina majimbo machache… ikiwa uko kwenye ukurasa, nje ya ukurasa, au unazidi juu ya kitufe. CSS inafafanua kuratibu za kitufe na inatoa mkoa wa hali sahihi kwa kivinjari cha watumiaji. Majimbo haya yote yameanguka pamoja kwa picha moja - lakini imeonyeshwa mkoa na mkoa kama ilivyoainishwa kwenye karatasi ya mtindo.

Ikiwa watengenezaji wako wanapenda zana, kuna tani huko nje ambayo inaweza kuwasaidia, pamoja na Mfumo wa Compass CSS, Omba Punguza kwa ASP.NET, CSS-Sprita kwa Ruby, Hati ya CSSSprite kwa Photoshop, SpritePad, SpriteHaki, SpriteCow, ZeroSprites, Jenereta ya Sprite ya Mradi wa Fondue, Mtandao wa Mwalimu wa Sprite, Na SpriteMe Kijitabu.

Screenshot ya Mtandao wa Mwalimu wa Sprite:
mtandao wa wataalam

Martech Zone haitumii taswira ya mandharinyuma katika mandhari yake yote, kwa hivyo sio lazima tutumie mbinu hii kwa wakati huu.

2 Maoni

  1. 1

    Subiri… je! Mkusanyiko mzima sio "picha" (au "ndege"), na kila picha ndogo (au kikundi kidogo cha picha ikiwa ni zile zilizohuishwa au zinazobadilika kiutendaji) "sprite"?

    Labda vitu vimebadilishwa jina tangu wakati wa mwisho nilishughulikia aina hii ya kitu lakini niliweza kuapa Sprite ndio kipengee ambacho kiliishia kuonyeshwa, sio meza kubwa ya data iliyochomwa kutoka.

    ("Jedwali la Sprite"… hiyo haikuwa hivyo?)

    • 2

      Labda tunazungumza vitu viwili tofauti, Marko. Na CSS, unaweza kimsingi kutaja ni 'sehemu' gani ya faili ya picha kuonyesha kuratibu za kutumia. Hii hukuruhusu kuweka picha zako zote kwenye 'sprite' moja na uelekeze tu eneo ambalo unataka kuonyesha na CSS.

Unafikiri?

Tovuti hii inatumia Akismet kupunguza spam. Jifunze jinsi maoni yako yanasindika.