Accelerare il tuo sito con CSS Sprites

spritemaster web

Scrivo molto sulla velocità delle pagine su questo sito ed è una parte importante dell'analisi e dei miglioramenti che apportiamo ai siti dei nostri clienti. Oltre al passaggio a server potenti e all'utilizzo di strumenti come Content Delivery Networks, esistono numerose altre tecniche di programmazione che lo sviluppatore web medio può utilizzare.

Lo standard per il foglio di stile a cascata originale ha ormai più di 15 anni. I CSS sono stati un'evoluzione importante nello sviluppo web perché hanno separato il contenuto dal design. Guarda questo blog e qualsiasi altro e la maggior parte della differenza di stile è semplicemente nel foglio di stile allegato. I fogli di stile sono importanti anche perché sono archiviati localmente in una cache all'interno del browser. Di conseguenza, mentre le persone continuano a visitare il tuo sito, non scaricano un foglio di stile ogni volta... solo il contenuto della pagina.

Un elemento dei CSS che è spesso sottoutilizzato sono Sprite CSS. Quando un utente visita il tuo sito web, potresti non renderti conto che non sta semplicemente effettuando una richiesta per la pagina. Essi fare più richieste... una richiesta per la pagina, per eventuali fogli di stile, per eventuali file JavaScript allegati e quindi per ciascuna immagine. Se hai un tema che ha una serie di immagini per bordi, barre di navigazione, sfondi, pulsanti, ecc ... il browser deve richiederle ognuna, una alla volta, dal tuo server web. Moltiplicalo per migliaia di visitatori e possono essere decine di migliaia di richieste fatte al tuo server!

Questo, a sua volta, rallenta il tuo sito. UN un sito lento può avere un impatto drammatico sul coinvolgimento e sulle conversioni che fa il tuo pubblico. Una strategia utilizzata dai grandi sviluppatori web consiste nel mettere tutte le immagini in un unico file ... chiamato a folletto. Invece di fare una richiesta per ciascuna delle tue immagini di file, ora ci deve essere solo una singola richiesta per la singola immagine sprite!

Si può leggere su come funzionano CSS Sprite in CSS-Tricks or Sprite CSS di Smashing Magazine inviare. Il mio punto non è mostrarti come usarli, ma solo consigliarti di assicurarti che il tuo team di sviluppo li incorpori nel sito. L'esempio fornito da CSS Tricks mostra 10 immagini che sono 10 richieste e aggiungono fino a 20.5 Kb. Quando sono raccolti in un singolo sprite, è 1 richiesta di 13 kb! La richiesta di andata e ritorno e i tempi di risposta per 9 immagini sono ora andati e la quantità di dati è ridotta di oltre il 30%. Moltiplicalo per il numero di visitatori del tuo sito e ridurrai davvero alcune risorse!

navigazione globaleIl progetto Apple la barra di navigazione è un ottimo esempio. Ogni pulsante ha alcuni stati... che tu sia sulla pagina, fuori dalla pagina o passando il mouse sul pulsante. CSS definisce le coordinate del pulsante e presenta la regione dello stato corretto al browser degli utenti. Tutti questi stati sono compressi insieme in un unico grafico, ma visualizzati regione per regione come specificato nel foglio di stile.

Se i tuoi sviluppatori amano gli strumenti, ce ne sono tantissimi là fuori che possono aiutarli, incluso il Compass framework CSS, RichiediRiduci per ASP.NET, CSS-Spriter per Ruby, Script CSSSprite per Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Generatore di sprite CSS di Project Fondue, Sprite Master Web, e il SpriteMe Segnalibro.

Screenshot di Sprite Master Web:
spritemaster web

Martech Zone non utilizza immagini di sfondo in tutto il suo tema, quindi non dobbiamo implementare questa tecnica in questo momento.

Commenti

  1. 1

    Aspetta ... l'intera collezione non è una "immagine" (o un "piano") e ogni sottoimmagine (o sottogruppo di immagini nel caso di quelle animate o che cambiano interattivamente) uno "sprite"?

    Forse le cose sono state rinominate dall'ultima volta che ho gestito questo genere di cose, ma avrei potuto giurare che lo Sprite era l'elemento che è finito per essere visualizzato, non la tabella di big data da cui è stato estratto.

    ("Tavolo Sprite" ... non era vero?)

    • 2

      Potremmo parlare di due cose diverse, Mark. Con i CSS, puoi sostanzialmente specificare quale "porzione" di un file immagine visualizzare utilizzando le coordinate. Ciò ti consente di mettere tutte le tue immagini in un singolo "sprite" e quindi puntare semplicemente all'area che desideri visualizzare con il CSS.

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.