Acelerando su sitio con CSS Sprites

web de spritemaster

Escribo bastante sobre la velocidad de la página en este sitio y es una parte importante del análisis y las mejoras que hacemos en los sitios de nuestros clientes. Además de pasar a servidores potentes y utilizar herramientas como Redes de distribución de contenidos, hay una serie de otras técnicas de programación que el desarrollador web promedio puede utilizar.

El estándar para la hoja de estilo en cascada original tiene más de 15 años. CSS fue una evolución importante en el desarrollo web porque separó el contenido del diseño. Mire este blog y cualquier otro y la mayor parte de la diferencia de estilo se encuentra simplemente en la hoja de estilo adjunta. Las hojas de estilo también son importantes porque se almacenan localmente en un caché dentro de su navegador. Como resultado, a medida que las personas continúan visitando su sitio, no descargan una hoja de estilo cada vez ... solo el contenido de la página.

Un elemento de CSS que a menudo se subutiliza son Sprites CSS. Cuando un usuario visita su sitio web, es posible que no se dé cuenta de que no está simplemente haciendo una solicitud para la página. Ellos hacer múltiples solicitudes... una solicitud para la página, para cualquier hoja de estilo, para cualquier archivo JavaScript adjunto, y luego cada imagen. Si tienes un tema que tiene una serie de imágenes para bordes, barras de navegación, fondos, botones, etc… el navegador tiene que solicitar cada una, una a la vez desde tu servidor web. ¡Multiplique eso por miles de visitantes y eso puede ser decenas de miles de solicitudes hechas a su servidor!

Esto, a su vez, ralentiza su sitio. UNA El sitio lento puede tener un impacto dramático en la participación y las conversiones. que hace tu audiencia. Una estrategia que utilizan los grandes desarrolladores web es poner todas las imágenes en un solo archivo ... llamado duende. En lugar de realizar una solicitud para cada una de las imágenes de archivo, ahora solo es necesario que haya una sola solicitud para la imagen del objeto único.

Usted puede leer sobre cómo funcionan los CSS Sprites en CSS-Tricks or Sprite CSS de Smashing Magazine correo. Mi objetivo no es mostrarte cómo usarlos, solo aconsejarte para que te asegures de que tu equipo de desarrollo los incorpore al sitio. El ejemplo que proporciona CSS Tricks muestra 10 imágenes que son 10 solicitudes y suman 20.5Kb. Cuando se reúne en un solo objeto, es 1 solicitud de 13 kb! Los tiempos de respuesta y solicitud de ida y vuelta para 9 imágenes ya no existen y la cantidad de datos se reduce en más del 30%. ¡Multiplique eso por la cantidad de visitantes en su sitio y realmente reducirá algunos recursos!

globalnavLa Apple la barra de navegación es un gran ejemplo. Cada botón tiene algunos estados ... ya sea que esté en la página, fuera de la página o colocando el mouse sobre el botón. CSS define las coordenadas del botón y presenta la región del estado correcto al navegador de los usuarios. Todos estos estados se contraen en un solo gráfico, pero se muestran región por región como se especifica en la hoja de estilo.

Si a sus desarrolladores les encantan las herramientas, hay muchas que pueden ayudarlos, incluido el Marco CSS de brújula, RequestReduce para ASP.NET, CSS-Spriter para Ruby, Secuencia de comandos CSSSprite para Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Generador de Sprite CSS de Project Fondue, Sprite Master Web, y los SpriteMe Bookmarklet.

Captura de pantalla de Sprite Master Web:
web de spritemaster

Martech Zone no utiliza imágenes de fondo en todo su tema, por lo que no tenemos que implementar esta técnica en este momento.

2 Comentarios

  1. 1

    Espera ... ¿no es toda la colección una "imagen" (o un "plano"), y cada subimagen (o subgrupo de imágenes en el caso de las animadas o que cambian interactivamente) un "sprite"?

    Tal vez se haya cambiado el nombre de las cosas desde la última vez que manejé este tipo de cosas, pero podría jurar que el Sprite fue el elemento que terminó mostrándose, no la tabla de big data de la que se extrajo.

    ("Mesa de Sprite" ... eso era, ¿no?)

    • 2

      Puede que estemos hablando de dos cosas diferentes, Mark. Con CSS, básicamente puede especificar qué 'porción' de un archivo de imagen mostrar utilizando coordenadas. Esto le permite poner todas sus imágenes en un solo 'sprite' y luego señalar el área que desea mostrar con el CSS.

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.