Tú lo sabes, si tu blog o website demora más de unos pocos segundos en cargar esto definitivamente afectará de manera adversa las visitas. Tus lectores no sólo quieren un diseño atractivo y temas novedosos, además desean que tu blog cargue rápido. Y ya sea que hospedes tu blog en algún servicio gratuito (donde puedes hacer poco para optimizarlo) o tengas un servicio de hosting, las configuraciones por defecto suelen ser lentas. Por experiencia propia puedo decir que mejorar la velocidad de carga de un blog (así como de cualquier web en general) es más un arte que una ciencia exacta. Luego de pasar por la experiencia de reducir el tiempo de carga del blog a menos de un segundo, deseo comentarles mi experiencia y como pude lograr el objetivo de que la página de inicio de este blog cargase en menos de un segundo. Ya que al parecer en el universo en el cual todo está a un click de distancia, un segundo es una eternidad.
Primero, fue el cambio de LAMP a LEMP que ya comenté en un post anterior. Pero eso solamente mejora la escalabilidad del website, es decir podemos aceptar un gran número de visitas sin requerir más recursos y sin que la experiencia de usuario se vea degradada. La optimización del cacheo con W3 Total Cache es otro paso importante, aunque parezca ilógico los mejores resultados se obtienen cacheando los objetos del site y usando minify al extremo pero NO, ojo NO haciendo cacheo de las queries del MySQL. Al parecer si usamos MyISAM no es buena idea hacer el cacheo de las queries, aunque la razón exacta aún no termino de entenderla, pero luego de medir la performance con y sin cacheo de DB, es mejor no habilitar dicha opción en W3 Total Cache.
Haciendo todas las optimizaciones anteriores pude reducir el tiempo de carga de la página de 6 segundos a 2.4 segundos, lo cual puede parecer una gran mejora (2.5 veces más rápido), pero por alguna razón no me sentía satisfecho, así que comencé a ver por qué la página de inicio demoraba en cargar más de un segundo. Una de las razones era varios plugins que usaba muy poco, es decir los instalé para probarlos y luego nunca más los use. Así que comencé a remover todos aquellos plugin que no eran usados diariamente. Luego de la dieta de plugins, descubrí que mi página cargaba 50 objetos (javascripts, css, imágnes, etc.). Como sabran cada objeto debe ser descargado desde el servidor y debido a que por seguridad hay una restricción a cuantas conexiones se permiten desde un host, este conjunto de 50 objetos se descargaba en varias etapas. En mi caso particular tenía 10 botones "Like" que llamaban igual número de javascripts desde la red de distribución de contenido de Facebook, una mejora obvia fue eliminarlos ya que en cada post individual aparecen.
Bien, con 40 objetos y un tiempo de carga de 1600 ms aún estaba lejos de mi meta. ¿Qué más podía optimizar?, es aquí donde entra en juego el CSS Image Sprite, una técnica que consiste en poner todas las imágenes que se van a utilizar en una sóla imagen png o gif, para luego cortarla usando CSS. Es decir todas esa imágenes de pequeñitas de pocos bytes son consolidadas en una sóla imagen de algunos cuantos KB, pero que tiene la ventaja de reducir el número de objetos que serán descargados desde el servidor y por lo tanto reduce el tiempo de carga total de la página. Es así que con la ayuda del website csssprite.com, cree una sóla imgen con todas las pequeñas imágenes que forman parte de mi theme, esto puso a dieta aún más a mi WordPress que ahora sólo tiene 23 objetos. Finalmente tras esa última optimización el tiempo de carga de la página de incio de este blog es de 980ms en promedio.
Ahora, probado desde NYC la página de inicio de este blog carga 2 veces más rápido que Yahoo, según whichloadfaster.com. Lo cual considero satisfactorio por el momento, aunque estoy muy lejos de los 176ms de Google. La siguiente optimización va a requerir meter mano a algunos plugins y ver si es posible reducir aún más el número de objetos que son transferidos entre el servidor y el navegador. Para aquellos que quieran auditar sus websites hay una herramienta muy útil en Pingdom.com que te permite identificar los cuellos de botella de tu website. Espero pronto tener tiempo para escribir un breve tutorial sobre como usar los CSS Sprite para acelerar la carga de un website.