Optimizar CSS

Optimizar el CSS

La optimización es una parte vital del desarrollo y mantenimiento de un sitio web, algo que a menudo es pasado por alto. La optimización de una web es un punto sumamente importante, sobre todo si estamos pensando en webs de alto tráfico, con millones de visitas al mes.

Después de haber trabajado en algunas de las más grandes ecommerce, me gustaría compartir con vosotros algunos consejos y trucos que he aprendido durante estos años como FrontEnd.

El optimizar una página puede ayudar a aumentar el número de visitantes, disminuir la carga del servidor al limitar el número de peticiones y mejorar el posicionamiento web, ya sabemos lo que le gusta a Google las páginas que tardan poco en cargar :)

CSS ShortHands

Las abreviaturas para los valores de las propiedades del CSS, conocidas en inglés por Shorthands son siempre recomendable utilizarlas. Las abreviaturas te ayudarán a ahorrar muchos bits de datos innecesarios y a tener menos líneas en tu hoja de estilo. Veamos algunas de las shorthands más utilizadas:

Background

Ejemplo formato largo

.class { 
	background-image: url(image.jpg); 
	background-repeat: no-repeat; 
	background-attachment: fixed; 
	background-position: 0 10px; 
	background-color: #ffffff; }

Ejemplo formato corto

.class { background: url(image.png) no-repeat fixed 0 10px #fff; }

// si algún valor no se declara, tomará los valores siguientes por defecto:
.class { background: none repeat scroll top left transparent; }

Font

Ejemplo formato largo

.class { 
	font-style: italic;
	font-variant: normal;
	font-weight: bold;
	font-size: 12px;
	line-height: 16px;
	font-family: Arial; }

Ejemplo formato corto

.class { font: italic bold 12px/16px Arial; }
// si algún valor no se declara, tomará los valores siguientes por defecto: .class { font: normal normal normal inherit normal inherit; }

Border

Ejemplo formato largo

.class {
	border-width: 2px;
	border-style: solid;
	border-color: #cccccc; }

Ejemplo formato corto

.class { border: 2px solid #ccc; }
// Cuando no se indica el valor para el color, por defecto será negro

Margin

Ejemplo formato largo

.class {
	margin-top: 12px;
	margin-right: 15px;
	margin-bottom: 5px;
	margin-left: 20px; }

Ejemplo formato corto

.class { margin: 12px 15px 5px 20px; }
// Los valores se indican según el sentido de las agujas del reloj: arriba, derecha, abajo e izquierda. Por ejemplo:
margin: 10px; // Añadirá la misma cantidad de píxeles a todos los lados.
margin: 10px 20px; // Añadirá 10px a arriba y a abajo y 20 píxeles a la izquierda y a la derecha.
margin: 10px 15px 20px; // Añadirá 10px arriba, 15px al lado izquierdo y al derecho y 20px abajo.

Padding

Ejemplo formato largo

.class {
	padding-top: 12px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 20px; }

Ejemplo formato corto

.class { padding: 12px 15px 5px 20px; }
// La propiedad padding se comporta de la misma forma que margin en el sentido de la declaración de valores

List

Ejemplo formato largo

.class { 
	list-style-type: circle;
	list-style-position: outside;
	list-style-image: url(image.png); }

Ejemplo formato corto

.class { list-style: circle outside url(image.png); }

No utilices @import para incluir hojas de estilo

Pruebas realizadas por ingenieros de Yahoo indican que la utilización de @import puede afectar al rendimiento de tu sitio web. El resultado de este test demostró que:

La utilización de @import dentro de una hoja de estilos añade más de una petición al servidor, aumentando el tiempo de descarga total de la página.

Una de las mejores prácticas indica que el CSS debe estar en la parte superior con el fin de permitir el procesamiento progresivo.

Agrupa estilos similares

Puede suceder que después de un tiempo desarrollando declaremos las mismas propiedades para dos clases diferentes, por lo que es bueno que antes de poner online nuestro código echemos un vistazo en busca de clases con mismos estilos para agruparlas.

Antes

h1 { padding: 5px 0; font-weight:700; }
h2 { padding: 5px 0; font-weight:700; }

Después

h1, h2 { padding: 5px 0; font-weight:700; }

O bien si sólo comparten algunas propiedades, unificarlas, ya que no sólo podemos reducir el tamaño del archivo sino también facilitar su lectura:

Antes

li.home {background: url(img/sprite.png) 0 0 no-repeat transparente;}
li.about {background: url(img/sprite.png) 0 -50px no-repeat transparente;}
li.contact {background: url(img/sprite.png) 0 -100px no-repeat transparente;}

Después

li.home, li.about, li.contact {background: url(img/sprite.png) 0 0 no-repeat transparente;}
li.about {background-position: 0 -50px;}
li.contact {background-position: 0 -100px;}

Omite ceros y unidades de medidas innecesarias

Antes

margin: 15.0em;
padding: 0.1em;

Después

margin: 15em;
padding: .1em;

Antes

margin: 0px;

Después

margin: 0;

Puede que estos ejemplos te parezcan obvios, pero, aún así hay desarrolladores que siguen indicando 0px cuando no es necesario, ya que 0 ¡es cero! tenga o no indicada una medida.

Hay algunas herramientas de compresión y optimización de css que te permitirán de forma automática eliminar la únidad de medida y los ceros cuando son innecesarios, al igual que espacios, comentarios, ....

Elimina clases no que utilices

Para ello puedes valerte del complemento para firefox: CSS Usage o bien Dust-Me Selector. Esta última te permite extraer todos los selectores de todas las hojas de estilo de la página que estás viendo, luego analiza la página para ver cuál de los selectores no se utilizan. Los datos se almacenan de modo que al comprobar las páginas siguientes, los selectores pueden ser borrados de la lista a medida que se encuentran.

Comprime los archivos CSS

Comprime y optimiza todos los archivos CSS. Algunas herramientas de compresión te permiten eliminar espacios en blancos de final de línea, comentarios, comprimir el código de color hexadecimal (de #ffffff a #fff), eliminar el último ";" de los valores CSS, etc... Algunas de estas herramientas son:

Combina las múltiples hojas de estilo en uno solo archivo.

Es mejor que una vez que cada una las hojas de estilo estén comprimidas y optimizadas, con alguna de las herramientas comentadas anteriormente, unificarlas en un único archivo .css, de esa forma sólo se hará una única petición al servidor en vez de muchas.

Antes

<link rel="stylesheet" media="screen"  type="text/css" href="css/styles.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/general.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/plugins.css" /> 

Después

<link rel="stylesheet" media="screen"  type="text/css" href="css/main.css" />

Pero, ¿porqué es mejor tener un único archivo grande en lugar de varios pequeños?

Cuando un usuario accede a tu sitio web cada objeto de la página (css, imágenes, scripts...) transferirá unos datos de ida y vuelta al servidor. Estas peticiones HTTP retrasarán el tiempo de respuesta de tu sitio y si tienes muchos archivos en lugar de uno sólo, esta demora puede reflejarse en varios segundos de carga.

Esta técnica tiene el proposito de reducir las peticiones HTTP. Por lo tanto, si tienes 3 archivos CSS, el navegador enviará 3 peticiones HTTP al servidor. Por lo que: 1 archivo CSS = 1 solicitud HTTP.

Conclusión

Aunque en principio pueda parecer algo laborioso aplicar cada una de estas recomendaciones, verás que con el tiempo es muy sencillo y acabarás sabiendo de memoria los ShortHands. He intentando reunir en este primer capítulo de optimización web todas las recomendaciones para una optimización eficaz de la hojas de estilo. Mi última recomendación, es que trabajes con una hoja de estilo comentada y bien formateada y posteriormente la comprimas obteniendo una versión "minificada", que será la que subas a producción, pero trabaja siempre con la versión "normal", es muy importante documentar ya que nunca se sabe cuando tiempo puede pasar hasta que vuelvas a modificar el archivo o si otra persona tiene que modificarlo por ti ¡creéme! te lo agradecerá ;)

Si conoces alguna otra técnica de optimización de CSS que no figure aquí, te animo a que la compártas y si tienes alguna pregunta deja un comentario. Nos vemos en el siguiente capítulo de Optimización Web :)