---
title: "Más velocidad al unificar los CSS de tu web"
date: "2010-09-13T12:34:08+02:00"
modified: "2019-05-10T18:29:59+02:00"
author: "David Carrero Fdez-Baillo"
section: "Diseño y fotografía"
canonical: "https://carrero.es/mas-velocidad-al-unificar-los-css-de-tu-web/"
site: "Carrero"
---

# Más velocidad al unificar los CSS de tu web

![](https://carrero.es/wp-content/uploads/2010/09/pagespeed.gif)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](http://www.w3.org/TR/CSS2/media.html).  
 vía: Sigt

---

Fuente: https://carrero.es/mas-velocidad-al-unificar-los-css-de-tu-web/