Acelerar o seu sitio con CSS Sprites

web spritemaster

Escribo bastante sobre a velocidade das páxinas neste sitio e é unha parte importante das análises e melloras que realizamos nos sitios dos nosos clientes. Ademais de pasar a servidores potentes e empregar ferramentas como Redes de entrega de contidos, hai unha serie de outras técnicas de programación que o desenvolvedor web medio pode usar.

O estándar para a folla de estilo orixinal en cascada ten máis de 15 anos. CSS foi unha evolución importante no desenvolvemento web porque separaba o contido do deseño. Mire este blog e calquera outro e a maioría da diferenza de estilo está simplemente na folla de estilo adxunta. As follas de estilo tamén son importantes porque se almacenan localmente nunha caché no seu navegador. Como resultado, a medida que a xente segue visitando o seu sitio, non descarga unha folla de estilo cada vez ... só o contido da páxina.

Un elemento de CSS que a miúdo está infrautilizado son CSS Sprites. Cando un usuario visita o seu sitio web, é posible que non se decate de que non só está a facer unha solicitude para a páxina. Eles facer varias solicitudes... unha solicitude para a páxina, para calquera folla de estilo, para calquera ficheiro JavaScript adxunto e logo cada imaxe. Se tes un tema que ten unha serie de imaxes para bordos, barras de navegación, fondos, botóns, etc ... o navegador ten que solicitar cada un, un por un, ao teu servidor web. Multiplícao por miles de visitantes e pode ser decenas de miles de solicitudes feitas ao teu servidor.

Isto, á súa vez, ralentiza o teu sitio. A un sitio lento pode ter un impacto dramático no compromiso e nas conversións que fai o teu público. Unha estratexia que usan os grandes desenvolvedores web é colocar todas as imaxes nun único ficheiro ... chamado a sprite. En vez de facer unha solicitude para cada unha das súas imaxes de ficheiro, agora só precisa haber unha única solicitude para a imaxe sprite única.

Podes ler sobre como funcionan os CSS Sprites en CSS-Tricks or CSS Sprite de Smashing Magazine publicar. O meu punto non é mostrarche como usalos, só aconsellarte para que o teu equipo de desenvolvemento os incorpore ao sitio. O exemplo que ofrece CSS Tricks mostra 10 imaxes que son 10 solicitudes e suman 20.5 KB. Cando se reúne nun único sprite, é así 1 solicitude de 13kb! A solicitude de ida e volta e os tempos de resposta para 9 imaxes xa non están e a cantidade de datos redúcese en máis dun 30%. Multiplícao polo número de visitantes do teu sitio e realmente afeitarás algúns recursos.

globalnavo mazá a barra de navegación é un gran exemplo. Cada botón ten algúns estados ... se estás na páxina, fóra da páxina ou pasas o rato sobre o botón. CSS define as coordenadas do botón e presenta a rexión do estado correcto ao navegador dos usuarios. Todos estes estados están contraídos nun só gráfico, pero móstranse rexión por rexión como se especifica na folla de estilo.

Se aos teus desenvolvedores lles encantan as ferramentas, hai moitas cousas que poden axudalos, incluído o Marco CSS de compás, RequestReduce para ASP.NET, CSS-Spriter para Ruby, Script CSSSprite para Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Xerador CSS Sprite de Project Fondue, Web Sprite Master, Ea SpriteMe Bookmarklet.

Captura de pantalla de Web Sprite Master:
web spritemaster

Martech Zone non utiliza imaxes de fondo ao longo do seu tema, polo que non temos que despregar esta técnica neste momento.

2 Comentarios

  1. 1

    Espera ... ¿non é toda a colección unha "imaxe" (ou un "plano"), e cada subimaxe (ou subgrupo de imaxes no caso de animadas ou de cambio interactivo) é un "sprite"?

    Quizais se renomearon cousas desde a última vez que manexei este tipo de cousas, pero podería xurar que o Sprite foi o elemento que acabou mostrándose, non a táboa de datos grande da que se tirou.

    ("Mesa Sprite" ... que non foi?)

    • 2

      Podemos estar falando de dúas cousas diferentes, Mark. Con CSS, basicamente podes especificar a "porción" dun ficheiro de imaxe que se amosará usando coordenadas. Isto permítelle colocar todas as súas imaxes nun único "sprite" e logo apunta á área que desexa amosar co CSS.

¿Que pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.