Técnicas del Vietnam: Optimización web I

¡Bienvenidos un día más a un nuevo rootie queridos amigos! Empezamos esta semana con un tema que cada vez esta ganando más importancia en el mundo del desarrollo web, este es el tema de la velocidad de carga. Hoy en día y cada vez más con el uso de dispositivos móviles y conexiones 3G, los usuarios cada vez demandamos más que las páginas web que visitamos en cualquiera de nuestros dispositivos carguen rápido, rápido y aquí es donde se hace cada vez más importante la optimización.

Antes de empezar, aunque como muchos ya sabréis, comentar que todas estas técnicas son aplicables en abstracto a cualquier tecnología, pero en particular para este post todos los ejemplos van a estar descritos para ser implementados en el stack LAMP, una vez dicho esto, empecemos.

Optimización: Configuración de tu servidor.

Una de las claves para la optimización de un sitio o aplicación web, pasa (irremediablemente) por tener la configuración más óptima en el servidor elegido, para ello podemos recurrir a una serie bastante amplia de recursos y métodos para conseguir nuestro objetivo y mejorar la velocidad de carga de nuestras páginas web.

optimizacion-web-rapido-como-flash
Poniendo tu server a velocidad superheroe

Keep Alive.

Cuando un usuario quiere acceder a nuestra web, su navegador va a realizar una serie de peticiones al servidor, estas peticiones piden al server cosas como la página en si, hojas de estilo, imágenes, scripts, etc. Cada vez que una conexión se establece con el servidor esta requiere un tiempo, resolución de DNS, etc. esto quiere decir que para cada recurso tenemos que abrir y cerrar una conexión, con la consecuente perdida de tiempo, para ello Apache nos ofrece una configuración llamada Keep-Alive (Mantener vivo).

keep-alive-optimizacion
Comparación entre conexión estándar y conexión persistente

Esta funcionalidad, básicamente activa conexiones permanentes lo que permite realizar peticiones múltiples utilizando una sola conexión lo que reduce el uso de recursos y ahorrar tiempo en conectar con nuestro servidor.

Para poder utilizar KeepAlive, deberemos tener activado el modulo  en Apache, una vez activado, la siguiente configuración es la que necesitaremos para activarlo:

keep-alive-in-carbonite
Otra forma de mantener vivo alguien…

Una vez agregada la configuración correspondiente, si analizamos las cabeceras de, este, vuestro blog favorito, podremos ver KeepAlive activado:

Compresión.

Otro de los problemas que se suelen afrontar a la hora de optimizar la velocidad de carga de una web, es el tamaño de los recursos a enviar desde el servidor al cliente. Para ello podemos activar en el servidor la compresión de archivos. Para ello en Apache podemos activar la compresión usando Gzip.

Una vez activada la compresión, en los headers podemos comprobar que en el campo de accept-encoding se lista gzip.

Cache.

El cachear contenido es una técnica que puede ser aplicada en diferentes niveles de una web/aplicación desde el motor de bases de datos, pasando por el backend hasta el frontend. El objetivo de esto es el reducir significativamente todos procesos que impliquen acceder a fuentes de datos y que consecuentemente incrementan el tiempo de nuestra peticiones. En este post hablaremos sobre la cache del navegador ya que para la cache en el backend, tenemos otro post preparado.

Cache de navegador.

Aprovecharse de las capacidades del navegador para cachear contenido que permanecen mas o menos estáticos es fundamental. Si configuramos nuestro servidor para establecer la fecha de caducidad de un recurso a través del header Expires este solo lo pedirá una vez y lo almacenará en la cache hasta la fecha marcada en el header.

Para hacer uso de esta funcionalidad en Apache, se necesita tener activado el módulo mod_expires. Cuando hayamos activado el modulo (si no lo estaba ya) agregamos el siguiente código a nuestro httpd.conf o .htaccess que nos permitirá utilizar la cache del navegador:

Como ya he comentado antes, una vez activada esta función, analizando los headers podemos ver que se incluye una entrada haciendo referencia a la fecha de caducidad del recurso, en el siguiente snnipet podéis ver una de las imágenes usadas en este post:

Optimización de imágenes.

Otra de las operaciones que son realmente costosas a nivel de recursos, en el tiempo de carga de una web es la descarga de archivos de imagen. Incluso si ya hemos aplicado la compresión y hemos establecido una fecha de caducidad para crear una cache, la primera descarga seguirá costando mucho si la imagen no esta correctamente optimizada.

images-optimizacion
Siempre podemos llamarlo a él para optimizar nuestras imágenes.

Para ello es adecuado, seguir una serie de practicas:

  • Aplicar compresión a las imágenes antes de alojarlas en el servidor. Dependiendo del formato, podemos utilizar dos tipos de compresión; Lossless o Lossy. Esto reducirá el tamaño de archivo (y parcialmente la calidad) del mismo, lo que hará más sencilla su descarga. Una de las herramientas que yo recomiendo para esto es kraken.io
  • Utilizar imágenes con el tamaño adecuado y adaptado al dispositivo, para ello lo mejor es adoptar cuanto antes el uso de imágenes responsive. Esta técnica, que es parte de la especificación HTML, ofrece grandes ventajas, ya que podemos definir exactamente las características de la imagen a servir basada en el viewport de la página, el tamaño que se quiere definir e incluso la densidad de la pantalla (usado para pantallas retina y de alta densidad)

Además de estos dos puntos, siempre es útil contar con una CDN, lo que ayudará a servir el contenido mucho más rápidamente.

Arreglar errores 404.

404 joke not found

El último consejo para optimización que vamos a dar hoy, es el arreglar todos los errores 404 que pueda tener tu página, ya sea una imagen, fuente, etc.

La razón para esto es sencilla, cada error que puedas tener en tu página requiere que el cliente ejecute la comunicación de forma completa con el servidor, con lo que ahí estamos desperdiciando preciados recursos de nuestro servidor.

Herramientas para medir la velocidad.

Como ultimo punto de la entrada de hoy, mencionar varias herramientas que podéis usar para analizar la velocidad de vuestros sitios:

  • Web Page Speed Test – Puede que sea la herramienta gratuita más completa, tiene diferentes localizaciones para poder hacer test reales con diferentes localizaciones en el mundo, ofrece información sobre tiempo de carga, first byte, tiempo de segundas vistas, linea de tiempo con cascada, captura de video, etc. (mi favorita)
  • Pagespeed Insights – Herramienta de Google, ofrece menos detalle, pero incluye consejos para solucionar los problemas que puedas encontrar.
  • Chrome Timeline – Herramienta que es parte integrada de Chrome ofrece una buena vista de la linea de tiempo de carga, ademas puedes configurar perfiles de conexión, para emular conexiones 3G y usar el emulador de dispositivos.

Y con esto terminamos por hoy, nuestro rootie acerca de optimización de velocidad de carga para sitios webs, en un futuro rootie seguiremos hablando sobre optimización. Simplemente como último comentario sobre velocidad de carga, es importante, mencionar que el algoritmo de posicionamiento de Google desde hace ya un tiempo tiene en cuenta la velocidad de carga, esto quiere decir que cuanto mejor sea nuestra velocidad de carga, mejor posicionados estaremos.

Como siempre para cualquier duda, pregunta, comentario, soborno o amenaza, podéis usar los comentarios o en nuestras redes sociales Facebook y Twitter.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *