Tutorial Comprimir CSS para mejorar el tiempo de carga

Jota Marquez · 2012-08-27T20:36:51+0200

[TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Hasta hace un par de meses, el tiempo de carga no era importante para Google, pero con la llegada de Panda, empezó a ser mas relevante respecto al posicionamiento.

Si comprimimos un archivo con GZIP conseguiremos una ahorro de carga del 80%, un archivo que pesa 80kb puede llegar a pesar 10kb, con lo que conseguiremos que nuestro servidor tenga menor carga, mayor velocidad de descarga y si nuestro servidor tiene límite de transferencia mensual también conseguiremos un buen ahorro en este concepto. Deberiamos comprimir los archivos CSS, HTML, PHP,JS…

Para poder realizar las compresiones con GZIP es imprescindible que nuestro servidor posea el módulo mod_gzip (APACHE 1.3), sino no podremos realizarlas y deberemos usar alguna herramienta gratuita como puede ser cleancss.

Una vez comprobado que tenemos GZIP activado, tan sólo tendremos que incluir en nuestro archivo .htacces el siguiente código:

Código:

 mod_gzip_on Yes
 
      mod_gzip_item_include file \.html$
 
      mod_gzip_item_include file \.php$
 
      mod_gzip_item_include file \.css$
 
      mod_gzip_item_include file \.js$
 
      mod_gzip_item_include mime ^application/javascript$
 
      mod_gzip_item_include mime ^application/x-javascript$
 
      mod_gzip_item_include mime ^text/.*
 
      mod_gzip_item_include handler ^application/x-httpd-php
 
      mod_gzip_item_exclude mime ^image/.*

Si es apache 2.X podeis hacerlo con este codigo

Código:

# BEGIN GZIP
 
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
 
# END GZIP

Para comprobar cuanto pesaria la web comprimida podeis comprobarlo con http://www.port80software.com/products/httpzip/

Y para comprobar si está funcionando el gzip http://www.gidnetwork.com/tools/gzip-test.php

ezkielnet · 2012-08-27T21:01:45+0200

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Esto comprime toda la web y no específicamente el CSS. Para hacer el CSS más ligero basta con hacer unos cambios sencillos. Siempre se muestra así:

Código:

.wp-pagenavi {
    clear: both;
    margin: 20px;
}

Se deja así:

Código:

.wp-pagenavi {clear: both;margin: 20px;}

Es más difícil de leer pero para el navegador no, con lo cual la web carga mejor. El tutorial está bien y es muchísimo mejor comprimir por Gzip.

Jota Marquez · 2012-08-27T21:04:08+0200

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Tambien puedes maquetar normal, entendible, y luego existia un plugin, no me acuerdo ahora mismo como se hace, que quita todos los espacios blancos, todos los saltos de linea, etc...

gesio · 2012-08-27T21:04:29+0200

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

esto es cuando me jode estar el blogger.

:risas:

ezkielnet · 2012-08-27T21:22:02+0200

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Jose dijo:
Tambien puedes maquetar normal, entendible, y luego existia un plugin, no me acuerdo ahora mismo como se hace, que quita todos los espacios blancos, todos los saltos de linea, etc...

Pero usar Plugin consume bando de ancho y por lo tanto al final consigues el mismo efecto XD Cuanto menos plugins uses mejor.

Jota Marquez · 2012-08-27T21:23:58+0200

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

InsertC dijo:
Esto comprime toda la web y no específicamente el CSS. Para hacer el CSS más ligero basta con hacer unos cambios sencillos. Siempre se muestra así:

Código:

.wp-pagenavi { clear: both; margin: 20px; }

Se deja así:

Código:

.wp-pagenavi {clear: both;margin: 20px;}

Es más difícil de leer pero para el navegador no, con lo cual la web carga mejor. El tutorial está bien y es muchísimo mejor comprimir por Gzip.

InsertC dijo:
Jose dijo:

Tambien puedes maquetar normal, entendible, y luego existia un plugin, no me acuerdo ahora mismo como se hace, que quita todos los espacios blancos, todos los saltos de linea, etc...

Click para expandir ...

Pero usar Plugin consume bando de ancho y por lo tanto al final consigues el mismo efecto XD Cuanto menos plugins uses mejor.

Ya te digo no recuerdo si era un plugin o un codigo, la cosa es que te ponia todo sin saltos de linea, sin espacios...

josan · 2012-08-27T21:33:41+0200

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Hay muchas webs para comprimir ficheros CSS -> http://iceyboard.no-ip.org/projects/css_compressor

JozeNetz · 2012-08-27T21:37:19+0200

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Tambien para ahorrar el tiempo de carga se comprime toda la salida de el html con ob_start() y ob_end_flush() (en el caso de php)y para el css solo lo subo comprimido,pero nunca he usado GZIP(supongo que estará mejor ¿No?).
.

Jesam · 2012-08-29T04:27:34+0200

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Gracias por el aporte! me servirá de mucho, una buena forma de optimizar el tiempo de carga de nuestras webs.

Jorge Slayer · 2012-08-30T10:54:10+0200

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Gracias por el dato, para mí la programación es un misterio sin resolver

eaceful:

gesio dijo:
esto es cuando me jode estar el blogger.

:risas:

Trastea con algún dominio que tengas en un host gratuito... ¡no te arrepentirás!

Julio Rodríguez · 2012-08-30T10:55:57+0200

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

y si lo minimizas ya es la leche xddd

tranzorx · 26 Sep 2012

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Muy bueno el tutorial; para leerlo con tranquilidad y tomando notas.
El problema de los plugins es que empiezas a instalar los "esenciales" y a poco que te descuidas ya tienes más de 20, como es mi caso.
Otra cuestión que he leído es sobre el .htaccess, que aquí habrá personas que sabrán mucho más de todo esto.
Tengo el susodicho con tantas líneas de código , que la página me da en los pies cada vez que voy a abrirla.
Creo que el tip está en saber optimizar las funcionalidades con el tiempo de carga, pero no es una tarea nada fácil.

Cheers!!

Pablo de Valdivia · 26 Sep 2012

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Es curioso que desconocía esto y unas webs las tengo comprimidas y otras no, teniendo los mismos plugins instalados :roto2:

tranzorx · 26 Sep 2012

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Siguiendo con el tema de la optimización, me gustaría saber si alguien conoce un website como éste:
http://woorank.com

Hace medio año que es de pago con unos precios desorbitados. Sólo permite un ridículo check a la semana.
Cuando era gratis era mi herramienta de chequeo favorita porque tiene un rango amplísimo.

Pus eso, sería de agradecer que a ver si alguien puede aportar alguna alternativa.
Gracias.

Cheers!!

Pablo de Valdivia · 27 Sep 2012

RE: [TUTORIAL] Comprimir CSS para mejorar el tiempo de carga

Una pregunta. ¿Como se supone que tenemos que agregar el código para activar el GZIP??

En algún modulo?? Al final de todo el código antes de "# END WordPress"??

Donde ?? xD

Tutorial Comprimir CSS para mejorar el tiempo de carga

Comparte esta página