Accelerà u vostru situ cù CSS Sprites

web spritemaster

Scrivu nantu à a velocità di a pagina un pocu in questu situ è ​​hè una parte impurtante di l'analisi è di i miglioramenti chì facemu in i siti di i nostri clienti. A parte di passà à servitori putenti è aduprà strumenti cum'è Rete di Consegna di Cuntinutu, Ci hè una serie di altre tecniche di prugrammazione chì u sviluppatore web mediu pò aduprà.

U standard per u fogliu di stile originale in cascata hè più di 15 anni avà. CSS hè stata una evoluzione impurtante in u sviluppu web perchè hà separatu u cuntenutu da u cuncepimentu. Fighjate stu blog è qualsiasi altru è a maggior parte di a differenza di stile hè solu in u fogliu di stile aghjuntu. Stylesheets sò ancu impurtanti perchè sò almacenati lucalmente in una cache in u vostru navigatore. Di conseguenza, cume a ghjente continua à visità u vostru situ, ùn scaricanu micca una foglia di stile ogni volta ... solu u cuntenutu di a pagina.

Un elementu di CSS chì hè spessu sottoutilizatu sò CSS Sprites. Quandu un utilizatore visita u vostru situ web, pudete micca capì chì ùn facenu micca solu una richiesta per a pagina. Iddi fà dumande multiple... una dumanda per a pagina, per ogni fogliu di stile, per qualsiasi fugliale JavaScript aghjuntu, è dopu ogni maghjina. Se avete un tema chì hà una serie di immagini per e fruntiere, barre di navigazione, sfondi, buttoni, ecc ... u navigatore deve dumandà ognunu, unu à a volta da u vostru servitore web. Multiplica quellu per migliaia di visitatori è chì pò esse decine di migliaia di richieste fatte à u vostru servitore!

Questu, à u turnu, rallenta u vostru situ. A u situ lentu pò avè un impattu dramaticu nantu à l'engagement è e cunversione chì u vostru audience face. Una strategia chì i grandi sviluppatori web utilizanu mette tutte l'immagini in un unicu file ... chjamatu a sprite &. Invece di fà una richiesta per ognuna di e vostre immagini di file, avà ci vole solu à esse una sola richiesta per a sola immagine sprite!

Pudete leghje circa cumu CSS Sprites travaglia in CSS-Tricks or CSS Sprite di Smashing Magazine postu. U mo scopu ùn hè micca di mustrassi cumu usalli, solu per cunsiglialli per assicurà chì a vostra squadra di sviluppu li incorpori in u situ. L'esempiu chì CSS Tricks furnisce mostra 10 immagini chì sò 10 richieste è aghjunghjenu 20.5Kb. Quandu si riunisce in un sprite unicu, hè 1 richiesta chì hè 13kb! A dumanda di ritornu è i tempi di risposta per 9 imagini sò oramai spariti è a quantità di dati hè ridutta di più di 30%. Moltiplicate questu per u numeru di visitatori in u vostru situ è ​​anderete veramente à rasà qualchì risorse!

globalnavlu Apple a barra di navigazione hè un bellu esempiu. Ogni buttone hà uni pochi di stati ... sì site nantu à a pagina, fora di a pagina, o passate nantu à u buttone. CSS definisce e coordenate di u buttone è presenta a regione di u statu currettu à u navigatore di l'utilizatori. Tutti questi stati sò crollati inseme in una sola grafica - ma visualizati regione per regione cum'è specificatu in u fogliu di stile.

Se i vostri sviluppatori amanu l'utili, ci sò una tonna fora chì ponu aiutà, cum'è u Quadru CSS di bussula, DumandaRiduce per ASP.NET, CSS-Spriter per Ruby, Script CSSSprite per Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Prughjettu Fondue CSS Sprite Generator, Sprite Master Web, E lu SpriteMe Bookmarklet.

Screenshot of Sprite Master Web:
web spritemaster

Martech Zone ùn utilizeghja micca imaghjine di fondu per tuttu u so tema, allora ùn avemu micca da implementà sta tecnica in questu momentu.

2 Comments

  1. 1

    Aspetta ... a cullizzioni sana ùn hè micca una "maghjina" (o un "pianu"), è ogni sottimagine (o sottugruppu di maghjine in casu d'animate o cambiate interattivamente) un "sprite"?

    Forse a roba hè stata rinominata dapoi l'ultima volta chì aghju gestitu stu tipu di cose, ma puderia ghjurà chì u Sprite era l'elementu chì hè finitu per esse visualizatu, micca a grande tabella di dati da a quale hè stata tirata.

    ("Sprite table" ... ùn era micca??)

    • 2

      Puderemu parlà duie cose sfarente, Mark. Cù CSS, pudete basicamente specificà chì "parte" di un fugliale di immagine da visualizà aduprendu coordinate. Questu vi permette di mette tutte e vostre immagini in un unicu 'sprite' è poi solu puntà à l'area chì vulete visualizà cù u CSS.

Chì ne pensi?

Stu situ utilizeghja Akismet per reducisce u puzzicheghju. Sapete ciò chì i dati di i vostri dati è processatu.