Optimizar la entrega de CSS

La entrega de CSS simplemente significa “la forma en que el CSS ocurre en una página web”. El CSS se puede utilizar de muchas maneras en una página web y aún funciona. Puesto que hay muchas maneras de usarlo, existen muchas configuraciones diferentes de CSS. El CSS debe ayudar a tu página web a hacerla más rápida, no a ralentizarla.

La forma en la que el CSS se utiliza en una página web ha sido “abrumadoramente” determinante para los diseñadores, no para los propietarios de sitios web. Así que el diseñador de páginas web realiza un código CSS impecable y bien escrito y lo distribuye en varios archivos diferentes para mayor claridad.

Piensan, con mucho mérito: “he hecho un trabajo increíble”. Esto es lo que les han enseñado. Lamentablemente esta y otras prácticas terminan destruyendo el rendimiento de las páginas web.

Gracias a este tipo de prácticas, te podrás dar cuenta de que los diseñadores web han comenzado a realizar códigos que ayuden a los usuarios, trabajando lo más rápido posible. Sin embargo es probable que tengas código CSS que esté perjudicando tu sitio web en lugar de ayudarlo.

Un ejemplo de una “entrega de CSS optimizado”.

Desde la página de documentación de Google, y en la página de vídeos de PageSpeed Insights, recomiendan 4 técnicas para tener una buena configuración CSS:

  • No más de una hoja de estilos CSS externa.
  • Instrucciones CSS cortas en las etiquetas de estilo para el contenido superior de la página.
  • No hacer llamadas (@import) de CSS.
  • No agregar líneas CSS en el código HTML en elementos como DIV’s o H1’s.

Si estás familiarizado con estas diferentes técnicas CSS puedes utilizar la herramienta de PageSpeed Insights para obtener una visión general de cómo tu página Web o blog utilizan CSS. Si no lo estás, no te preocupes, te lo explicaré cada uno a continuación (que es menos confuso de lo que parece, lo prometo).

Muchas personas hacen caso omiso cuando escuchan que Google aconseja “hacer páginas para los usuarios, no para los motores de búsqueda“. Parece un poco irreal que quieran seguir este consejo ya que después de todo estás haciendo una página web para ser visto en los motores de búsqueda. Pero antes de hacer caso omiso vamos a ver qué quieren decir con esto.

1. Archivos CSS externos.

Los archivos CSS externos son, principalmente, la forma en que el CSS se utiliza en las páginas web y muy probablemente la forma en la que usas tus CSS. En la sección “head”, del código HTML, habrá una línea de código que se parece a esto: 

<link rel="stylesheet" type="text/css" href="http://www.tusitio.com/style.css" media="screen" />

Este código llama a tu archivo CSS y son llamados “externos” porque las instrucciones CSS se encuentran en un archivo separado de tu HTML. Tener un archivo CSS externo es, de hecho, una forma para manejar tus CSS y la ventaja que tiene es que el navegador los guarda en su caché. El problema comienza cuando tienes varios de estos archivos. Desafortunadamente, esto ocurre muy a menudo en WordPress y otros CMS.

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

Esto causa muchas “idas y vueltas” para descargar todos los archivos CSS y se traduce en una página web lenta. Esto se puede cambiar fácilmente mediante la combinación de todos los archivos CSS en un solo archivo.

2. CSS en línea.

CSS en línea son las instrucciones CSS que se incluyen en la cabecera del propio documento HTML.

La principal ventaja de este método es que no hay ningún archivo adicional (externo) que se tenga que cargar antes de que se muestre la página web. Esta ventaja sólo es factible si las instrucciones CSS son pocas. Si el CSS es grande entonces no es un buen método.

El método CSS en línea se lleva a cabo mediante la colocación de las instrucciones dentro de las etiquetas de estilo como se muestra a continuación:

<style>Las instrucciones CSS van aquí</style>

3. No uses “@import” para cargar archivos CSS.

El método @import es cuando los archivos CSS externos cargan otros CSS externos con el comando @import en lugar de vincularlos como se mencionó anteriormente.

Este método hace que el archivo CSS o los archivos llamados carguen más lento ya que sólo se pueden descargar de uno en uno utilizando este método. El código es algo como esto:

@import url("style.css");

Estas llamadas realmente afectan la velocidad de la página web, y muchos diseñadores lo hacen todavía, por lo que deberías comprobar si tú también lo haces.

4. No agregues CSS en los elementos HTML.

Es muy común agregar estilos en los elementos HTML, de hecho, suelo hacerlo todo el tiempo.

En las directrices de PageSpeed Insights de Google, en el apartado “optimizar la entrega de CSS“, Google dice que no debemos hacer esto.

Dice que esto hará que el navegador responda más lento y que no va a ser bueno aplicar esta técnica en nuestro código ya que va en contra de la política de seguridad de contenido del W3C que es un protocolo de seguridad que bloqueará cualquier estilo en los elementos por defecto. Un ejemplo de este método puede ser:

<p style="float:left;"> or

<div style="color:#fff;">

 

Conclusión:

Como puedes ver hay muchas maneras de utilizar CSS en las páginas web pero la conclusión es que tenemos que limpiar el código y optimizar la entrega de CSS para asegurar que nuestras páginas se carguen más rápido.

Las recomendaciones son las siguientes:

  • Combina las hojas de estilo CSS externos.
  • Añade instrucciones CSS cortas a la cabecera.
  • No uses la instrucción @import para importar CSS.
  • No uses CSS en elementos HTML dentro del contenido.

Compartir