Paātriniet savu vietni, izmantojot CSS Sprites

spritemaster tīmeklis

Es šajā vietnē diezgan daudz rakstu par lapu ātrumu, un tā ir svarīga mūsu klientu vietņu analīzes un uzlabojumu sastāvdaļa. Papildus pārvietošanai uz jaudīgiem serveriem un tādu rīku izmantošanai kā Satura Piegāde tīkli, ir vairākas citas programmēšanas metodes, kuras vidējais tīmekļa izstrādātājs var izmantot.

Sākotnējās kaskādes stila lapas standarts tagad ir vairāk nekā 15 gadus vecs. CSS bija nozīmīga attīstība tīmekļa izstrādē, jo tā atdalīja saturu no dizaina. Apskatiet šo emuāru un jebkuru citu, un lielākā daļa stila atšķirību ir vienkārši pievienotajā stila lapā. Stila lapas ir svarīgas arī tāpēc, ka tās tiek glabātas lokāli jūsu pārlūkprogrammas kešatmiņā. Tā kā cilvēki turpina apmeklēt jūsu vietni, viņi katru reizi nelādē stila lapu ... tikai lapas saturu.

Viens no CSS elementiem, kas bieži tiek nepietiekami izmantots, ir CSS sprites. Kad lietotājs apmeklē jūsu vietni, jūs, iespējams, nesaprotat, ka viņš vienkārši neiesniedz vienu pieprasījumu lapai. Viņi veikt vairākus pieprasījumus... pieprasījums pēc lapas, visām stila lapām, visiem pievienotajiem JavaScript failiem un pēc tam katram attēlam. Ja jums ir motīvs, kurā ir attēlu sērijas apmalēm, navigācijas joslām, foniem, pogām utt., Pārlūkprogrammai ir jāpieprasa katrs no tiem pa vienam no jūsu tīmekļa servera. Reiziniet to ar tūkstošiem apmeklētāju, un tas var būt desmitiem tūkstošu pieprasījumu, kas iesniegti jūsu serverim!

Tas savukārt palēnina jūsu vietni. A lēna vietne var dramatiski ietekmēt iesaistīšanos un reklāmguvumus ko jūsu auditorija veido. Stratēģija, ko izmanto lieliski tīmekļa izstrādātāji, ir visu attēlu ievietošana vienā failā ... ko sauc par a elfa. Tā vietā, lai pieprasītu katru faila attēlu, tagad ir nepieciešams tikai viens pieprasījums pēc viena sprite attēla!

Jūs varat lasīt par kā CSS Sprites darbojas CSS-Tricks or Smashing Magazine's CSS Sprite pastu. Es nedomāju parādīt, kā tos izmantot, tikai ieteikt, lai jūsu izstrādātāju komanda tos iekļauj vietnē. CSS triku sniegtajā piemērā ir parādīti 10 attēli, kas ir 10 pieprasījumi un kuru summa ir līdz 20.5 KB. Kad sapulcējies vienā sprite, tas ir 1 pieprasījums ir 13 KB! Pieprasījums turp un atpakaļ uz 9 attēliem tagad ir pagājis, un datu apjoms ir samazināts par vairāk nekā 30%. Reiziniet to ar savas vietnes apmeklētāju skaitu, un jūs patiešām izdzīsit dažus resursus!

globalnavJūsu darbs IR Klientu apkalpošana ābols navigācijas josla ir lielisks piemērs. Katrai pogai ir daži stāvokļi ... neatkarīgi no tā, vai atrodaties lapā, ārpus tās vai kursējat pāri pogai. CSS nosaka pogas koordinātas un uzrāda pareizā stāvokļa reģionu lietotāju pārlūkprogrammai. Visi šie stāvokļi tiek sakļauti vienā grafikā, bet tiek parādīti reģioni pa reģioniem, kā norādīts stila lapā.

Ja jūsu izstrādātājiem patīk rīki, viņiem var palīdzēt daudz, tostarp Compass CSS ietvars, PieprasītSamazināt vietnei ASP.NET, CSS-Spriter par Rubīnu, CSSSprite skripts par Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Projekta Fondue CSS Sprite Generator, Sprite Master Web, Kā arī SpriteMe Grāmatzīme.

Ekrānuzņēmums par Sprite Master Web:
spritemaster tīmeklis

Martech Zone visā tēmā neizmanto fona attēlus, tāpēc mums pašlaik nav jāizmanto šī tehnika.

2 Komentāri

  1. 1

    Pagaidiet ... vai visa kolekcija nav “attēls” (vai “plakne”) un katrs apakšattēls (vai attēlu apakšgrupa animētu vai interaktīvi mainīgu gadījumā) nav “sprite”?

    Varbūt lietas ir pārdēvētas kopš pagājušās reizes, kad es rīkojos ar šāda veida lietām, bet es varētu zvērēt, ka Sprite bija elements, kas galu galā tika parādīts, nevis lielā datu tabula, no kuras tā tika izvilkta.

    ("Sprite galds" ... vai tas nebija tas?)

    • 2

      Mēs, iespējams, runājam par divām dažādām lietām, Mark. Izmantojot CSS, jūs, izmantojot koordinātas, varat būtībā norādīt, kuru attēla faila “daļu” parādīt. Tas ļauj jums salikt visus attēlus vienā "sprite" un pēc tam vienkārši norādīt uz apgabalu, kuru vēlaties parādīt ar CSS.

Ko jūs domājat?

Šī vietne izmanto Akismet, lai samazinātu surogātpastu. Uzziniet, kā tiek apstrādāts jūsu komentārs.