13 Jul 2016
Optmización CSS
Lectura: 14 mins.
|
Dificultad:

Optimización CSS para mejorar el rendimiento de tu web

El objetivo más importante de cualquier sitio web es lograr la conversión y el modo de componer y estructurar contenidos de calidad es la principal clave para el éxito. En la mayoría de los casos en que una web no alcanza los objetivos deseados —a pesar de existir muchas causas que pueden desfavorecer la tasa de conversión— el diseño de la landing page tiene mucho que ver. Todos sabemos que un gran diseño web y las conversiones suelen ir de la mano.

El aspecto de los sitios web habitualmente está basado en hojas de estilo (CSS). Los estilos de CSS no son más que las instrucciones que el navegador web lee antes de cargar una página para saber la estructura que deben tener todos los elementos que la componen.

CSS son las siglas de Cascading Style SheetsHojas de Estilo en Cascada. Esta clase de archivos tienen la extensión .css.

El uso de CSS ayuda a que la estructuración de la página sea más sencilla. Las hojas de estilo son archivos externos que se encargan de definir en cada componente que utilizamos en nuestra página web (párrafos, títulos, botones, imágenes, etc.)  el formato de estilo que queremos que tengan. Por ejemplo, el tamaño de un titular, el posicionamiento de una imagen, el color que queremos utilizar en las letras, los márgenes definidos entre un contenedor y otro…

Normalmente, nos centramos en que nuestra página web “quede bonita y sea eficaz”, pero no nos percatamos de que un mal uso sobre las hojas de estilo nos puede suponer problemas. El cuidado y la optimización de los estilos CSS es algo que tenemos que tener en cuenta:

  1. Utiliza archivos externos para enlazar la hoja de estilos con el HTML de tu página.
  2. No relaciones más de una hoja de estilos CSS externa.
  3. No uses “@import” para enlazar archivos CSS externos, usa “<link>”.
  4. Comprime tus hojas de estilo.
  5. Emplea CSS Sprite para optimizar tus imágenes.
  6. No cambies el tamaño de las imágenes en el HTML.
  7. Los estilos arriba, los scripts debajo.

1. Utiliza archivos externos para enlazar la hoja de estilos con el HTML de tu página

Estos son los tres métodos más utilizados a la hora de enlazar los estilos CSS con el HTML de la página web:

  • Mediante un archivo externo, un archivo de texto con extensión .css, el cual se vincula a la página con un enlace en la cabecera del HTML, en el <head>:
<link rel="stylesheet" type="text/css" href="ruta del archivo.css" />
  • Otro modo es insertar directamente los estilos CSS en la página, de manera parecida al anterior método, en el área del <head> de la siguiente forma:
<style type="text/css"> CÓDIGO DE LOS ESTILOS CSS </style>
  • Y la otra forma es insertando el código de los estilos en una etiqueta style directamente en los contenedores <div>, en los párrafos, en las imágenes… en cualquier elemento que contenga tu pagina web, por ejemplo:
<div style="ESTILOS CSS">/div> 
<img style="ESTILOS CSS" /> 
<p style="ESTILOS CSS"></p>

Sobre el primer método que hablamos, el método de vincular archivos “externos”, no sólo mejora la organización de tu código, sino que beneficia a la carga de las páginas web, hace que se carguen de manera más ligera. El navegador carga una única vez la hoja de estilos CSS y la conserva cacheada. Esto significa que cuando vuelven a cargarse las páginas, los archivos externos no requieren cargarse de nuevo. Esta opción suele ser la más apropiada en la mayoría de los casos.

Los dos últimos métodos suelen ser más factibles cuando tienes una página compuesta por pocos elementos y los estilos CSS que vas a incluir en ella son mínimos. A pesar de que estos métodos disminuyen el número de solicitudes HTTP, (no necesitan que el navegador cargue un archivo externo) aumentan el tamaño de tu documento HTML.

2. No relaciones más de una hoja de estilos CSS externa

Cuando tienes varios archivos CSS externos, el navegador tiene que descargar cada uno de ellos antes de que empiece a descargar tu página.

A la hora de descargar todos los archivos CSS, provoca que se convierta en una página web lenta y pesada. Esto se puede solucionar fácilmente mediante la combinación de todos los archivos CSS en un solo archivo. Por ejemplo:

<link rel="stylesheet" href="estilos1.css">
<link rel="stylesheet" href="estilos2.css">
<link rel="stylesheet" href="estilos3.css">
<link rel="stylesheet" href="estilos4.css">
<link rel="stylesheet" href="estilos5.css">

Para cada uno de estos archivos, hace falta una solicitud HTTP y, como bien sabemos, los navegadores solo pueden descargar un número limitado de recursos en paralelo. Es decir, el navegador va a comenzar la descarga de cada uno de los archivos, llegando al punto en el que bloqueará la descarga del resto.

Por lo tanto, el contenido de todas las hojas de estilo anteriormente listadas lo combinaremos en un único archivo .css.

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

Tener un menor número de archivos implicará que el navegador tenga un menor número de solicitudes HTTP y que, por lo tanto, la carga de tu página web sea más rápida.

3. No uses “@import” para enlazar archivos CSS externos, usa “<link>”

Como ya hemos dicho, la manera más eficaz para enlazar las hojas de estilo con el código HTML es utilizar archivos externos. También sabemos que esos archivos externos (las hojas de estilos CSS) se cargan mediante un enlace en la cabecera del HTML, <head>. Ahora bien, existen dos maneras y las dos funcionan de formas diferentes para conseguir un mismo objetivo, cargar un fichero .css, y darle color y forma a nuestro contenido:

  • Mediante la etiqueta <link>:
<link rel="stylesheet" href="estilos.css">
  • O mediante la directiva @import (esta etiqueta va incluida dentro de una hoja de estilos externa o en una etiqueta <style>):
@import url('estilos.css');

Cuando usas la segunda opción (@import)  dentro de una hoja de estilos externa, el navegador no es capaz de descargar los archivo en paralelo (todos al mismo tiempo), sólo se pueden descargar de uno en uno, lo que requiere tiempo y hace que la carga de la pagina web sea más lenta.

En definitiva, utilizar esta directiva @import realmente afecta a la velocidad de la página web y muchos lo hacen todavía, pero es recomendable evitarlo y utilizar la etiqueta <link>.

4. Comprime tus hojas de estilo

Para  mantener un código legible en la hoja de estilos (CSS), es una buena idea escribir comentarios:

.contenedor {  
    width: 950px;  
    margin: 10 auto;
} 

/* --- Estructura --- */ 
.cuerpo {  
    margin: 100px;  
    position: relative;
}

Pero para el navegador, esto no tiene importancia. Lo que debes recordar siempre es comprimir tu CSS mediante herramientas automatizadas, esto si es de gran importancia para el navegador. Las  hojas de estilo deben descargarse rápidamente para que nuestro navegador aplique los estilos lo antes posible y por ello se recomienda que no ocupen más de 100 kb por fichero CSS.

Una herramienta fácil, sencilla y online que te ayudara a optimizar tu css es Minify:

Comprimir hojas de estilo con MinifyVeamos un ejemplo sencillo con esta herramienta:

  • Introduces tus estilos CSS en la caja de texto izquierda, “CSS input”:

Comprimir hojas de estilo con Minify

  • Presionas el botón “Minify” y te devolverá todo el código de estilos optimizado:

Comprimir hojas de estilo con MinifySolo tendrás que seleccionarlo y sustituirlo por tus estilos CSS. Este simple paso quitará bytes al archivo, lo que redundará en un proceso de descarga, análisis y ejecución más rápido.

Esta misma herramienta actúa de la manera contraria también; es decir, si necesitas volver a tener los estilos estructurados, cada elemento con sus estilos definidos de manera fácil y visible, para modificarlos:

  • Debes incluir el código de estilos optimizado en la caja “CSS Input”:

Descomprime archivo CSS con Beautify

  • Y esta vez presionar sobre el botón “Beautify”:

Descomprime archivo CSS con Beautify

Esto hace que tu hoja de estilos se vuelva a ver de manera “bonita” y “fácil” para hacer cualquier tipo de modificación en ella.

Aparte de esta herramienta online, hay muchas más que hacen la misma función y su uso es parecido.

5. Emplea CSS Sprite para optimizar tus imágenes

Cuando lo que queremos es mejorar la velocidad de carga de un sitio web es muy recomendable utilizar CSS Sprite, lo que viene a ser una gran imagen que contiene una agrupación de diferentes imágenes más pequeñas.
CSS sprite para optimizar las imágenes de tu web

Con la ayuda de CSS, podemos mostrar una parte concreta de la imagen. De esta manera podemos hacer flotar botones, iconos… Si por ejemplo necesitamos mostrar el icono de Twitter 20 veces, con este método evitamos tener que meterlo como 20 imágenes, reduciendo el peso de la página y el tiempo de carga.

Ejemplo de uso de CSS Sprite

Tendremos una sección con iconos que enlazan a distintas redes sociales. Al pasar el ratón por encima de cada uno de estos iconos, cambiaremos la imagen por otra.

CSS sprite para optimizar las imágenes de tu webEn la imagen podemos ver mejor la idea que queremos mostrar. Al principio tenemos los iconos con un tono grisáceo que dan sensación de inactividad, pero al pasar el ratón se sustituirán por el mismo icono con color.

Lo primero que debemos hacer es crear nuestra imagen sprite que contenga todos los iconos que queremos utilizar.

CSS sprite para optimizar las imágenes de tu webEl siguiente paso será crear la estructura HTML de las redes sociales que dará forma a nuestro ejemplo:

<div class="redes-sociales">
     <a href="#" class="twitter"></a>
     <a href="#" class="facebook"></a>
     <a href="#" class="google"></a>
     <a href="#" class="instagram"></a>
</div>

En este caso creamos un contenedor <div> donde colocaremos los distintos enlaces a nuestras redes sociales.

Una vez creado, lo que  haremos será indicarle tanto al contenedor como a la red social correspondiente (en este caso Facebook) que la imagen de fondo es aquella que incluye todos los iconos. La hemos llamado “sprite-image.png” y para indicar esto hacemos uso de la propiedad “background” en nuestra hoja de estilos.

.redes-sociales a.facebook {
     background: url(sprite-image.png);
}

Lo siguiente, para saber la posición de cada icono que queremos mostrar, hay que medir desde la esquina superior izquierda y en dirección hacia la derecha y hacia abajo, indicando en estos casos valores negativos.

Por ejemplo, vamos a posicionar el icono de Facebook grisáceo:

Nos hemos tenido que desplazar -39px (píxeles) hacia a derecha y 0 px hacia abajo (cero píxeles porque el inicio de la imagen de Facebook está en la parte superior de la imagen).

CSS sprite para optimizar las imágenes de tu webEsto se indica con la propiedad “background-position” y el código CSS para mostrar el icono grisáceo de Facebook quedaría así:

.redes-sociales a.facebook {
     background: url(sprite-image.png);
     background-position: -39px 0px;
}

A continuación, cuando el ratón pase por encima del icono de Facebook, deberemos mostrar  la imagen en color. Si nos fijamos, la imagen está alineada verticalmente con la anterior (la grisácea), por lo que el desplazamiento horizontal será el mismo (-39px), solo tendremos que ajustar la posición vertical para que se muestre la imagen correcta.

En este caso desplazamos la imagen -40px (pixeles) hacia abajo.

CSS sprite para optimizar las imágenes de tu webA través de la propiedad “background-position” incluimos el :hover (se presenta cuando el usuario coloca el puntero sobre algún elemento, pero no necesariamente está activo, en este caso para mostrar el icono en color). Para el icono de Facebook, quedaría así:

.social a.facebook:hover {
     background-position: -39px -40px;
}

El código completo de estilos CSS para el icono de Facebook quedaría así:

.social a.facebook {
     background: url(sprite-image.png);
     background-position: -39px 0px;
}
.social a.facebook:hover {
     background-position: -39px -40px;
}

Esto mismo hay que repetirlo con cada uno de los distintos iconos. Habrá que ajustar los valores para mostrar la imagen en cada sitio correspondiente.

Como resultado, has reducido el número de solicitudes HTTP y evitado cualquier retraso potencial de otros recursos en tu página.

Cuando estás usando tu sprite, evita dejar demasiado espacio en blanco entre imágenes. Esto no afectará al tamaño del archivo, pero tendrá efecto en el consumo de memoria. Y pese a que casi todo el mundo conoce las sprites, esta técnica no está demasiado extendida.

6. No cambies el tamaño de las imágenes en el HTML

Si  tienes una imagen de 300 x 300 px  y decides reducir el tamaño usando los atributos width y height para mostrar la imagen como 50 x 50 px, lo que realmente estás haciendo es enviar unmontón de kilobytes innecesarios.

Sólo porque puedas definir el alto y el ancho de una imagen en HTML, no significa que debas usarlo para reducir el tamaño de imágenes grandes.

No redimensiones: es absurdo subir una imagen de 300 píxeles de ancho si después la vas a mostrar a 50. Es esencial que hagas un trabajo previo y adaptes las imágenes al tamaño en el que quieres mostrarlas.

7. Los estilos arriba, los scripts debajo

No se trata únicamente de un asunto de limpieza y orden del código, sino que tiene importancia en el tiempo de carga de la página y en la experiencia del usuario mientras se realiza dicha carga. Muchos estudios establecen que el tiempo medio de carga de una web está en torno a 7 segundos y todo lo que lo supere ese tiempo estimado, hace perder usuarios, consiguiendo que se marchen de la página antes de que cargue.

Colocar los enlaces CSS arriba y los script debajo es algo lógico pero casi nunca se hace. Evidentemente los CSS deben estar al inicio de la web para que se cargue ligeramente, pero los scripts no deben obstaculizar la carga de la página. Lo suyo es crear un espacio para todos los script al final del HTML, justo antes del cierre de </body>.

Cuando ponemos hojas de estilo en el <head> permitimos que la página se muestre paso a paso, lo que da la impresión a nuestros usuarios de que la página está cargando rápido.

<head>  
     <meta charset="UTF-8">  
     <title> CSS </title>    

     <!-- CSS -->  
     <link rel="stylesheet" href="estilos.css">
</head>

Pero si decidimos poner la hoja de estilos al final de la página, la página se mostrara sin estilos hasta que el CSS se descargue y aplique.

Por otro lado, cuando tratamos con JavaScript, es importante poner los scripts al final de la página, ya que bloquean el renderizado mientras se están descargando y ejecutando.

<body>  
     <p>Lorem ipsum dolor sit amet.</p>   

     <!-- JavaScript -->  
     <script src="script.js"></script>
</body>

Que tengas una web con mucho tráfico, que este bien posicionada, que tu idea de negocio sea increíble o que proporciones a tus clientes un servicio insuperable no sirve para nada si cuando un visitante entra a la página web y esta tarda demasiado en cargar (6-7 segundos o más). Lo más probable es que prefiera salirse de la web y buscar otra.

Aunque parezca que no tiene importancia reducir un fichero CSS o script de 100 kb a 60 kb, por ejemplo, cuando nuestra página web crezca se verá afectado el rendimiento considerablemente, por lo que lo recomendable sería comprimir tanto los archivos CSS, JavaScripts, HTML e imágenes.

Es recomendable reducir lo máximo posible la cantidad de archivos CSS y scripts para evitar peticiones HTTP y conexiones innecesarias a nuestro servidor, cuantas menos conexiones menos tardará en cargar la página web completamente. Y más opciones tendremos para que el usuario se quede en nuestra web.