La importancia de optimizar tus hojas CSS
Como estaba terminando de desarrollar la theme de filtro76.com, tenia el style.css con cientas de lineas de más por probar y probar que se van quedando lineas en el camino, para saber y ahorrarte el trabajo de tener revisar cúales no son las qué sobran y voy borrandolas, uso el genial plugin Dust Me Selector para Firefox.
Este es el reporte que me hizo con la hoja antes de pulirla.
Optimizando la hoja en lineas horizontales pegadas consecutivamente.Este aspecto dejar asà las lineas con el atributo y sus propiedades de CSS en el siguiente ejemplo.
-
suscripcion { margin-left:0; margin-top: 10%; padding:0; }suscripcion-box { height:40px; padding-left:0; }
-
div.post p.posted { font:.6em/.5em , Geneva, Arial, sans-serif; color:#666; line-height:1.2em; }
Evitando que sea asÃ
-
#suscripcion {
-
margin-left:0;
-
margin-top: 10%;
-
padding:0;
-
}
-
div.post p.posted {
-
font:.6em/.5em , Geneva, Arial, sans-serif;
-
color:#666;
-
line-height:1.2em; }
Porque según los expertos, formatear una hoja CSS en con atributos y propiedades horizontalmente y en lineas consecutivas es mejor para la rapida lectura de los navegadores al cargarse una página.
Entonces, antes de esto mi CSS tenia 609 lineas.. luego de formatearla de la manera que lo explique, tiene tan solo 108 lineas, hace más corta a la hoja.
Exprimir la hoja CSS
Para optimizar al máximo la hoja, voy a cleancss.com, una aplicación web que se encarga de hacerte esto, reescribiendo y dejando precisamente lo necesario.
¿Cual fue mi beneficio all� Antes de optimizar pesaba 15.5kb y luego de pasar por el quirofano de cleancss me la dejo en solo 9.5kb, optimizandola un 38.7%, por lo tanto la carga del sitio en el navegador se incrementa notablemente.
Con está receta, tu sitio vuela un poco más!
