Más velocidad al unificar los CSS de tu web

Cada día es más importante la velocidad de carga de nuestras páginas webs y una de las cosas que sin duda ayuda a esto es reducir el número de ficheros que tenemos que abrir o consultar, tanto para CSS como para Javascript.

Unificar varios CSS en un único fichero de estilo para realizar una única petición HTTP es una tarea realmente sencilla. Solo tenemos que crear un fichero CSS con el contenido de todos nuestros CSS independientes y definirlos con @media.

Donde ahora tenemos esto:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="screen" />
<link rel="stylesheet" href="header.css" type="text/css" media="screen" />

Pasaríamos a tener una única llamada a un único CSS que contendría algo así:

@media screen {
aquí el CSS del style.css
}
@media print {
aquí el CSS del print.css
}
@media header {
aquí el CSS del header.css}

Además podemos definir todos los media disponibles que tengamos en nuestra página web. Y recuerda que ahora en la definición de link sobra el media y quedaría algo así:

<link rel="stylesheet" href="style.css" type="text/css" />

Probar y veréis como una sencilla prueba en PageSpeed os dará un mejor resultado. Pero seguro que hay más cosas que puedes mejorar en tu página, pon empeño en ello porque redundará en una mayor velocidad de carga y además Google se sentirá más cómodo con tu sitio web.

Más información: Definición de media en w3.
vía: Sigt