Optimizando CSS: Línea por línea

stylesheet1.pngDesde que comencé con mis primeras webs siempre he querido que código e imágenes fuesen óptimas para que la carga fuera lo mas rápida y ligera posible. La velocidad es muy importante en cuanto al usuario que nos visita, realmente una visita puede reducir su tiempo en la web por causa de una carga lenta, ya sea por parte del servidor o bien del peso completo de la web.En la parte del web, la optimización de imágenes y código es esencial, llevo ya varios meses “picando” los estilos de nuestras webs de forma lineal, aquí pongo un ejemplo comparativo:Antes:

#web{width:960px;margin:0 auto}#contenido{width:745px;float:right;display:block}#menu{width:200px;float:left}#foot{clear:both;height:40px}

Ahora:

#web         { width:960px; margin:0 auto }#contenido   { width:745px; float:right; display:block }#menu        { width:200px; float:left }#foot        { clear:both; height:40px }

Que conseguimos con esto? Bien fácil, la optimización del archivo CSS en cuanto ejecución y lectura. Sí, he dicho lectura, creedme si os digo que una vez te acostumbras no vuelves al anterior método. De esta forma el archivo carga más rápido ya que su peso es menor y la ejecución más rápida ya que el navegador no tiene que recorrer 20.000 saltos de línia y 8.000 tabulaciones.Bueno [email protected] dirán -“es mejor separar estructura de diseño en el CSS y en archivos separados uniéndolos todos en una base usando el import“- puede ser para los programadores, sí, pero no para el navegador que carga los archivos linea por linea.Probadlo y luego me contáis 😉

8 respostes
  1. Marcos says:

    Tambien difiero bastante de la visión original. Estoy mucho más cercano a la de Andrés que a la del post de inicio.En cuanto a lo de juntar CSS, no se si lo he leido bien, pero me parece un error meter estilos que quizás el usuario no va a necesitar (imaginemos que estas metiendo estilos de una página que el usuario ni siquiera va a llegar a visitar, en este sentido me vuelco mas a la visión de flash, que es dividir para optimizar las cargas en función de los contenidos visitados por el usuario y no darle más de lo que pide).Además que en cuanto a velocidad y rendimiento las mejoras son muy poco apreciables, en cuanto a tiempo de descarga está como bien dijo andres la caché.Prefiero un código mucho más limpio, y si la optimización se vuelve crítica, entonces usaría un compresor, como también se ha dicho (y que es lo que se suele hacer en las apliacciones javascript, una versión “editable”, y una versión para usar hipercomprimida).Saludos!

  2. proclamo says:

    No entiendo cómo al navegador le va a costar menos tiempo leer con retornos de carro que sin ellos. Me explico: cualquier parser estará programado para recoger caracteres hasta que encuentre un retorno de carro, o un espacio, o una tabulación, o un punto y coma (y alguna otra más que se me debe quedar en el tintero). Siempre tendrá que hacer las comparaciones, lo hayas escrito como lo hayas escrito.

  3. Lemming says:

    Tecnorama: Normalmente uso esa forma de colocar todas las propiedades de “espacio” delante y las “visuales” después.Alwaison: Esa es la mejor forma de todas, pero hemos tenido algún problema con las herramientas de compresión de CSS, y para evitar problemas uso este método.Saludos 😉

  4. Alwaison says:

    Pues si os digo la verdad, yo prefiero crear los archivos css a mi manera, con los saltos de linea, tabulaciones, etc… y a la hora de subirlos a la web, comprimirlos a traves de un compresor de CSS online.Concretamente este (http://iceyboard.no-ip.org/projects/css_compressor), reduce una media del 30% del peso del archivo, al menos usando la notación que yo uso, claro :PSi se quieren tener tambien los originales en el ftp, se pueden tener en otra subcarpeta.Un saludo 😀

  5. Tecnorama says:

    Interesante post que demuestra que, para gustos, los colores. Me explico:Mi teoría es que en el trinomio desarrollador-navegador-usuario hay que darle siempre al más tonto (el navegador, no el desarrollador): si no hay beneficio para el usuario (la mejora son centésimas) y complica el trabajo al programador, que se lo coma el que no se queja.En tu caso hay un pequeño truco: son reglas con unos pocos atributos pero, ¿qué sucede si hay una docena?:#contenido{background-color:#CCFF33; font-family: Arial, Helvetica,sans-serif; font-size: 12px; font-weight: bold; color: #0033FF; background-image: url(fondo.gif); background-repeat: repeat-x; background-position: left top; margin: 10px; padding: 10px;float: left; height: 400px; width: 600px; border: 1px solid #0099CC}La solución en este caso puede ser mantener una ligera consistencia la hora de definir los atributos (por ejemplo, de afuera hacia dentro (position,margin,border, padding) y de abajo hacia arriba (background, fuentes).Sin embargo, creo que lo que debemos es conseguir escribir lo menos posible: en este caso el beneficio es triple: menos código, menos carga y más rapidez.Para ello existen trucos bastante eficaces en CSS: la notación corta y la combinación de estilosun ejemplo: imaginemos que tenemos una lista de noticias en las que algunas deben aparecer destacadas. La vagancia nos haría escribir:.noticia{border-style:dotted;border-width:2px;border-color:#CC9933}.noticiaImportante{border-style:solid;border-width:2px;border-color:#CC9933;background-image: url(fondo.gif); background-repeat: repeat-x; background-position: left top;}Pero si somos aún más vagos y aprovechamos la notacion corta y la duplicacion (e incluso la sobreescritura) nos podemos quedar con:.noticia{border:2px dotted #C93}.importante{border-style:solid;background:url(fondo.gif) repeat-x 0 0}Y luego combinarlo en la etiqueta:p class=”noticia” (noticia normal)p class=”noticia importante” (la noticia destacada)y ya acabo el sermón: Acerca de importar css, también debemos jugar con la cache del navegador: En la mayoría de las ocasiones el navegador comprobará si tiene el archivo en caché y no volverá a solicitarloHala, ya me he quedado a gusto 😎

  6. Lemming says:

    Hola Ainhoa,En lo de separar me refiero a que tras leer mucho sobre css encontré que la la mayoría recomendaba usar un archivo base.css, por ejemplo, y en el hacían los imports hacia los otros archivos css (estructura.css, formularios.css, …), esto puede ser útil para el que programa pero no óptimo para la ejecución en el navegador. Cada archivo “import” es una petición de un archivo hacia el servidor y eso como es lógico ralentiza la carga de la misma página.Ojo, no estoy diciendo que mi forma sea la mejor, cada cual elige la que mejor le convenga, pero si la mas óptima de cara a la carga de la web en el navegador.Y está claro, incrustar en el “header” del xhtml no es la mejor práctica, y bueno si tus css son muy largos intenta reducir saltos de linea y espacios en blanco, así como los “;” finales antes de cerrar un “}”, estos no sirven para nada ;)Tengo cuatro apuntes sobre optimización de imágenes, a ver si consigo hace un breve artículo con ello y seguimos hablando de optimización lógica 😀

  7. Ainhoa says:

    Cuando dices: ”es mejor separar estructura de diseño en el CSS y en archivos separados uniéndolos todos en una base usando el import“ ¿te refieres a hacer varios archivos css distintos e importarlos todos?.Yo normalmente utilizo el import, pero hago un sólo archivo css. ¿Eso es lo correcto?. Porque según yo tengo entendido lo que no se debe hacer es integrar el css en el propio Xhtml :SMe ha gustado mucho el post, ya sospechaba yo que mis css eran demasiado largos…empezaré a revisarlos 😀

Deixa una resposta

Want to join the discussion?
Feel free to contribute!

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *