Cómo optimizar tu página web: las CSS


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

Como usuarios, navegamos por una página web y queremos ver la próxima sección a golpe de clic, sin esperas. Nos hemos vuelto exigentes en cuanto a nuestro tiempo y no queremos esperar tediosos tiempos de carga. Además, si esperamos mucho tiempo entre carga y carga, tendemos a abandonar la página que estamos visitando, a veces de forma inconsciente. Por lo tanto, cada segundo en la web cuenta. ¡Literalmente! En el post de hoy, hablaremos de los recursos que tenemos para que la optimización se convierta en un buen aliado para nuestro sitio web, y centramos nuestra atención especialmente en las CSS.

Si hablamos de cifras, según Google, medio segundo de retraso en la carga de una página hace que se pierda un 20 % de tráfico. Por otro lado, Amazon asegura que se pierde un 1 % de las ventas simplemente con 100 milisegundos de retraso. Sorprendente, ¿verdad? Aprovechar el tiempo al máximo parece cobrar su sentido más literal en este preciso contexto, en el que los negocios y los comercios electrónicos se enfrentan a un usuario con mucho conocimiento y poco tiempo que perder.

La optimización de nuestra página web es un aspecto que no debemos descuidar ni dejar pasar, porque las repercusiones que tiene son reales y medibles, como podemos observar. Por ello, ofrecemos a continuación una serie de pautas para conseguir los mejores resultados en la web.

Los recursos que ofrecen mayor optimización

Evidentemente, si tu página web está alojada en un servidor con buena conectividad, esto también influirá en la mejora de los tiempos de entrega del contenido, pero centrémonos en la parte que afecta a nuestro código, en concreto en estos tres recursos, de menor a mayor importancia:

  • Código CSS.
  • Código JavaScript.
  • Imágenes.

En este post, hablamos en detalle sobre las CSS, las conocidas hojas de estilo en cascada que aparte de resultar un recurso de desarrollo web imprescindible para mejorar y modificar la apariencia de nuestra página web, cuenta con unos elementos interesantes para su proceso de optimización. En siguientes artículos, nos centraremos en otros recursos de Desarrollo y Diseño Web.

Optimización de las CSS

Cuando escribimos nuestras CSS, definimos la capa de presentación que tendrá nuestra página web, por lo que su optimización podría basarse en estos factores principales:

  • Deshacernos de los comentarios. Comentar el código, en general, es una buena práctica, pero si quieres quitar peso a los archivos, elimina el texto de todas las líneas donde tengas anotaciones, pues esto hará que sean más ligeros al cargar. Eso sí, haz una copia de seguridad con ellos comentados, nunca se sabe si tú u otra persona necesitará interpretarlos en un futuro.
  • Compactar el código. Elimina de tu código CSS los espacios en blanco, los saltos de línea innecesarios, etc., porque de este modo el archivo será más liviano. También debes de evitar la repetición de las reglas e intentar reutilizar las declaraciones de estilos.
  • Acortando conexiones al servidor. Si tienes varios archivos CSS y los unes todos en uno único, reducirás también el tiempo de carga.

En la siguiente imagen, podemos ver cómo se muestra un código CSS comprimido frente a uno que no lo está:

Una opción que podrías hacer con el CSS es dividir los estilos en un par de archivos distintos. En uno, colocarías el código esencial  la cabecera y layout para la página que abre inicialmente el navegador y en el otro archivo, pondrías los estilos que afectan a elementos que se ven cuando se hace un scroll hacia abajo. La colocación del primer archivo CSS será en la etiqueta HEAD, así será lo que inicialmente cargue y lo primero que estará disponible. El segundo deberás ponerlo antes de que cierres la etiqueta BODY, pues no requiere tanta inmediatez y lo podemos cargar posteriormente.

Resulta interesante destacar que con HTTP2 cambian las cosas porque una de las mejoras que trae es la eliminación de información redundante, cuyo objetivo es evitar el envío de datos repetidos durante una misma conexión, y que conseguirá que se consuman menos recursos, obteniendo así una menor latencia.

 


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+