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 originale di stile 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 bloggu è 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 hè Sprites CSS. 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 mustrà vi cumu aduprà, solu per cunsiglialli per assicurà chì a vostra squadra di sviluppu li incorpore in u situ. L'esempiu chì CSS Tricks furnisce mostra 10 imagini 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, Sprite Giustu, 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... ùn hè micca tutta a cullezzione una "imaghjina" (o un "aviò"), è ogni sub-imaghjina (o sottugruppu d'imaghjini in u casu di animazione o interattivamente cambiante) un "sprite"?

    Forse e cose sò state rinominate da l'ultima volta chì aghju trattatu stu tipu di cose, ma puderia ghjurà chì Sprite era l'elementu chì hà finitu per esse affissatu, micca a big data table da quale hè stata tirata.

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

    • 2

      Puderemu parlà duie cose diverse, Mark. Cù CSS, pudete basalmente specificà quale "parte" di un schedariu d'imaghjini per vede utilizendu coordenate. Questu permette di mette tutte e vostre imaghjini in un unicu "sprite" è dopu solu punta à l'area chì vulete vede cù u CSS.

Chì ne pensi?

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