Mejorar rendimiento de una Web: Sprite / CSS

La velocidad de una página web está indicada por varios parámetros, entre ellos su velocidad de respuesta por parte del navegador con el servidor de la misma.

Un sitio web suma una »x» cantidad de archivos que hacen un peso de peticiones al sitio (archivos javascript, css, imágenes, etc.), dicho peso es incremental en relación a la cantidad de veces que se solicitan estos archivos; por lo tanto, hacer que este »peso» no genere grandes números es una forma eficaz de optimizar la carga y transferencia de nuestra web.

Una de las herramientas más conocidas son los llamados »sprite», básicamente se trata de una imagen que contiene más imágenes dentro:

sprite01

Un Sprite sirve para mostrar todos nuestros elementos gráficos del sitio desde un solo archivo, de esta forma agilizamos la velocidad de del mismo a través de las peticiones que hace el navegador a nuestro servidor.

Teniendo en cuenta el peso, 5 iconos de 6 KB suman más peticiones que usar 1 solo grupo de iconos de 11 KB:

Las propiedades que permiten el uso de sprite es: background-position

La cual podemos controlarla desde el css de nuestra web, mediante uso diferenciado de clases:

sprite02

Mediante este simple proceso logramos un mejor rendimiento del sitio y una forma organizada de mantener nuestros elementos gráficos del sitio, ya que si posteriormente necesitamos agregar nuevos elementos (como iconos) solo es cuestión de sumarlos al sprite y controlar su posición en el elemento indicado.

Para nuestro sitio comunidadfusa.com implementamos diferentes Sprites en sus respectivos usos:

sprite03

Para así tener un control de los elementos que más se utilizan en el sitio, como así también mantener una buena relación de tiempo de cargar y transferencia del sitio.