Cuando hacemos un diseño web, tenemos que tener muy en cuenta cómo luego vamos a  optimizarlo de la mejor manera,  para que que no pese demasiado.

En el post anterior, Gabriel, me preguntaba cómo optimizar la CSS, espero que este post, os sirva de algo.

Hace un par de años, recuerdo volverme loco para hacer páginas que no superasen en ningún caso los 100kb de peso, era una auténtica pesadilla, ya que sólo la gráfica te llevaba casi la mitad.
Hoy en día las velocidades de carga son más rápidas, pero eso no significa que podamos permitirnos hacer nuestras páginas sin optimización alguna.

Además, cada vez son más, los usuarios que nos conectamos con un terminal de bolsillo, por lo que se agradece muy mucho, el poder navegar con fluidez sobre una página «ligera».

Tendremos pues que intentar optimizar al máximo nuestras imágenes, el Html y los archivos que mandamos cargar al navegador cuando lee nuestro código, como los .js y los .CSS

En este post vamos a tratar de conseguir la mejor CSS para nuestra web.

¿CUÁNTAS CSS NECESITO?

Existe la posibilidad de hacer una CSS para cada navegador y mediante un sencillo código, hacerle cargar la CSS que proceda.

También se pueden utilizar hacks en la CSS y de ese modo en un mismo archivo contemplar los casos particulares. Las demás opciones no las contemplo porque no me parecen buenas.

Si hacemos una buena maquetación CSS, no hay por qué colocar una CSS para cada navegador, ya que son muy pocas las excepciones que solemos que tener que cargar, es más, seguramente pesen menos que el propio código que distribuye las  CSS por navegador.

Yo uso un truco que me funciona muy bien, primero hago todos los contenedores que voy a necesitar para maquetar la página, y todas esas capas sin padding , sin margin ni border. Luego ya dentro de cada una de ellas coloco otras capas con las características que requiera el diseño, y de este modo son raras las excepciones que tengo que colocar.

De todos modos, lo mejor es hacer una única CSS y luego, si vemos que es mucho el código hack que estamos metiendo, tomar la decisión de hacer otras CSS.

Otro tema a tener en cuenta, es el de hacer CSS separadas, me explico, si tengo una web con muchas secciones, no tiene sentido que esté cargando de peso la home cuando más del 50% de la CSS no le sirve para nada. En ese caso pues, recomiendo hacer CSS por página o secciones similares.

OPTIMIZAR LA CSS:

Bien, la CSS es código y poco se puede quitar, aunque siempre se puede aligerar algo, por ejemplo, el resultado de poner #ffffff es el mismo que si ponemos #fff, ya que el navegador interpreta que si colocamos 3 caracteres de color, los otros 3 restantes van a repetirse. Obviamente también será más óptimo un nombre de capa del tipo «C1» que si lo llamamos «Contenedor primero», recordemos que lo que pesan son los caracteres y no la información.

Otra forma de conseguir aligerar mucho el código es escribiendo el código de una propiedad en una línea en lugar de por bloques.

Este es un ejemplo de cómo ahorrarnos bytes sólo en una clase de enlace, imaginad lo que puede suponer en una CSS entera, muchos muchos kb.

A.naranja:link
{
 FONT-WEIGHT: bold;
 FONT-SIZE: 11px;
 COLOR: #FF6600;
 FONT-FAMILY: arial;
 TEXT-DECORATION: none
}
A.naranja:active
{
 FONT-WEIGHT: bold;
 FONT-SIZE: 11px;
 COLOR: #FF6600;
 FONT-FAMILY: arial;
 TEXT-DECORATION: none
}
A.naranja:visited
{
 FONT-WEIGHT: bold;
 FONT-SIZE: 11px;
 COLOR: #FF6600;
 FONT-FAMILY: arial;
 TEXT-DECORATION: none
}
A.naranja:hover
{
 FONT-WEIGHT: bold;
 FONT-SIZE: 11px;
 COLOR: #737373;
 FONT-FAMILY: arial;
 TEXT-DECORATION: underline
}

Esto es sólo un estilo para definir un tipo de enlace, el peso de esta CSS es de 575bytes.

Ahora vamos a rebajarla de peso:

A.naranja:link {FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #FF6600;FONT-FAMILY: arial;TEXT-DECORATION: none}
A.naranja:active {FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #FF6600;FONT-FAMILY: arial;TEXT-DECORATION: none}
A.naranja:visited{FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #FF6600;FONT-FAMILY: arial;TEXT-DECORATION: none}

A.naranja:hover{FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #737373;FONT-FAMILY: arial;TEXT-DECORATION: underline}

Tras colocar los parámetros en una única línea, ahora el peso de la CSS es de 439 bytes, es decir, nos hemos ahorrado más de 130bytes en una mínima operación, podríamos reducirla aún más, usando «nar» en lugar de «naranja» o obviando el text-decoration del estado hover, ya que por defecto es underline.

Pero podemos optimizar más aún, si voy a usar un mismo tamaño de fuente en toda mi web, en lugar de colocarle los 11px y el tipo de fuente, lo defino en la etiqueta body de la CSS

A.naranja:link {FONT-WEIGHT: bold;COLOR: #FF6600;TEXT-DECORATION: none}
A.naranja:active {FONT-WEIGHT: bold;COLOR: #FF6600;TEXT-DECORATION: none}
A.naranja:visited{FONT-WEIGHT: bold;COLOR: #FF6600;TEXT-DECORATION: none}
A.naranja:hover{FONT-WEIGHT: bold;COLOR: #737373;TEXT-DECORATION: underline}

el resultado ahora es de 299bytes

Y ya si queremos optimizar más nuestro código, podemos aunar los que tienen las mismas características, es decir, poner:

A.naranja:hover {font-weight:700;font-size:11px;color:#737373;font-family:arial;text-decoration:underline;}
A.naranja:link,A.naranja:active,A.naranja:visited {font-weight:700;font-size:11px;color:#F60;font-family:arial;text-decoration:none;}

En esta ocasión el peso ahora es de 242bytes, es decir, hemos reducido el peso a menos de la mitad.

Otra costumbre que tengo, es crear clases que luego voy a repetir mucho, me refiero a los padding, por ejemplo, suelo crear .pt10, .pt20, …. que hacen referencia al padding-top:10px… De ese modo me ahorro en muchas ocasiones el tener que crear clases por separado, ya que puede ser que en ocasiones tenga que utilizar varias veces un mismo estilo que sólo difiere en un pequeño detalle, de este modo, me evito duplicar estilos en la CSS

HERRAMIENTAS ONLINE PARA OPTIMIZAR CSS

Como en casi todo, también tenemos webs que nos ayudan a optimizar nuestras CSS, estas són las que conozco, aunque la verdad es que no suelo usarlas.

• Clean CSS
• Flumpcakes Optimizer

Bueno, seguramente haya muchas maneras más de optimizar código, estas son las que yo conozco, espero que os sean útiles.