Accelerar el vostre lloc amb CSS Sprites

web spritemaster

En aquest lloc escric bastant sobre la velocitat de la pàgina i és una part important de l’anàlisi i les millores que fem als llocs dels nostres clients. A part de passar a servidors potents i utilitzar eines com Xarxes d’entrega de contingut, hi ha una sèrie d'altres tècniques de programació que el desenvolupador web mitjà pot utilitzar.

L’estàndard del full d’estil original en cascada té més de 15 anys. CSS va ser una evolució important en el desenvolupament web perquè va separar el contingut del disseny. Mireu aquest bloc i qualsevol altre, i la majoria de la diferència d’estil es troba simplement al full d’estils adjunt. Els fulls d’estil també són importants perquè s’emmagatzemen localment en una memòria cau del navegador. Com a resultat, a mesura que la gent continua visitant el vostre lloc, no descarrega cap full d'estil cada vegada ... només el contingut de la pàgina.

Un dels elements de CSS que sovint està infrautilitzat és CSS Sprites. Quan un usuari visita el vostre lloc web, és possible que no us adoneu que no solament fa una sol·licitud per a la pàgina. Ells fer diverses sol·licituds... una sol·licitud per a la pàgina, per a qualsevol full d'estil, per a qualsevol fitxer JavaScript adjunt i, a continuació, per a cada imatge. Si teniu un tema que conté una sèrie d’imatges per a vores, barres de navegació, fons, botons, etc ... el navegador ha de sol·licitar-los cadascun, un per un, al vostre servidor web. Multipliqueu això per milers de visitants i això pot suposar desenes de milers de sol·licituds al vostre servidor.

Al seu torn, això alenteix el vostre lloc. A el lloc lent pot tenir un impacte dramàtic en la interacció i les conversions que fa el vostre públic. Una estratègia que utilitzen els grans desenvolupadors web consisteix a posar totes les imatges en un sol fitxer ... anomenat a sprite. En lloc de fer una sol·licitud per a cadascuna de les vostres imatges de fitxers, ara només cal que hi hagi una sol·licitud per a una sola imatge sprite.

Podeu llegir sobre com funcionen els CSS Sprites a CSS-Tricks or CSS Sprite de Smashing Magazine publicar. El meu punt no és mostrar-vos com utilitzar-los, només aconsellar-vos que assegureu-vos que el vostre equip de desenvolupament els incorpori al lloc. L'exemple que proporciona CSS Tricks mostra 10 imatges que són 10 sol·licituds i sumen 20.5 KB. Quan es reuneix en un sol sprite, ho és 1 sol·licitud de 13 KB! La sol·licitud i el temps de resposta d'anada i tornada per a 9 imatges ja no estan disponibles i la quantitat de dades es redueix en més d'un 30%. Multipliqueu-ho pel nombre de visitants del vostre lloc i realment afaireu alguns recursos.

globalnavL' poma la barra de navegació n’és un bon exemple. Cada botó té uns quants estats ... tant si sou a la pàgina, fora de la pàgina o si passeu el ratolí per sobre del botó. CSS defineix les coordenades del botó i presenta la regió de l’estat correcte al navegador dels usuaris. Tots aquests estats es reparteixen en un sol gràfic, però es mostren regió per regió tal com s’especifica al full d’estil.

Si als vostres desenvolupadors els encanten les eines, hi ha moltes coses que els poden ajudar, inclòs el Marc CSS de brúixola, RequestReduce per a ASP.NET, CSS-Spriter per a Ruby, Script CSSSprite per a Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Generador CSS Sprite de Project Fondue, Web principal Sprite, I el SpriteMe Marcador.

Captura de pantalla de Web principal Sprite:
web spritemaster

Martech Zone no utilitza imatges de fons al llarg del seu tema, de manera que no hem de desplegar aquesta tècnica en aquest moment.

2 Comentaris

  1. 1

    Espera ... tota la col·lecció no és una "imatge" (o un "pla"), i cada subimatge (o subgrup d'imatges en el cas de les animades o que canvien de manera interactiva) és un "sprite"?

    Potser s’ha canviat el nom de coses des de la darrera vegada que vaig gestionar aquest tipus de coses, però podia jurar que el Sprite va ser l’element que es va acabar mostrant, no la taula de dades grans de la qual es va treure.

    ("Taula Sprite" ... no era així?)

    • 2

      Potser parlem de dues coses diferents, Mark. Amb CSS, bàsicament podeu especificar quina "porció" d'un fitxer d'imatge es mostrarà mitjançant coordenades. Això us permet posar totes les vostres imatges en un sol "sprite" i, tot seguit, assenyalar l'àrea que voleu mostrar amb el CSS.

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.