Puede que hayamos escuchado que la optimización web es un trabajo fino y costoso. Lo es. Pero también es cierto que con algunas pocas modificaciones sustanciales, nuestro sitio puede recuperar su rendimiento a un nivel aceptable y dejemos de perder visitas. Volvemos a ser competitivos.

 

Recuperando el rendimiento de un sitio que funciona lento

La semana pasada me contactó Dimitri Zabuta contándome que su sitio web respondía demasiado lento y con elocuencia me preguntó si podía hacer algo al respecto.

Para quienes no lo conocen aún: Dimitri combina magia y mentalismo con su segunda gran pasión: viajar. Durante los últimos años, ha recorrido Europa, Sudeste Asiático, América del Norte y del Sur. Gracias a sus habilidades lingüísticas pudo realizar shows de magia en distintas partes del mundo. En su residencia en Argentina, realiza shows y animaciones regularmente, obtuvo numerosas presentaciones en la televisión local, entre ellas “Hora de Reír” (Canal 9), “Prende y Apaga la Luz” (Canal 13), “El Legado” (Canal 7), entre otros. En 2017 su talento fue reconocido por la comunidad mágica, y obtuvo el segundo puesto en el campeonato Latinoaméricano de la magia (categoría cartomagia).

Así que si querés agregarle magia a tu evento, ya sabés a quien llamar.

En el último tiempo su carrera ha crecido enérgicamente, y como es de imaginar, no podía dejar su web atrás. Me dijo “necesitaría resolver esto lo antes posible“. El formulario de contacto de una web cumple un rol fundamental. Entendiendo la situación, le dí mi respuesta: lo que normalmente se puede hacer es optimizar el rendimiento.

Ahora bien, cuando nos adentramos en el campo de la optimización de rendimiento de un sitio web, además de la propia complejidad técnica que implica, nos encontramos con que necesitamos un parámetro de referencia común para usar de punto de partida. Lo primero que hice -entonces- fue determinar con precisión cuánto era “demasiado lento”.

¿Cómo puedo medir el rendimiento de mi sitio?

Una muy buena herramienta gratuita para medir el rendimiento de un sitio es el Website speed test de Pingdom. Ejecutar una prueba (test) es realmente sencillo: Sólo es necesario indicar la dirección web y seleccionar un servidor desde donde Pingdom ejecutará sus pruebas. Esto es así porque si bien “Internet está en todos lados” y “la información viaja a la velocidad de la luz”, todavía es bastante cierto que la red global está (por diseño) fragmentada y esto afecta al enrutamiento de los paquetes de información, causando que la velocidad de carga de un sitio pueda no ser la misma desde un punto en el planeta y otro punto geográficamente lejano.  Yo elegí Estocomo.

Diagnóstico Inicial

Veamos cómo se presenta el resúmen de análisis:

Resumen de análisis de velocidad de Pingdom.

Resumen de análisis de velocidad de Pingdom, antes de optimizar.

¿Cómo interpretar el análisis de velocidad?

Como decíamos, el informe de velocidad puede ser técnicamente críptico a los ojos de cualquier persona ajena al mundo informático. Sin embargo, hay 4 valores que podemos rescatar para tener alguna idea de lo que está pasando:

  • Performance Grade (“Grado de Performance”): Utiliza una escala numérica de 0 (peor rendimiento) a 100 (mejor rendimiento) y la clasifica con una letra”F” (peor rendimiento) a”A” (mejor rendimiento). Se basa en los mismísimos parámetros de calificación de Google PageSpeed. En nuestro caso nos encontramos con un “D 63″, bajo rendimiento.
  • Load Time (“Tiempo de Carga”): Es el tiempo total (en segundos) que llevó el sitio en ser cargado y mostrado al visitante. Este valor puede variar entre prueba y prueba, pero es un promedio lo suficientemente acertado como para decir en nuestro caso “Los visitantes suelen tener que esperar más de 20 segundos para navegar el sitio.”. Esto no es bueno y veremos por qué. Desde luego, también veremos cómo mejorarlo.
  • Faster Than (“Más rápido que”): Es el porcentaje de sitios web que nuestro sitio logró superar en rendimiento, comparado con el total de sitios medidos alguna vez por Pingdom. En nuestro caso, un “%5” es un valor bajo.
  • Page Size (“Tamaño de Página”): Es el “peso” en kilobytes o megabytes que tuvo que descargar el navegador para mostrar nuestro sitio al visitante. Puede que interpretar este valor sea algo complicado para algunas personas no técnicas. Una regla general es que mientras “más liviano” es el sitio, más rápido carga. Por otro lado, mientras “más contenido” tenga nuestro sitio, es posible que se vuelva “más pesado”. De nuevo, hay formas de lidiar con esto y para eso estamos aquí.

Luego tenemos Requests (“Cantidad de peticiones“) que en otras palabras es la cantidad de veces que se ejecutó la prueba como para obtener un promedio, y finalmente el servidor que elegimos.

Todo lo que sigue del informe es altamente técnico y escapa de nuestro alcance hoy, pero podemos decir que es información muy útil para el proveedor de servicios que vaya a optimizar el rendimiento de nuestro sitio.

¿Cómo afecta la lentitud de un sitio?

Que nuestro sitio funcione lento nos afecta, es un dato obvio. Pero eso no suele ser suficiente para tomar acción y resolver el problema. Veamos exactamente cómo nos afecta:

  • Perdemos muchas visitas: En un mundo de gratificación instantánea (podemos discutir si eso es bueno o no para la humanidad en otro capítulo) a los usuarios no les gusta esperarSi nuestro sitio está por debajo de la media, es muy probable que abandonen el sitio incluso cuando la página está aún en blanco.
  • Está claro que muchas de esas visitas son clientes o compradores habituales que no llegan a concretar alguna operación: sea contactarnos o realizar un pedido.
  • A los buscadores como Google (y otros) no les gusta los sitios lentos. Esto significa que estará menos rankeado en los resultados de búsquedas, generando ahora la pérdida de potenciales clientes o compradores.
  • Hoy día se reparte muy parejo el acceso mobile (teléfonos, tablets, etc) y de escritorio (PC, laptop, etc). Si tenemos en cuenta que la carga en dispositivos móviles suele ser aún más lenta (por motivos tecnológicos), estamos penalizando aún más a estos usuarios.

¿Qué podemos hacer al respecto?

Puede que hayamos escuchado que la optimización web es un trabajo fino y costoso. Lo es. Pero también es cierto que con algunas pocas modificaciones sustanciales, nuestro sitio puede recuperar su rendimiento a un nivel aceptable donde las penalizaciones antes mencionadas dejan de ser una urgencia. Volvemos a ser competitivos. En otras palabras, bajo la ley de Pareto podemos hacer un 20% de cambios que impacte en un 80% de mejora.

Aplicando cambios sustanciales

Algo importante a saber cuando tenemos un sitio web, tenemos tecnología que evoluciona constantemente. Esto requiere tareas de mantenimiento para persistir compatibles con los estándares de Internet en términos de seguridad, rendimiento, estabilidad, interoperabilidad, funciones, etc. Llevar a cabo estas actualizaciones a veces no es trivial, especialmente cuando ha pasado mucho tiempo sin actualizarse.

Existen miles de tutoriales y documentos explicativos sobre cómo optimizar el rendimiento de un sitio. Estas “mejores prácticas” cambian tan rápido como la tecnología misma. Pero lo que se mantiene en el tiempo (al menos hasta hoy) son las matemáticas: si el sitio está pesado, el sitio estará lento.

¿Por donde empezar? Eliminando los cuellos de botella.

Resultados después de optimizar

Volviendo a nuestro caso, y en resumen, aplicamos las mejoras más significativas según el informe, lo cual requirió:

  • Optimizar todos los archivos de imagen (JPG y PNG)
  • Habilitar un plugin de cache
  • Ajustar hojas de estilo CSS para carga sin bloqueo
  • Ajustar el webserver para control de cache de contenido estático
  • Cambiar de versión de PHP de 5.x a 7.x
  • Ajustar la configuración del CMS y el template
  • Asegurar la desactivación de modo debug

Estas tareas pueden resultar de una descripción muy técnica. Lo importante es comprender que el sitio tiene una configuración y una serie de contenidos, y ambas cosas pueden optimizarse.

Diagnóstico Final

Ejecutando una nueva prueba, éstos fueron los resultados:

Resumen de análisis de velocidad de Pingdom.

Resumen de análisis de velocidad de Pingdom, luego de optimizar.

Hay un sinfín de beneficios detrás de cada ajuste realizado. Pero vamos a enfocarnos en los parámetros principales que habíamos analizado:

  • Se logró mejorar el Performance Grade de “D 63” a “C 76” (Mejora de alrededor del %20)
  • Se logró reducir el Load Time de 27.87 seg a alrededor de 2.54 seg (Mejora de alrededor de 10 veces más rápido)
  • Ahora el sitio es más veloz (Faster Than) que la mayoría de los sitios testeados, revirtiendo esta situación.
  • El Page Size se redujo sólo en 2.2 MB. No es mucho (podría ser más), pero vemos que aún así se logran resultados significativos.

¡Es mágique!

Algunas aclaraciones

No todo es tan simple. En nuestra primer prueba de optimización el sitio respondió muy bien en términos de velocidad, pero notamos que la galería de fotos había cambiado su comportamiento y no se presentaba como originalmente. En otras palabras, se había roto el diseño.

¿Por qué suceden estas cosas?

Como decíamos anteriormente, junto con los cambios de configuración viene aparejado cambios de comportamiento de componentes en general complejos: side effects (efectos secundarios). Lidiar con estos efectos depende mucho de cada sitio en particular y como regla general, podemos decir que mientras más simple sea y más mantenimiento regular tenga, menor será el impacto negativo.

Desde luego, hicimos algunos nuevos ajustes relacionados con la optimización de hojas de estilo y logramos el resultado que buscábamos: un sitio más rápido con el mismísimo aspecto y diseño original.

Checklist de validación

  • Verificar que el diseño se mantiene igual que antes
  • Verificar que funcionan todos los enlaces igual que antes
  • Verificar que los mensajes del formulario de contacto siguen saliendo

Conclusiones

Describiría el rendimiento de un sitio web (para el público en general) en cuatro grandes categorías: Óptimo, Performante, Estándar y Degradado.

  • Óptimo: Funciona lo más veloz que la tecnología de punta conoce. (Casi teórico)
  • Performante: Funciona más veloz que la mayoría de los sitios no optimizados.
  • Estándar: Funciona tan veloz como cualquier producto instalado de base (out of the box) sin optimización.
  • Degradado: Por algún motivo perdió sus condiciones de estándar y funciona más lento. Puede corregirse.

Es conveniente que el sitio responda al menos bajo el Estándar para que nuestro negocio no se vea afectado. En tanto vamos creciendo y logrando reconocimiento global, es estratégico invertir en mejoras continuas a nuestro sitio para darle escalabilidad. Una de esas mejoras es la optimización de rendimiento (performance).

Hoy analizamos un caso de sitio personal con ajustes básicos. Para casos de mayor escala trabajo con mi co-equiper experto en Infraestructura tecnológica Pega.sh.

P.D.: Si te gustaría diagnosticar tu sitio o querés optimizarlo, podés contactarme aquí.