7

Optimiza tu CSS

27Ene
en CSS, Herramientas, Tutoriales

9Siguiendo con el anterior post de optimización, hoy veremos algunos consejos para optimizar el CSS de nuestras webs.

Comprime el código CSS

Es cierto que es una buena práctica comentar e identar los CSS, pero al navegador eso no le interesa, así que el  código que esté listo para la publicación lo ponemos comprimido en el servidor. Para eso existen varias herramientas automatizadas. Yo les propongo el uso de YUI compressor.

YUI Compressor 2.4.8

0.75 MB

Como está hecho en Java debemos tener instalado alguna de  las versiones de la JVM superior a la 1.4. Para ejecutarlo abrimos una consola y nos ubicamos en la dirección donde tenemos el fichero yuicompressor-2.4.8.jar, en mi caso está en el escritorio.

cd C:\Users\abs\Desktop\

Ponemos el fichero CSS (style.css en mi caso) que interesa comprimir en la misma carpeta y escribimos en la consola el siguiente comando.

java -jar yuicompressor-2.4.8.jar style.css -o style-min.css

El fichero de estar así:

.center {
width: 960px;
margin: 0 auto;
}

/* --- Estructura --- */

.intro {
margin: 100px;
position: relative;
}

Pasa a esta forma comprimida.

.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}

Si queremos que convierta todos los ficheros CSS de un directorio, hay que poner este comando.

java -jar yuicompressor-2.4.8.jar -o '.css$:-min.css' *.css

Un CSS comprimido, aumentará la velocidad del proceso de carga y ejecución.

Utiliza <link> antes que @import

Hay dos formas de incluir hojas de estilo externas en tu página: mediante la etiqueta <link>:

<link rel="stylesheet" href="style.css">

O mediante la directiva @import (dentro de una hoja de estilos externa o una etiqueta <style>):

@import url('style.css');

Cuando usas la segunda opción dentro de una hoja de estilos externa, el navegador no es capaz de descargar el archivo en paralelo, lo que puede bloquear la descarga de otros archivos.

Esto es todo por hoy, en el próximo tutorial veremos cómo optimizar los códigos JavaScript.

7 Comentarios

  1. zico dice:

    También el YUI Compressor comprime y ofusca los archivos Javascript. Lo he usado desarrollando en Sf2 y realmente agilizan el rendimiento.

  2. Yosbel Marin dice:

    java -jar yuicompressor-2.4.8.jar style.css -o style-min.js
    hay un error, la salida es a un .css y no a .js

  3. Jorge Luis dice:

    Para el caso de sf2 cuando se combina con assetic, se puede lograr que lo haga de forma automática y que mantenga en la url un id representativo de la versión del archivo, de modo que se pueda cachear el mayor tiempo posible del lado del cliente. Realmente yuicompressor lo uso desde hace un tiempo, combinado con less y coffee script, una combinación muy interesante.

  4. omar dice:

    Hola quiero juegos para el movil en formato jar ayudenme a buscarlos en la red.Escribanme

Dejar un comentario