viernes, 15 de noviembre de 2013

Velocidad de carga: cómo incrementar un 100% el tráfico a tu página web (II)

En la entrada anterior mostraba una serie de gráficas, basadas en datos empíricos recabados por Google Analytics, en las que se observaba como las mejoras en el rendimiento y en el tiempo de carga de las páginas del portal de búsqueda de mapas Looking4Maps se tradujeron en un incremento de tráfico del 100%, ocasionado por la mejor valoración  que de esta web de mapas hizo el buscador Google, y en un importante aumento de los ingresos recabados por publicidad. En esta entrada, continuación de la anterior, voy a enumerar cuales han sido las técnicas de optimización aplicadas.

  1. Utiliza una herramienta de diagnóstico: Google Page Insights.

    En primer lugar, antes de optimizar a ciegas, lo conveniente es detectar dónde optimizar. Y si uno de los objetivos de optimizar, además de mejorar la experiencia de usuario de nuestros visitantes, es que Google nos ponga una buena nota y así aparezcamos antes en sus resultados de búsqueda, parece razonable utilizar la herramienta de medición de rendimiento Google Page Insights. Para muestra  la nota que Google Page Insights pone ahora mismo al buscador de mapas Looking4Maps.
  2. ¡ Es la base de datos, estúpido!

    En una aplicación web que va a soportar mucho tráfico, y que almacene sus datos en una base de datos relacional (y en la mayoría de los casos MySQL) la base de datos es el principal cuello de botella. Si vuestra web está basada en un gestor de contenidos o plataforma de publicación, como pueden ser WordPress, Joomla, o Drupal, o en algún software de tipo genérico para gestión de foros, comunidades, etc. es probable que los accesos a la base de datos ya estén muy optimizados, pero aún así, estos serán el principal cuello de botella. La base de datos te da muchas cosas (datos ordenados, prevención ante corrupción de los mismos, facilidad de consulta, etc.) pero a cambio, penaliza en el uso de memoria y en el rendimiento. 

    Looking4Maps está programado íntegramente por mí, en PHP, así que al principio los accesos a la base de datos no estaban muy optimizados.  Si éste también es tu caso, y trabajas con tablas grandes (ahora mismo el buscador de mapas tiene indexadas más de 600.000 entradas), desnormaliza, evita los JOINs, evita consultas anidadas, asegurate de que creas índices en aquellas columnas a partir de las que haces consultas, etc. De cara e mejorar el tiempo de carga de una página, es preferible hacer varias consultas muy rápidas, que una única consulta pero más lenta. Por tanto, el contenido principal de la página se puede cargar con una única consulta a la tabla principal de contenido, y contenidos relacionados existentes en otras tablas se pueden cargar de forma asíncrona mediante peticiones AJAX, que no penalizarán el tiempo de carga de la página.

    Cuando trabajamos con un hosting compartido este factor, la velocidad de ejecución de las consultas a la base de datos, cobra todavía una mayor importancia. La razón es que en un hosting compartido cada cuenta de cliente tiene limitado el número simultáneo de conexiones a la base de datos que puede realizar. Supongamos que nuestra web está en un hosting compartido, y que nuestro proveedor nos permite tener 30 conexiones simultáneas a la base de datos. Si nuestras consultas tardan en ejecutarse, o nuestro tráfico es elevado, puede darse el caso de que no queden conexiones disponibles, por lo que las páginas que quieran hacer uso de la base de datos tendrán que esperar a que se liberen conexiones.

    Y este es precisamente el problema relacionado con la base de datos que pueden sufrir los usuarios de productos como WordPress, en los que las consultas sí que están muy optimizadas. Por muy optimizadas que estén nuestras consultas, el número de conexiones que podemos tener con la base de datos es finito, mientras que el número de usuarios que pueden visitar nuestro sitio web no lo es (en términos de órdenes de magnitud ;) ).

    La solución a este problema pasa por cachear los contenidos de la web, en memoria una pequeña cantidad de los contenidos más accedidos, y en fichero todos los contenidos que nuestra cuota de almacenamiento nos permita. Para Wordpress hay disponibles varios plugins de cache. Para Looking4Maps, desarrollado en PHP, he utilizado la libreria PHPFastCache que permite cachear en memoria y también en una base de datos intermedia SQLite. Algunos frameworks de desarrollo PHP como Code Igniter también permiten cachear, tanto los resultados de consulta a base de datos (caché de datos) como las páginas generadas a los usuarios (caché de vista). ¡Todo sea por minimizar las veces que accedemos a la base de datos!
     
  3. Habilita la compresión GZip de tu servidor web.

    Cuando un navegador solicita una página web a un servidor, en realidad se está descargando decenas, incluso cientos, de pequeños recursos en forma de ficheros, a través del protocolo http. Esto lo podeis ver con herramientas de desarrollador como Firebug o Chrome.


    Cuanto mayor sea el tamaño que tienen estos archivos, mayor será el tiempo que el navegador necesita para descargarlos y por tanto el tiempo necesario para cargar la página desde la que se descargan.

    Afortunadamente, los servidores web están preparados para comprimir estos ficheros (normalmente GZip) y los navegadores para detectar que el servidor permite acceder al contenido comprimido, pedirlo comprimido, y descomprimirlo.

    Si usais un hosting con el panel CPanel, podeis habilitar esta opción en la sección "Software / Services" y entrando en la pantalla "Optimize website". Ahí, podrás optar por comprimir ciertos tipos de contenidos o comprimirlo todo.


    Los archivos de imágen ya suelen utilizar buenos algoritmos de compresión, así que lo ideal es comprimir archivos de texto: html, js, css, etc.

  4. Utiliza CloudFlare CDN (Content Delivery Network).

  5. Una CDN (red de distribución de contenido) es una red de ordenadores distribuída por todo el mundo, que se encarga de cachear tus contenidos estáticos, está diseñado para servirlos por tí a muy alta velocidad (con la que aligera de trabajo a tu servidor) y que además sirve estos contenidos a tus usuarios desde el servidor más cercano a su localización geográfica, con lo que disminuye el "número de saltos" por la red que deben realizar estos contenidos hasta llegar a tus usuarios. En la siguiente figura vemos la distribución de servidores por el mundo del CDN CloudFlare.



    ¿Por qué recomiendo CloudFlare? Es el CDN que yo he utilizado, y además de ofrecer un servicio básico gratuito, ofrece una serie de servicios adicionales de valor añadido que también tienen un impacto directo sobre el tiempo de carga de vuestra web. Una vez que el CDN se descarga nuestro contenido estático, y antes de servirlo desde el servidor más próximo a nuestros usuarios, aplica una serie de optimizaciones de rendimiento sobre dichos archivos.
  • "Minimiza" al vuelo los caracteres innecesarios de ficheros de texto, llegando a reducir su tamaño un 20 %, con el consiguiente ahorro en los tiempos de descarga. 

  • Utiliza las características de almacenamiento local de los navegadores modernos (basadas en html 5) para cachear en el cliente.

  • Ajusta automáticamente las cabeceras http de respuesta de los servidores para que den instrucciones a los navegadores sobre cómo deben cachear los recursos servidos, para minimizar el número de peticiones http que éstos le realizan.
  • Modifican el código HTML de las páginas servidas por las webs originales, para que los recursos que bloqueen la carga de la página (archivos javascript, etc) se carguen al final, de forma que parezca que la página se carga más rápido. 

  • Combina múltiples ficheros javascript en un único fichero, de forma que en lugar de a través de múltiples peticiones http se sirvan a través de una única petición.

Con estos sencillos pasos he conseguido la sensible mejora de tráfico descrita en la entrada anterior. Todavía quedan algunos pasos, especialmente de cara a optimizar la carga de la web para dispositivos móviles, pero parece claro que el retorno de inversión en optimizar la carga de una web es inmediato en términos de posicionamiento en Google.

 


 







Velocidad de carga: cómo incrementar un 100% el tráfico a tu página web (I)

El objetivo de todo creador de una web es que ésta sea utilizada: todos queremos que nuestra web tenga mucho tráfico, que muchas personas la visiten al cabo del día.

Está claro que el primer factor que determinará que una web tenga un tráfico elevado es que su contenido tenga calidad, y despierte el interés de los usuarios. En este sentido, www.lookingformaps.com pretende convertirse en el "Google de los Mapas", localizando e indexando las principales fuentes de mapas existentes en Internet, y ofreciendo a los usuarios un buscador que les permita localizar  rutas, tracks GPS, mapas o guías turísticas y posteriormente descargarselas para planificar sus viajes o excursiones.

No obstante, que un producto sea bueno no es suficiente para que la gente lo "compre", es necesario que la gente lo conozca. Y en el caso de la web, todos en mayor o menor medida nos hemos acostumbrado cuando buscamos algo a entrar en Google y poner dos o tres palabras relacionadas con el mismo. Para muestra un botón: en los últimos cinco meses, en torno al 75 % del tráfico de www.lookingformaps.com procede de búsquedas  de Google.



En este sentido, está claro que para que una web tenga un tŕafico alto, un requisito indispensable es que aparezca en los primeros lugares de los resultados de búsquedas mostrados por Google, para aquellas "palabras clave" relacionadas con los contenidos de dicha web.

Google, para decir "cómo ordena" las páginas webs que va a mostrar como resultado de una búsqueda, tiene en cuenta múltiples criterios: la relevancia que se le da a esa web medida a través del número de links que apuntan a ella, la coincidencia de las palabras de búsqueda con el contenido de la web, etc. Los creadores de sitios web intentan tener en cuenta todos estos factores, que Google ha hecho más o menos explícitos a través de sus Directrices para Webmasters, y optimizar sus páginas para que le gusten a Google y el buscador les de una nota alta: es lo que se conoce como el SEO (Search Engine Optimization).

Pero para Google, no solo es importante que el contenido que una página ofrece sea de calidad, y tenga relación con la búsqueda hecha por el visitante. Google da mucha importancia a que la "experiencia de usuario" que va a tener quien visite esa página sea buena, y un factor muy importante en dicha experiencia de usuario es la velocidad de carga de la página.

Ahora bien ¿hasta cuanto de importante es que una web cargue rápido, para que Google la recompense con un lugar superior en sus resultados de búsqueda?

En los últimos meses he hecho una serie de pruebas para "Looking for Maps", y la verdad es que los resultados obtenidos han sido muy reveladores: la reducción en los tiempos de carga de las páginas de la web ha supuesto como mínimo un incremento del 100% en el tráfico del sitio web, y como efecto secundario, prácticamente un incremento del 100% en los ingresos por publicidad.


 En la gráfica de Google Analytics se pueden observar dos momentos clave:
  1. En el que se produce un primer incremento de tráfico, ligado a una serie de optimizaciones básicas en el código del buscador de mapas.
  2. En el que se produce un segundo "salto" cuantitativo en el número de visitas, ligado a una serie de optimizaciones de rendimiento.
Quizás podamos observar mejor estos "saltos" en el tráfico de LookingForMaps.com si en vez de ver la curva diaria de visitas, más sujeta a fluctuaciones, vemos la curva semanal en esta otra gráfica, en la que también se aprecia mejor como el tráfico semanal en términos de número total de visitas únicas semanales se ha duplicado (de menos de 5.000 a más de 12.000).


Aunque no sea una "regla de proporcionalidad", que siempre se cumpla, lo cierto es que la cuantía de ingresos en publicidad es altamente dependiente del número de visitas de una web, siendo habitual que el número de anuncios en los que hacen clicks nuestros visitantes esté en una orquilla de entre el 0,5 % y el 1,5 %, con lo que el aumento del tráfico se traduce también en un aumento de ingresos por publicidad de la web, como podemos ver también en la siguiente gráfica de ingresos de Google Adsense.



En la siguiente entrada detallaré cuales son las medidas de optimización que he aplicado en la carga de las páginas de lookingformaps.com para mejorar su rendimiento. Simplemente, como dato final, esta gráfica conseguida con la herramienta de Google para Webmaster, en la sección "Rastreo / Estadísticas de Rastreo".



 Se puede ver como el tiempo medio de carga se ha reducido a la mitad, si bien aparecen picos. Estos picos responden a momentos concretos en los que el tráfico ha sido muy elevado, muy por encima de la media. Descontando estos picos, se observa como la "curva" se estabiliza, más cerca del eje de las Xs.