Trabajando con CSS: Considera evitar el uso de @import

Hace unos meses explicaba por este mismo blog cómo organizar la apariencia de una web con hojas de estilo en cascada y, aunque aparentemente, la organización que comentaba quedaba ideal de la muerte (así como todo muy clarito y bien ordenado) al final resulta que es una solución de la muerte, para nada ideal.

El problema está en que, en aquella ocasión, yo hacía hincapié en que era mucho más práctico tener una única llamada a la hoja de estilo en la cabecera de la web cargando los demás CSS dentro de otro y abusando de las posibilidades que brinda @import  como solución limpia y ordenada. Pero en la práctica este caso penaliza el rendimiento de la web y, por lo tanto, se desaconseja su uso.

Captura web de los resultados obtenidos con la propiedad import
Resultados de velocidad de carga obtenidos con la versión que emplea @import

Depurando código

Rehago pues la plantilla web creada para explicar aquello y compongo una nueva llamando a una única hoja de estilo desde la cabecera de la página web. Podéis husmear en sus entresijos, que para eso está: DEMO en vivo y DESCARGA de los archivos.

Como podéis ver en las capturas de pantalla que ilustran esta entrada, la versión que utiliza el recurso @import obtiene peores resultados en el test que Google pone a disposición de los desarrolladores (y cualquiera con interés) que esta nueva versión que no lo usa. Esto se debe al tiempo que tardan los exploradores en interpretar las distintas llamadas: aquellas hechas mediante @import se leen una a una, mientras que las integradas en el <head> de la web pueden ser descargadas a la vez. Google lo explica mejor, pero en inglés.

Captura web de los resultados obtenidos con PageSpeed sin import
Resultados de velocidad de carga obtenidos con la versión que NO emplea @import

Fragmento de HTML del <head>

Igualmente, dejo aquí en código los cambios esenciales que os vais a encontrar respecto a la versión anterior.

<!-- [Estilo CSS] -->
<!-- A fin de mejorar el tiempo de carga de la web, hago desde aquí todas las llamadas a hojas de estilo evitando utilizar @import dentro de las mismas. Sólo una llamada en este caso... -->
<link rel="stylesheet" href="css/estilo.css" type="text/css" media="screen, projection" />

<!-- [Referencia de tamaño necesaria para móviles y tabletas] -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Por supuesto, el ejemplo viene comentadísimo (más que esta vista rápida) y con la estructura y los espacios adecuados para que no resulte una tortura leer su código fuente, que es de lo que se trata. En el momento que esto tuviera que ser llevado a una web-no-de-ejemplo, debería ser adecuadamente minificado.

¡Comenta!

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.