Recibe actualizaciones por: rss | twitter | email

Obsesion por la velocidad

Escrito por:
Fecha: 2015-04-12 22:11:35 00:00

Introducción

Aquellas personas que escriben un blog, o son administradores de un sitio deben haber sentido en algún momento la necesidad de optimizar el sitio, de realizar los cambios necesarios para que cuando los visitantes lleguen a él, la carga sea lo más rápida posible.

Optimizamos el tema, optimizamos las imágenes, usamos CDNs, y muchas otras medidas para lograr ese grado de optimización deseado, y llegar al punto en el que para cualquier visitante la página este en su pantalla totalmente "dibujada" de ser posible en menos de un minuto.

Luego de trabajar durante las últimas semanas en la optimización de este sitio, he descubierto un par de cosas, que puede que para muchos de ustedes no sean nada nuevo.

  • Se debe minimizar la cantidad de llamadas del navegador.
  • Se debe mantener el tamaño del sitio lo más pequeño posible.
  • Se debe tener el contenido del sitio lo más cerca posible de los lectores

Y estas son las acciones que he tomado para lograr lo indicado arriba:

Poniendo en práctica lo requerido

Minimizar las llamadas del navegador

Para minimizar la cantidad de llamadas del navegador la mejor medidad que se puede tomar es bajar la cantidad de archivos necesarios para "dibujar" la página en el navegador de los visitantes.

En general una página web esta constituida por el archivo principal, en general escrito en html, ya sea por que es un archivo estático o por que es html generado dinámicamente por una aplicación php, rails u otro, luego tenemos los archivos css que dan formato a la página generalmente ayudados por archivos js (javascripts), y por último es normal tener imágenes. Es una buena práctica agregar todos archivos de un mismo tipo en uno solo, al cual se le deben quitar los espacios en blanco y comentarios, y finalmente comprimirlos, en otras palabras. concatenar, minimizar y comprimir.

En el caso de este sitio eso lo he conseguido utilizando el plugin de jekyll Jekyll-Assets, con su ayuda he agregado todos los archivos de estilo en cascada CSS en uno solo, lo mismo se ha consiguido con los archivos javascript, haciendo que con solo dos llamadas se cargue todo lo necesario para mostrar la página en el navegador del usuario.

Mantener el tamaño del sitio lo más pequeño posible

Para lograr este cometido, se debe eliminar el contenido no necesario, escencialmente imágenes no requeridas, esta claro que un sitio con imágenes a veces se ve mejor, pero si sabes diseñar el sitio, o escoger un buen tema, no vas a necesitar de la ayuda de imágenes para que se vea bien, y al mismo tiempo vas a mantener el temaño reducido.

Otra cosa que debe hacerse es comprimir todos los archivos, esto se consigue por lo general usando mod_gzip o mod_deflate si usas Apache, o gzip si usas Nginx. Lo que estas herramientas hacen, es comprimir los archivos antes de enviarlos al navegador del visitante, si tienes un sitio estático, puedes comprimir los archivos por adelantado, y servirlos comprimidos si el navegador lo acepta, Nginx usa gzip_static usualmente debes compilarlo con esta opción que no viene activa por defecto Aqui una guía para Arch (en ingles) y aqui para Ubuntu (Ingles)

Este sitio se sirve por complete comprimido, tanto el html como los archivos css y js.

Colocar el contenido lo más cerca posible del usuario

Esto por lo general se logra usando una CDN, o red de distribución de contenido, la misma puede ser una solución comercial de terceros, o puede ser una creada por ti mismo para tu sitio, ya veremos en otro artículo como hacerlo.

Este sitio, por el momento esta siendo distribuido por medio de Amazon Cloudfront, es decir que debería cada uno de quienes visitan el sitio descargarlo de algún servidor cercano que Amazon tenga, y desde el sitio donde realmente está alojado el mismo.

Conclusión

Luego de ejecutar todas las tareas arriba descritas, espero haber logrado que este sitio sea bastante rápido, al menos pingdom muestra que si.