Algunos consejos para la optimización de CSS

Los documentos CSS (hojas de estilo en cascada) no solo facilitan la maquetación de nuestros sitios, sino que también constituyen una poderosa herramienta para mejorar su posicionamiento en los buscadores, la velocidad de carga, la accesibilidad, la compatibilidad cross-browser, incluso nos permiten ahorrar espacio en nuestro servidor. Pero aún podemos ir más allá, y mejorar la velocidad con la que los navegadores interpretan el código CSS, además de ahorrarnos tiempo y esfuerzos por medio de la reutilización del código.

Tal y como comenta la gente de mozilla en su página, lo primero que hace el navegador es convertir el código HTML y CSS en una estructura llamada DOM (Document Object Model), el cual representa el documento web en la memoría del ordenador. A continuación el navegador muestra el contenido del DOM, que es lo que nosotros vemos en npantalla.

Cada elemento o porción de texto de nuestro HTML representa un nodo del DOM, formando así una estructura de árbol. Para poder ver el DOM de nuestra web podemos utilizar el mismo inspector DOM que viene integrado en Firefox (Herramientas >> Desarrollador Web >> Inspeccionar).

Para poder interpretar el CSS, el navegador recorre de arriba abajo el árbol de nuestra página, el DOM, cada vez que se encuentra con un selector. De esto podemos deducir que, cuantos más selectores utilicemos, más tiempo tardará en cargar nuestra página.

  1. Selectores id, clase y tipo

    El empleo de selectores id es la forma más eficiente que tenemos para dar estilo, sin embargo, no podemos sobrecargar nuestro CSS usándolos para cada elemento que requiera un mínimo de diseño. Debemos utilizar por lo tanto el selector id cuando queremos dar estilo a un solo elemento específico, utilizar el selector clase para dar estilo a varios elementos que compartan las mismas propiedades y recurrir a los principios de herencia y cascada para dar propiedades a aquellos elementos cuyo elementos "padre" (según la estructura del árbol) ya tengan un selector definido.

    Como los elementos con un atributo id han de ser únicos en el documento es redundante añadir cualquier referencia adicional, por ejemplo: h1#titulo { ... } y #titulo { ... } tienen el mismo efecto. Utilizaremos siempre la segunda opción ya que de otra manera el navegador tendría que recorrer el DOM dos veces: la primera para buscar el elemento con el tributo id="titulo" y la segunda para comprobar que dicho elemento es un elemento de tipo <h1>.

  2. Menos descendencia y más herencia

    Siempre que podamos deberemos evitar emplear selectores con descendencias, hijos, hermanos, etc. y utilizar únicamente selectores id, clase y o tipo. Pero esto no siempre nos va a ser posible a no ser que queramos inundar nuestro documento HTML de atributos id y class. Aún así hay maneras de paliar esta pérdida de rendimiento.

    Un ejemplo de lo que no deberíamos hacer: #cabecera div p a { ... }. En este caso el navegador buscaría primero todos los elementos <a>, luego daria otra vuelta para seleccionar aquellos <a> que estén contenidos dentro de un elemento <p>, a continuación otra para buscar los <div> y finalmente otra para el elemento id="cabecera" (al contrario de lo que podría parecer, los navegadores comienzan leyendo las etiquetas de derecha a izquierda). Vemos que esta es una manera muy poco óptima de trabajar. Si en nuestra cabecera solo dispusierámos de elementos <a> que cumplieran el árbol del ejemplo, podríamos abreviar la expresión de la manera #cabecera a { ... }, mejorando la velocidad de respuesta del navegador.

    Además, como comentaba en el primer punto, es positivo heredar el mayor número de propiedades posibles entre diferentes elementos. Un ejemplo tonto: si en nuestro CSS tenemos definidas estas dos expresiones p { color: #000; } y p span { color: #000; }, la segunda sobraría ya que el elemento <span> hereda la propiedad de color definida para su elemento contenedor <p>.

  3. Empleo de CSS en ficheros externos

    Además de permitirnos centralizar las propiedades de estilo de nuestros sitios, el empleo de ficheros .css hace que la caché de los navegadores pueda almacenar la información de estos documentos, mejorando notablemente la velocidad de carga. No sucede lo mismo cuando utilizamos hojas de estilo internas o estilos en linea, ya que son descargados siempre que abramos la página.

  4. Agrupación de selectores

    Como comentaba en el artículo anterior, siempre que podamos deberemos agrupar todos los selectores que compartan las mimas propiedades. Por ejemplo, si tuvieramos las expresiones h3 { color: #ddd; font-size: 0.9em; } y p { color: #ddd; font-size: 0.9em; }, deberíamos agruparlas de la mabera: h3, p { color: #ddd; font-size: 0.9em; }

  5. "CSS Shorthand"

    Esta definición se traduce como escritura de CSS de forma abreviada. Hemos visto que existe diversas formas de representar muchas de las propiedades de estilo. Por ejemplo, en el caso de la propiedad margin las expresiones margin-top: 5px, margin-right: 10px, margin-bottom: 15px y margin-left: 20px pueden reducirse a una sola de la manera: margin: 5px 10px 15px 20px. Debemos aplicar esto a todas las propiedades que lo permitan como las propiedades padding, border, background o font.

  6. Compresión de los ficheros .css

    Inevitablemente los espacios en blanco, saltos de línea y comentarios ocupan espacio y aumentan el peso de los documentos CSS. Es común por lo tanto encontrar blogs como este donde también se recomienda reducir esto para mejorar la velocidad con la que se cargan nuestros archivos .css y para optimizar su lectura por parte del navegador.

    Bajo mi punto de vista esto es un error, ya que dificultaría al desarrollador el mantenimiento y la lectura del código. Sin embargo, sí es una buena práctica hacer esto una vez que vayamos a subir nuestros ficheros a producción, al servidor, siempre que mantengamos en todo momento los ficheros originales. Existen multitud de harramientas que eliminan todos los comentarios, saltos de línea y espacios en blanco sin necesidad de que tengamos que hacerlo nosotros a mano. Yo os recomiendo el empleo de la herramienta desarrollada por Yahoo "YUI Compressor", la cual podemos instalar en nuestro ordenador y ejecutarla por medio de un script comprimiendo de una sola vez todos los ficheros alojados dentro de nuestra carpeta css.

Comments

You must sing in to post a comment.

There are no comments for this article.