Optimizar ficheros css para disminuir el tiempo de carga de la web
Veamos como comprimir y unir ficheros css para optimizar la carga de una web, y por tanto disminuir el timepo de carga.
Como ya explicamos en una artículo anterior, en ocasiones encontramos problemas que afectan al tiempo de carga de nuestra web. Llamamos a muchas hojas de estilo desde nuestra página, con lo que se crea una petición al servidor por cada llamada. Hay una manera de optimizar este proceso para comprimir los ficheros css y unirlos en uno solo para hacer una sola llamada.
Partimos del siguiente código
<html>
<head>
<title>Titulo pagina</title>
...
<link rel="stylesheet" type="text/css" href="http//www.laweb.es/css/style.css" media="all"/>
<link rel="stylesheet" type="text/css" href="http//www.laweb.es/css/responsive.css" media="all" />
<link rel="stylesheet" type="text/css" href="http//www.laweb.es/css/flexslider.css" media="all" />
<link rel="stylesheet" type="text/css" href="http//www.laweb.es/css/galerias.css" media="all" />
<link rel="stylesheet" type="text/css" href="http//www.laweb.es/css/formularios.css" media="all" />
....
</head>
<body>
...
</body>
</html>Podemos ver que dentro de la carpeta css tenemos varios ficheros CSS que llamamos desde la web. Esto solo es un ejemplo, y normalmente puede darse el caso de muchas mas llamadas…
Primer paso
Vamos a unir todos los ficheros .css en uno solo. Esto va para los que trabajáis en Linux ( los windowseros buscad el equivalente … ). Desde la consola, navegáis hasta la carpeta donde estan todos los ficheros y ejecutáis la siguiente orden:
cat *.css > unido.cssCon esto unimos el contenido de todos los ficheros un uno solo, unido.css
Segundo paso
Visitamos CSS Compressor. Abrimos el fichero ‘unido.css’ que hemos creado con un editor. Seleccionamos todo el texto. Lo copiamos en el portapapeles (Editar > Copiar). Vamos a la web CSS Compressor y pegamos el código en el textarea «Your CSS Code».
- Desmarcamos ‘Leave space between selectors’ y ‘Leave space between properties’
- Marcamos ‘Remove all newlines’
- Marcamos ‘Strip ALL comments’
Pulsamos sobre ‘Compress It’. Se nos muestra el código comprimido. Lo copiamos y lo pegamos en un nuevo fichero llamado ‘min.css’ alojado en la carpeta ‘css’
Ahora tenemos todos los CSS en un solo fichero y comprimido. Ahora solo haría falta llamarlo desde la página.
<html>
<head>
<title>Titulo pagina</title>
...
<link rel="stylesheet" type="text/css" href="http//www.laweb.es/css/min.css" media="all"/>
....
</head>
<body>
...
</body>
</html>Las ventajas son la reducción de carga. La desventaja, es que cada cambio o modificación requerirá hacer de nuevo todo el proceso. Para dos minutos que cuesta una vez lo tienes claro, merece la pena.
Si lo has encontrado interesante, igual también te interesará el artículo Optimizar ficheros js para disminuir el tiempo de carga de la web.
alguien puede ayudarme por favor!! :( tengo una duda muy grande
Coméntanos David, que duda tienes ?
Mi duda es la Siguiente!:
este es es mi sitio web de pruebas: http://www.events360.ca/beta2
esta hecho en Joomla, lo estoy preparando para optimizarlo y ponerlo lo mas optimo posible y mejor organizado!…
quisiera tener solo dos o tres CSS para todo el sitio web, por ejemplo:
1 – template.css
2 – Components.css
3 – modules.css
Soy nuevo en Esto y no tengo idea como hacer para que los componentes, modulos etc.. lean el mismo CSS, me eplico?
Vayamos por pasos:
Recuerda hacer copias de seguridad antes de trabajar.
Cada cambio en el diseño, obliga a hacer de nuevo todos los pasos. El fichero min.css es muy difícil de editar. Por lo que tendrás que ir editando los dicheros normales, volverlos a juntar y volverlos a comprimir online. Por eso lo ideal es hacer esto al final de todo, cuando ya tengas la web finalizada.
Si quieres optimizar aún mas, trabaja el tema de las caches dentro de Joomla.
Podrían decirme el orden de carga de los elementos?? tengo entendido que la hoja de stilo es o que 1º se carga y puede retrasar al resto de la web
Hola Luis,
las hojas de estilo se cargan entre las etiquetas ‘head’ de la página web. Como bien comentas, el navegador debe cargar inicialmente todo lo que le pones en el head, cosa que puede realentizar la carga. Son mas las cantidades de llamadas al servidor que los ficheros en si. Lo ideal para la carga es poner todo en el mínimo de ficheros para que las llamadas sean mínimas, pero eso va en contra de la agilidad en el mantenimiento de la web.
En el ejemplo que expongo, uno varios ficheros .css (para hacer una sola llamada de descarga) y luego se comprime para que ocupe menos. Mejoramos la cantidad de llamadas, y el peso.
El objectivo es el que marcas, minimizar el tiempo de carga.
Sobre el orden, solo debes tener en cuenta que si defines un elemento en dos hojas de estilo diferentes, el elemento cogerá el estilo de la última hoja de estilo cargada.