Aligera tus CSS

Anieto2k publica en su blog una traducción al castellano de un artículo de ask the css guy (www.askthecssguy.com/) que nos explica como aligerar nuestros CSS para ganar velocidad de carga. Enlace original en inglés www.askthecssguy.com/2006/12/keeping_css_file_sizes_lean_fo_1.html

[#1 gallir]

Veo muy mal esa página en konqueror, y me probé el validador de CSS: jigsaw.w3.org/css-validator/validator/?uri=http://www.anieto2k.com/200

Antes de ponerlo a dieta es conveniente que sea estándar

[#2 jotape]

#1 cara de pito

[#3 luces]

#1: igual, en Firefox versión Windows también aparecen algunos problemas en el pie de la página...

[#4 ignoto]

Lo que ocurre es que el pie de página es "poco ligero"

[#5 --4937--]

Ahora en serio, si quereis aligerar los CSS (es importante, estos archivos se cargan casi en cada impresion) recomiendo lo tipico, una buena estructuración que cualquiera puede imaginarse y usar esta herramienta (1) para "comprimir" el texto.

(1) www.creativyst.com/Prod/3/ - Herramienta online, comprime CSS y ofusca javascript reduciendo el peso.

[#6 Liveral]

No recuerdo la nomenclatura, pero la última propiedad de cada contenedor (h1,p,body ...) no necesita el punto y coma. Por ejemplo :

h1 {
background-color : black;
color : #777;
text-align : left }

[#7 sauco82]

#5 por curiosidad he comprimido el código de #6 con el programita... y ha pasado de 64 bytes a 65

[#8 gallir]

#5, GONZO, sólo se carga cada vez su el navegador o el proxy no van bien y no usan el If-Modified-Since. Si lo usan, la mayoría de las conexiones dan "304". Por ejemplo del menéame:

85.53.137.XXX - - [26/Dec/2006:01:31:31 +0100] "GET /css/es/mnm18.css HTTP/1.1" 200 5740 "meneame.net/"; "Mozilla/5.0 (Windows; U; Windows NT 5.0; es-ES; rv:1.7.10) Gecko/20050717 Firefox/1.0.6"
194.69.224.XXX - - [26/Dec/2006:01:31:31 +0100] "GET /css/es/mnm18.css HTTP/1.0" 304 - "meneame.net/"; "Mozilla/5.0 (Windows; U; Windows NT 5.0; es-ES; rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9"
84.121.142.XXX - - [26/Dec/2006:01:31:33 +0100] "GET /css/es/mnm18.css HTTP/1.1" 200 27128 "meneame.net/shakeit.php?category=13"; "Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1"
81.202.232.XXX - - [26/Dec/2006:01:31:34 +0100] "GET /css/es/mnm18.css HTTP/1.1" 304 - "meneame.net/story/occidente-infierno-para-musulmanes"; "Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9"
80.34.28.XXX - - [26/Dec/2006:01:31:36 +0100] "GET /css/es/mnm18.css HTTP/1.1" 200 5740 "meneame.net/story/voces-contra-globalizacion-nuevo-programa-tve2"; "Mozilla/5.0 (Macintosh; U; Intel Mac OS X; es) AppleWebKit/418.9.1 (KHTML, like Gecko) Safari/419.3"
81.38.103.XXX - - [26/Dec/2006:01:31:36 +0100] "GET /css/es/mnm18.css HTTP/1.1" 304 - "meneame.net/shakeit.php"; "Opera/9.00 (Windows NT 5.1; U; es-es)

Y sin lugar a dudas, lo mejor que se puede hacer es comprimirlos con el Apache (blog.meneame.net/2006/12/10/actualizaciones-verias/), basta con:

<IfModule mod_deflate.c>
AddOutputFilter DEFLATE css
</IfModule>

[#9 f5inet]

#5: creo que precisamente toda la zarandanja de XML+XSLT+CSS tiene por objetivo que tanto los XSLT como los CSS, que son archivos que TEORICAMENTE cambian poco, se encuentren en la cache del cliente, de tal forma, que el servidor tan solo emitiendo un XML de pocos bytes, el cliente pueda componer la pagina web completa, produciendo un ahorro de ancho de banda considerable en el server. amen que puesto que se transfieren menos bytes por request, la velocidad percibida es mayor.

[#10 CaNeLa]

#8 pues no se yo al menos en el log de mi apache en cada impresion carga la url que desea ver, las imagenes (quitare lo de logear la carga de imagenes para agilizar) y el estilo css ... asi que no se que le ocurre a mis visitas

[#11 aNieto2k]

#1 Siento los problemas que hayas tenido con mi página, estoy todavía puliendo algunos detalles del nuevo diseño y estos son unos de ellos.

Un saludo