Optimizar ficheros css para disminuir el tiempo de carga de la web

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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:

1
cat *.css > unido.css

Con 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.

1
2
3
4
5
6
7
8
9
10
11
<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.

[wp_ad_camp_2]

Artículos relacionados

HTML5 – Números de teléfono Muchas veces, al hacer una página 'responsive' ponemos en nuestro código un teléfono. HTML5, sobretodo en los navegadores de móviles, pueden hacer que...
GroundworkCSS el diseño Responsive hecho sencillo Os presentamos un FrameWork para el diseño Responsive que nos ha sorprendido gratamente. Groundwork. Es gratuito y OpenSource. El tratamiento ...
Socialite.js – Botones sociales en su web Una pequeña librería JavaScript que permite poner los botones sociales de Facebook, Twitter, Google y LinkedIn de forma fácil en cualquier web o blog....
GroundWork CSS – 04 – Framework HTML5 ... Último de los cuatro vídeos del tutorial para la creación de páginas web responsive con el framework GroundWork CSS. En este caso vemos como crear el ...

6 comentarios

  • alguien puede ayudarme por favor!! :( tengo una duda muy grande

  • 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:

      • Dentro de la carpeta template debes tener la carpeta de tu templete llamémosla events360
      • Dentro de ésta, habrá la carpeta css con todas las hojas de estilo (ficheros .css)
      • Si trabajas con windows, abres todos los ficheros .css y vas copiando-pegando en un único .css
      • Sigue los pasos de éste arítulo para comprimirlo (lo subes a internet y te lo devuelve limpio)
      • Una vez lo tienes limpio en un solo fichero, llamémosle min.css, vamos al fichero index.php de tu template y normalmente ahí estará las llamadas a las hojas de estilo.
      • Borras o comentas las actuales, y obligas la llamada a solo el fichero min.css

      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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*