Hace muchísimo que no escribo ningún artículo técnico por aquí, y más aun que no escribo ninguna reflexión. Pero se acabó lo que se daba, a partir de ahora intentaré actualizar más frecuentemente el blog y hoy voy a empezar una pequeña serie de (también pequeños) artículos sobre optimización de páginas web.

Introducción

Cuando desarrollamos páginas web nos encontramos con decenas sino cientos de problemas a medida que avanzamos. Los que acostumbran a ser más usuales son los relacionados con la maquetación y el tan temido Microsoft Internet Explorer, otras veces tenemos problemas con el lenguaje de scripting en el lado del servidor, y otras con la base de datos... pero de lo que casi nunca nos salvamos (y pocas veces nos damos cuenta, al menos cuando somos aprendices) es de los problemas relacionados con el tiempo de carga y renderizado de la página.

Los tiempos de carga excesivos no son tan vistos como un problema debido a que no afectan al buen funcionamiento de las páginas y en parte también a nuestra experiencia con líneas de baja velocidad antes de la irrupción de ADSL y otras tecnologías de banda ancha, vamos, que estamos acostumbrados a sufrir y no lo notamos tanto. Aun así, y aunque los visitantes toleren bastante la lentitud, deberíamos encontrar la causa del ralentizamiento para atajarla.

Motivación

  • Los visitantes se sienten más satisfechos cuando nuestro sitio carga rápida y fluidamente, lo que, en gran cantidad de contextos, nos puede reportar una mayor cantidad de beneficios económicos.
  • Por lo general, hacer páginas rápidas y fluidas sirve también para consumir una menor cantidad de recusos del servidor por visita, lo que nos puede ahorrar costes económicos o bien permitirnos atender a más visitantes.
  • Parece ser que la velocidad de carga de los sitios será un factor más a tener en cuenta por parte de algunos buscadores para el posicionamiento de las webs.
  • Y el que nos debería importar más a los geeks: Hacer páginas web fluidas es síntoma de saber hacer bien las cosas, de un buen nivel técnico, y cuando todavía no se sabe como conseguirlo, supone un reto interesante.

Primeros pasos

Empezaremos con consejos aplicables a prácticamente cualquier tipo de página, servidor, framework de desarrollo, lenguaje de scripting en el lado del servidor... vamos, que iniciaremos la lista de consejos con algunos bastante universales y, siento decirlo, algo aburridillos (tranquilos, no faltarán consejos interesantes de verdad más adelante).

  1. Intentad hacer vuestras páginas lo más pequeñas que os sea posible. Con esto no me refiero a que hagáis que las letras sean pequeñas, como supongo que habréis entendido, sino a que el tamaño del documento que envía el servidor web debería ser pequeño para que éste tarde el mínimo tiempo posible en enviarlo.
  2. Para conseguir el punto anterior es muy importante que vuestro código sea limpio y conforme a los estándares, en particular: evitad usar tablas para tabular los elementos de vuestras páginas, para eso están los elementos div y span, y como no, las hojas de estilo en cascada (CSS).
  3. Es interesante unificar todos los estilos de la página en un único archivo css, que podrá ser compartido entre diferentes secciones de ésta, de forma que solo se tendrá que descargar una vez la información de estilos y se podrá reutilizar para varias páginas de vuestro sitio.
  4. Reducid la cantidad de ficheros a descargar para visualizar vuestra página, es decir, usad cuantos menos ficheros de imagen mejor, cuantas menos hojas de estilo, mejor, y cuantos menos ficheros de script, mejor también. Esto es muy importante debido a que cada petición HTTP implica una sobrecarga importante en el envío de información. La sobrecarga es debida a que, además de los ficheros en sí, se tienen que enviar también cabeceras con cierta metainformación, por lo que se pierde mucho tiempo enviando información "inútil". Otro problema asociado es que las descargas son, en cierta medida, bloqueantes. El protocolo HTTP impone un límite de descargas simultáneas por página, por lo que éstas no se pueden paralelizar y se tienen que hacer una detrás de otra, provocando el retraso en la carga.
  5. Ahora uno de los más extraños (por ser el menos evidente): Intentad situar el código JavaScript cuanto más cerca del final del documento, mejor. Esto es importante debido a que los navegadores pierden tiempo interpretando y ejecutando el código cuando lo encuentran, siendo esta tarea también bloqueante. Así pues, si situáis el código JavaScript al final de vuestras páginas conseguiréis que sean renderizadas antes, mejorando la experiencia del usuario.

Herramientas

Aunque todavía tengo que explicar muchas cosas en esta serie de artículos, creo que puede ser conveniente para los que queráis ir más rápidos una lista de herramientas muy útiles que os ayudarán a encontrar más puntos a mejorar en vuestros sitios web.

  • Speed Tracer: es una extensión para el navegador Chrome / Chromium creada por Google , nos permite ver el tiempo de carga del sitio web desglosado elemento por elemento para identificar algunos cuellos de botella de nuestro sitio. También da algunos pequeños consejos para mejorar la web cuando detecta fallos.
  • YSlow: es una extensión para el navegador Firefox creada por Yahoo que, a mi parecer, junto con Speed Tracer forma un tandem perfecto. Se necesite instalar la extensión Firebug antes que ésta. Asigna una nota a la página que evaluamos mediante una media ponderada de puntuaciones sobre ciertos aspectos de ésta. No solo da puntuaciones, también es una herramienta a la que parece encantarle dar consejos, y muy buenos por cierto, aprendí bastante de ella xD, fue algo así como mi profesora. Los gráficos que genera ni son tan bonitos ni útiles como los de Speed Tracer, pero a cambio la información realmente útil se muestra mucho más digerida y apta para ser utilizada directamente.
  • Page Speed: otra extensión creada por Google, pero esta vez para Firefox, que parece ser una mezcla entre YSlow y Speed Tracer, ésta muestra directamente una lista de consejos que deberíamos seguir, y los marca en rojo, amarillo o verde segun considere si ya lo estamos haciendo o no.

Hay muchas más herramientas  que podrían resultar útiles, pero estas son las más remarcables dentro del panorama actual... y ciñéndonos a las herramientas que nos dan información o consejos. Hay otras herramientas que comentaré en los siguientes artículos y que no listo aquí porque prefiero presentarlas dentro de un contexto más adecuado.

Espero que os haya resultado útil y/o interesante, un saludo :) .