Goryrru'ch Gwefan gyda CSS Sprites

gwe spritemaster

Rwy'n ysgrifennu am gyflymder tudalen cryn dipyn ar y wefan hon ac mae'n rhan bwysig o'r dadansoddiad a'r gwelliannau a wnawn i wefannau ein cleientiaid. Ar wahân i symud i weinyddion pwerus a defnyddio offer fel Rhwydweithiau Cyflenwi Cynnwys, mae yna nifer o dechnegau rhaglennu eraill y gall y datblygwr gwe eu defnyddio ar gyfartaledd.

Mae'r safon ar gyfer y Daflen Arddull Rhaeadru wreiddiol dros 15 oed bellach. Roedd CSS yn esblygiad pwysig wrth ddatblygu gwe oherwydd ei fod yn gwahanu cynnwys oddi wrth ddylunio. Edrychwch ar y blog hwn ac unrhyw un arall ac mae mwyafrif y gwahaniaeth steilio yn syml yn y daflen arddull atodedig. Mae taflenni steil hefyd yn bwysig oherwydd eu bod yn cael eu storio'n lleol mewn storfa yn eich porwr. O ganlyniad, wrth i bobl barhau i ymweld â'ch gwefan, nid ydyn nhw'n lawrlwytho taflen arddull bob tro ... dim ond cynnwys y dudalen.

Un elfen o CSS sy'n aml yn cael ei thanddefnyddio yw CSS Sprites. Pan fydd defnyddiwr yn ymweld â'ch gwefan, efallai na fyddwch yn sylweddoli nad ydynt yn gwneud un cais am y dudalen yn unig. Maent gwneud sawl cais… Cais am y dudalen, am unrhyw daflenni arddull, ar gyfer unrhyw ffeiliau JavaScript sydd ynghlwm, ac yna pob delwedd. Os oes gennych chi thema sydd â chyfres o ddelweddau ar gyfer ffiniau, bariau llywio, cefndiroedd, botymau, ac ati ... mae'n rhaid i'r porwr ofyn am bob un, un ar y tro gan eich gweinydd gwe. Lluoswch hynny â miloedd o ymwelwyr a gall hynny fod yn ddegau o filoedd o geisiadau i'ch gweinyddwr!

Mae hyn, yn ei dro, yn arafu eich gwefan. A. gall safle araf gael effaith ddramatig ar yr ymgysylltu a'r trawsnewidiadau y mae eich cynulleidfa yn ei wneud. Strategaeth y mae datblygwyr gwe gwych yn ei defnyddio yw rhoi'r holl ddelweddau mewn un ffeil ... o'r enw a corlun. Yn hytrach na gwneud cais am bob un o'ch delweddau ffeil, nawr dim ond un cais sydd ei angen am y ddelwedd sprite sengl!

Gallwch ddarllen am sut mae CSS Sprites yn gweithio yn CSS-Tricks or Sprite CSS's Smashing Magazine post. Fy mhwynt yw peidio â dangos i chi sut i'w defnyddio, dim ond eich cynghori i sicrhau bod eich tîm datblygu yn eu hymgorffori ar y wefan. Mae'r enghraifft y mae CSS Tricks yn ei darparu yn dangos 10 delwedd sy'n 10 cais ac yn adio i 20.5Kb. Wrth ymgynnull mewn corlun sengl, mae'n 1 cais dyna 13kb! Mae'r cais am daith gron a'r amseroedd ymateb ar gyfer 9 delwedd bellach wedi diflannu ac mae maint y data yn cael ei leihau mwy na 30%. Lluoswch hynny â nifer yr ymwelwyr ar eich gwefan ac rydych chi'n mynd i eillio rhai adnoddau i ffwrdd mewn gwirionedd!

globalnavDaeth Afal mae bar llywio yn enghraifft wych. Mae gan bob botwm ychydig o daleithiau ... p'un a ydych chi ar y dudalen, oddi ar y dudalen, neu'n cyfeilio dros y botwm. Mae CSS yn diffinio cyfesurynnau'r botwm ac yn cyflwyno rhanbarth y cyflwr cywir i borwr y defnyddiwr. Mae'r holl daleithiau hyn yn cwympo gyda'i gilydd mewn un graffig - ond yn cael eu harddangos fesul rhanbarth fel y nodir yn y ddalen arddull.

Os yw'ch datblygwyr yn caru offer, mae yna dunnell allan yna a all eu helpu, gan gynnwys y Fframwaith cwmpawd CSS, RequestReduce ar gyfer ASP.NET, CSS-Spriter ar gyfer Ruby, Sgript CSSSprite ar gyfer Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Generadur Sprite CSS Project Fondue, Gwe Meistr Sprite, Ac mae'r SpriteMe Llyfrnod.

Golwg ar Gwe Meistr Sprite:
gwe spritemaster

Martech Zone nid yw'n defnyddio delweddau cefndir trwy gydol ei thema, felly nid oes rhaid i ni ddefnyddio'r dechneg hon ar hyn o bryd.

2 Sylwadau

  1. 1

    Arhoswch ... onid “delwedd” (neu “awyren”) yw’r casgliad cyfan, a phob is-ddelwedd (neu is-grŵp o ddelweddau yn achos rhai animeiddiedig neu newidiol yn rhyngweithiol) yn “sprite”?

    Efallai bod pethau wedi cael eu hailenwi ers y tro diwethaf i mi drin y math hwn o beth ond gallwn dyngu'r Sprite oedd yr elfen a gafodd ei harddangos yn y pen draw, nid y tabl data mawr y cafodd ei dynnu ohono.

    (“Tabl sprite”… dyna oedd e ddim?)

    • 2

      Efallai ein bod ni'n siarad dau beth gwahanol, Mark. Gyda CSS, gallwch nodi yn y bôn pa 'gyfran' o ffeil ddelwedd i'w harddangos gan ddefnyddio cyfesurynnau. Mae hyn yn caniatáu ichi roi'ch holl ddelweddau mewn un 'sprite' ac yna dim ond pwyntio at yr ardal rydych chi am ei harddangos gyda'r CSS.

Beth ydych chi'n feddwl?

Mae'r wefan hon yn defnyddio Akismet i leihau sbam. Dysgwch sut mae eich data sylwadau yn cael ei brosesu.