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.
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.
¡ 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!
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.
Utiliza CloudFlare CDN (Content Delivery Network).
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.
No hay comentarios:
Publicar un comentario