Optimizando el CSS en Blogger

¿Obsesivo? Sin duda; y por eso sigo con lo de los elementos condicionales de Blogger. Esta vez, tratando de usarlos para aliviar un poco más la carga del blog.

Todos nos preocupamos por si tal o cual script es más o menos lenta y eso está bien; probablemente, no nos preocupamos por el código CSS y a decir verdad, optimizar las hojas de estilos es muy importante ya que suelen ocupar muchos bytes y reducir su tamaño implica reducir el tamaño del archivo y por ende, del tiempo de carga.

Hay algunas herramientas online como Robson CSS Compressor que hacen el trabajo por nosotros y, desde el punto de vista del tamaño, la diferencia puede ser sustancial (entre un 25% y un 30% menos) sin embargo, ese tipo de compresión transformará el código en algo casi ilegible, imposible de editar:

body{background-color:#343F4A;color:#CCC;font-family:'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;font-size:12px;margin:0;min-width:920px;padding:0;text-align:center}.clear{clear:both;line-height:0;height:0}#navbar-iframe{height:0;visibility:hidden;display:none}a,a:visited,a:link{color:#AAA;outline:none;text-decoration:underline}a:hover{color:#FFF;outline:none}a img{border:none;outline:none;text-decoration:none}object{outline:none}h1,h2,h3,h4,h5,h6{font-family:'Trebuchet Ms', helvetica, arial, sans-serif;margin:10px 0}p,ol,ul{margin:10px 0}pre{color:#F0F0F0;font-family:Tahoma,Arial,'Trebuchet Ms';font-size:13px;line-height:17px;margin:10px 0 10px 10px}pre.long{white-space:pre-wrap}.code{background-color:#EFEFF7;border:2px solid #399BA6;color:#000;font-family:Courier New,Courier,monospace;padding:15px 5px 15px 15px}blockquote{background:#f2f8fc url('http://photos1.blogger.com/blogger2/323/4098/200/bloque1.png') no-repeat scroll left top;color:#222;margin:0 0 5px 20px;padding:0;text-align:center;width:250px;font:italic 15px Georgia, Arial}blockquote p{background:transparent url('http://photos1.blogger.com/blogger2/323/4098/200/bloque2.gif') no-repeat scroll right bottom;margin:0;padding:15px 10px 15px 15px}blockquote a,blockquote a:link,blockquote a:visited{color:navy !important}blockquote a:hover{color:red !important}#outer-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRu_H3nORdxObkEsqB_gwku25GwWKIad9UA5uLKTAWm-gc-t2D5TGRwzEujCjJQted1H0n8efivVw2jbuEWshFwlyrrIRP_j5iq0B6ISY4P6lTUik6OSOAO1xZLMqgE6VdGch1zA/s0/containerbg920.gif) repeat-y;margin:0 auto;position:relative;text-align:left;width:920px}#wrap2{background:none;border-bottom:1px solid #5b626A;margin:0 10px;position:static;width:auto}#header-wrapper{background:#600 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjFt-c2vmRP9PyqrA-ivfHp_RLnBhcHHqyrwLjsZhBS_MDLSRtswupd2vzQKPWIbAkH61RB4VrlivIHQs9JMO9f0ZM7EzGgXxbkR0KGEh0CA2piIOnKJ7AmEfuEp7Gzvpgi3_T/s0/VAGAheader_1.png) no-repeat;height:176px;margin-top:-3px;position:relative;width:900px}#header-inner{padding:20px 0 0;position:static}

Otras herramientas como CleanCSS son menos severas sin embargo, algunas optimizaciones son posibles si nos tomamos el trabajo de revisar.

En lo posible, sería buena idea colocar todos nuestras definiciones de estilo dentro de <b:skin> </b:skin>, de esa manera eliminamos las etiquetas STYLE redundantes y, si necesitamos identificarlas, podemos comentarlas:

/* --- Vinculos y Objetos */
a, a:visited, a:link  {
  color:#AAA;
  outline:none;
  text-decoration:underline;}
a:hover {color:#FFF;outline:none;}
a img {
  border:none;
  outline:none;
  text-decoration:none;
}

Allí, en el ejemplo, ya podemos ver algunas otras optimizaciones posibles.

Eliminar los espacios innecesarios depende de nuestra forma de trabajo. Lo ideal es que no haya ninguno así que deberemos encontrar alguna solución intermedia que nos permita tener código reducido pero legible.

Optimizar los valores de los colores:

• cambiar los valores largos tipo #AAAAAA por #AAA
• cambiar los valores de tipo rgb(255,255,255) por el valor hexadecimal FFF
  

si estamos en la sutileza, colocar red en lugar de #FF0000 y, en términos generales, elegir siempre el valor que ocupe menos caracteres. Todos estos valores significan lo mismo:

#FFEBCD = BlanchedAlmond = rgb(100%,92%,80%) = rgb(255,235,205)

Eliminar las unidades de cualquier valor igual a cero:
margin: 0px 10px;
equivale a:
margin:0 10px;

Unificar las definiciones cuando sea posible (border, background, font, margin, padding):
.clase1 {margin-bottom: 0px; margin-left: 100px; margin-right: 20px; margin-top: 0px;}
equivale a:
.clase1 {margin:0 20px 0 100px;}

.clase2 {margin-bottom: 0px; margin-left: 20px; margin-right: 20px; margin-top: 0px;}
equivale a:
.clase2 {margin:0 20px;}

Lo mismo ocurre con la propiedad background:
.clase3 {background-attachment: scroll; background-color: transparent; background-image: url(URL_imagen); background-position: left 50%; background-repeat: no-repeat;}
equivale a:
.clase3 {background: transparent url(URL_imagen) no-repeat scroll left 50%;}

Sería bueno revisar que no hubiera definiciones repetidas y en ese caso, unificarlas (es algo bastante común); lo mismo ocurre con propiedades que se sobrescriben:

a, a:visited, a:link  {
  color:#AAA;
  outline:none;
  text-decoration:underline;
  color:#CCC;
}

¿Y qué tiene que ver esto con los elementos condicionales de Blogger?

Nuestra plantilla tiene una sola hoja, es un archivo. Blogger lo lee y actua en consecuencia. Si estamos en el home, la página principal se muestra de cierta forma; si estamos en una entrada individual, se muestra de otra forma. El ejemplo típico son los comentarios que sólo vemos desplegados en las páginas individuales y en la principal ni siquiera están ocultos, Blogger, simplemente "se saltea" ese código.

Hay que tener muy claro que, un elemento ocultado con CSS (display: none) se carga de la misma manera que los visibles así que "ocultar" algo no reduce el tiempo de carga.

Por defecto, no importa en que tipo de página estemos, el CSS se carga igual así que bien podríamos condicionarlo y crear tres grupos:

<b:skin>
  [... aquí val las definiciones generales ...]
</b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <style type='text/css';>
    [... aquí van las definiciones exlusivas para la página principal ...]
    [por ejemplo: Posts expandibles]
    [por ejemplo: Paginación]
  </style>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style type='text/css';>
    [... aquí van las definiciones exlusivas para la páginas individuales ...]
    [por ejemplo: Comentarios]
    [por ejemplo: Formulario de comentarios incrustado]
    [por ejemplo: Post relacionados]
    [por ejemplo: Marcadores sociales]
  </style>
</b:if>

No son grandes cambios pero, todo suma.