post icon

SEO: Mejorar WPO con CSS Sprites

27 dic 2011

0 Comentarios

Viendo el interés creciente que hay en el SEO sobre el WPO (Web Performance Optimization), he decidido dedicarle otro post, pero esta vez me centraré en un aspecto más técnico y algo más difícil de implementar.

Los que me seguís, sabéis que no me gusta tratar temas demasiado complejos en el blog, pero después de notar el gran impacto que desde hace un tiempo Google le otorga al CSS Sprite, me ha parecido importante hablar de ello.

Hace ya unos meses, Google categorizó el no usar CSS Sprites, cuando son necesarios, como algo que le molesta mucho. Lo sé porque en el pagespeed online, herramienta imprescindible para tratar el WPO, lo tilda de hight priority cuando intuye que deberías estar utilizándolo. Para que me entendáis, eso significa que Google nos esta diciendo: esto no me gusta ni un pelo, ¡arréglalo ya!

Como todos sabemos lo que significa desatender las recomendaciones del buscador, vamos a ponernos manos a la obra. Empecemos por el principio, ¿qué es y qué hace el CSS Sprite? Pues es una técnica “avanzada” que consiste en agrupar varias imágenes en una sola muy optimizada y, después, a la hora de mostrarlas en la Web, volver a separarlas vía CSS.

¿Para qué hemos de esforzarnos en hacer algo que parece tan liosos y complicado? Pues aquí tienes los motivos, verás que son de mucho peso:

  • Al haber menos imágenes que descargar, se reducen drásticamente las peticiones al servidor, por tanto, se reduce el tiempo de carga y la Web pasa a ser más rápida
  • La imagen resultante suele pesar menos que la suma de todas las imágenes más pequeñas, razón por la cual volvemos a ganar velocidad

Si no te ha acabado de quedar claro qué es y como puede ayudarte el CSS Sprite, os pondré un ejemplo práctico:

Muchos de vosotros, seguramente, tendréis varios iconos sociales en vuestro sitio web, pues este es el perfecto ejemplo. Imaginad que tenéis 10 iconos diferentes, ¿vais a hacer 10 peticiones para recuperar esos iconos? Hora de poner en práctica el CSS Sprite.

Deberíais agrupar todos vuestros iconos en una imagen parecida a esta:

css sprite iconos sociales

Como podéis ver, contiene todos los iconos sociales que quiero usar en mi hipotético sitio Web. Acto seguido, debemos separar cada uno en el espacio en el que lo queremos colocar.

Así quedaría el código HTML dónde queremos ver el primer icono:

<ul>
<li class="option1">Opción 1</li>
<li class="option2">Opción 2</li>
<li class="option3">Opción 3</li>
</ul>

Y el código CSS sería así:

.option1, .option2, .option3 {
padding-left:55px;
height:50px;
width:0px;
background:url(iconos-sociales.png) no-repeat;
}
.option1 {background-position: -63px -20px;}
.option2 {background-position: -255px -20px;}
.option3 {background-position: -190px -213px;}

Siguiendo el ejemplo, la opción uno mostraría el icono de Blogger, la dos el de Facebook y la tres el de Twitter.

Intentemos comprender el código, lo que hacemos es asignar a cada clase la imagen optimizada. También en esta misma clase definimos la medida, gracias al padding y el height. Por último utilizamos la clase específica que tendrá cada icono, para determinar que parte de la imagen se ha de mostrar, usando background-position.

Parece que al final no era tan complicado, es momento de que hagáis vuestras propias pruebas, os aseguro que merece mucho la pena optimizar el WPO y esta es una parte que no conviene descuidar. Gracias por leerme, feliz Navidad y ¡hasta la próxima!

P.D: Como siempre si tenéis cualquier duda, no dudéis en comentar o preguntarme en @atMontero :)

Sin comentarios

Deja un comentario

Dejar un comentario