Optimización de velocidad en sitios web

WPO: Web Perfomance Optimization

Mejorar la velocidad de un sitio web puede ser una tarea sencilla o compleja y delicada, dependiendo de varios factores donde intervienen el servidor donde está alojada la página, el servicio de hosting, tanto en el equipamiento donde está corriendo, el hardware del servidor, como en la configuración del software mismo del servidor.

Por otro lado, la página web en sí, dependiendo la calidad de programación que lleva, si tiene elemento en exceso que la vuelven gorda, la hacen menos ágil, requiere un tratamiento de dieta para sacarle esas parte demás. Mucho del código que tiene la página no es ni siquiera utilizado, por lo que se requiere identificar que código se usa y cual no mediante mediciones y búsquedas en el código para luego extirparlo sin afectar el diseño del sitio.

Estas herramientas nos brinda una serie de variables e indicadores sobre los cuales mejorar, las métricas, estos serán nuestros KPI, los key performance indicators (mismo concepto usado en marketing para medir las campañas):

• El Tiempo de Carga de la página ( Load Time )
• El Tamaño de la página ( page size )
• La cantidad de requerimientos ( request )

Cada herramienta, en base a sus mediciones entregará un índice general (performance score) sobre el cual se basa un sistema de rankeado individual a cada herramienta. Google por su cuenta usa Lighthouse como herramienta para medir y tomar decisiones de rankeo, cambiando su algoritmos en cada versión (la última modificación fue la versión 6 de junio del 2020 que tuvo como consecuencia que mucho sitios bajaran en su ranking). En general, lo que aparece en rojo es malo (marca lo que está mal en la web analizada), amarillo regular y verde bueno.

También nos entregará una serie de sugerencias o mensajes de error y ahorro estimado, algunos posibles:

• Eliminate render-blocking resources
• Remove unused CSS (Elimina archivos CSS sin usar)
• Remove unused JavaScript (Quita los recursos JavaScript que no se usen)
• Avoid multiple page redirects
• Reduce initial server response time
• Minimiza el trabajo del hilo principal
• Reduce server response times (TTFB) Time To First Byte
• Defer parsing of JavaScript
• Total Blocking Time
• Largest Contentful Paint (LCP)
• Cumulative Layout Shift
• Reduce el impacto del código de terceros 
• Serve resources from a consistent URL

Cada mensaje nos indica una tarea por hacer, uno o varios cambios por implementar hasta eliminarlos o minimizar sus efectos.

Lo mejor es realizar las mediciones sin caché , en modo incógnito y repetirlas usando distintos servidores y navegadores

Lentitud: Identificar el origen del problema

El Server
Con estas herramientas hay que pasar a la etapa de identificar el culpable, leer y entender cada uno de los parámetros y mensajes y buscar cuales son los problemas que vuelven más lento el sitio .

Primero lo primero, el hosting, el servidor donde está almacenado, ¿ es de calidad ? ¿ es suficientemente rápido ? a medida que hay mas gente en el sitio, ¿ la velocidad decade ? , ¿que cantidad de memoria tiene el servidor? ¿sobre que cpu corre? ¿cuan rápido es el disco que tiene?, y respecto al software que ejecuta el server, ¿está actualizado? ¿que configuración puede mejorarse?…

La programación de la web
Los sitios puede estar programados con distintas herramientas, frameworks, lenguajes, bases de datos, módulos, .. y cada uno trae aparejado un análisis diferente.

En el caso de sitios dinámicos suelen estar desarrollados en administradores de contenidos CMS ( wordpress, drupal, joomla..), el problema se separa en dos, la configuración en si misma del CMS y la programación de la plantilla o template.

Esto implica revisar que parte del código está realmente siendo usado y cual es redundante y puede eliminarse, tanto javascript como css, luego, eliminarla, y revisar que no afecte al sitio.

Arreglar y re testear
En cada caso se deberá testear cada cambio implemenado para ver como afecta a los parámetros de monitoreo, los KPI nos brindarán la medida de avance o retroceso de estos cambios.

Conclusiones

Cada caso es un mundo en si mismo que deberá analizarse y evaluar puntualmente, pero algunas cosas pueden servir como generalidades.

Dentro de las cosas más sencillas de solucionar están: activar el caché del servidor y del CMS, activar la comprensión GZIP del server, reducir módulos, eliminar código.

En algunos casos solucionar el problema implica cambiar de proveedor de hosting, en otros, solo modificar la configuración del server, en general implica modificar el código de la página lo que en algunas circunstancias puede volver más barato incluso armar una nueva web.

Para más información:
Contratar un servicio para mejorar la velocidad de sitios web