Optimización de webs y apps (incrementando el rendimiento y depurando lentitud de carga)

En este artículo buscamos tratar de forma general algunas recomendaciones de optimización de rendimiento que son comunes a todo tipo de aplicaciones como Wordpress, Magento, Prestashop, Joomla, entre otros.

No se trata de una guía específica a cada tipo de app, pero si un indice con el que partir para mejorar el rendimiento de nuestras aplicaciones y también poder descartar problemáticas frecuentes que puedan causar lentitud en las mismas.

Configuración de la aplicación

Cuando se instala una aplicación, partimos con una configuración inicial muy básica, ideal para comenzar el desarrollo sin encontrar demasiados errores en los primeros pasos.

Por ejemplo Prestashop establece que el motor de plantillas (smarty) debe recompilar en cada acceso el fichero de cada plantilla, de esa forma cuando realices cambios en el diseño los verás al instante.

Una opción perfecta durante el desarrollo pero problemática una vez la tienda esté finalizada, ya que esta opción realizada una y otra vez en cada acceso, demorará la carga notablemente e incrementará el uso de recursos (cpu) lo que se traduce en una experiencia negativa para el usuario que accede.

Es por este tipo de opciones que aplicaciones como Prestashop o Magento suelen en apariencia ofrecer un rendimiento bastante bajo.

Por ese motivo es importante revisar cada parámetro de las configuraciones de estas aplicaciones, entendiendo que es que en cada caso y como y cuando se deben modificar.

Dentro de las configuraciones de cada app existen además configuraciones de cache y rendimiento específicas que se deben revisar.

Sistema de cache

Imagina una app como un conjunto de bloques en el que cada uno se encarga de una función, por ejemplo Wordpress dispone de un bloque que obtiene un listado de categorías, cada vez que un usuario accede, la aplicación ejecuta el código PHP que a su vez “hablará” con la base de datos hasta completar un proceso con el que obtendrá el listado de categorías con un formato específico traducido en código HTML.

Esta acción se realiza en milisegundos, si fuese un único bloque no habría problema pero imagina decenas o cientos de acciones simultáneas, la cosa se complica.

Ahora imagina que podemos crear copias de estos bloques donde el resultado esté almacenado en memoria, de forma que cuando accedemos en vez de ejecutar todo el proceso de nuevo, se obtenga una copia del bloque desde esta memoria (mucho más rápida), esto es lo que hacen de forma muy resumida los sistemas de cache, analizan aquellos bloques que no cambian en resultado y los almacenan en un sistema de cache para agilizar los accesos, esto se traduce en un incremento de rendimiento y decremento del uso de recursos (lo que a su vez significa que podrás tener más tráfico simultáneo en un plan pequeño).

En cada aplicación existen diferentes tipos de sistemas de cache, desde aquellas donde estos ya están integrados en el núcleo como otras que se obtiene por medio de plugins.

Como seguro ya sabes, hostsuar utiliza un servidor web algo diferente, Litespeed, es un servidor con un rendimiento superior al resto de alternativas y que además cuenta con diferentes plugins de cache desarrollados por ellos, el objetivo es que las aplicaciones puedan sacar todo el rendimiento a Litespeed, por ese motivo te recomendamos uses dichos sistemas de cache si tu aplicación es compatible:

Ajustes en la configuración de PHP

Cada versión de PHP incluye mejoras de seguridad, características, pero también de rendimiento, por ese motivo es esencial que siempre configures la versión de PHP más alta que tu aplicación soporte.

Desde el selector de version de PHP podrás cambiar entre una y otra al vuelo, probar que todo está correcto en versiones superiores o volver a una anterior.

Además te recomendamos actives un modulo concreto opcache, se trata de un sistema de optimización que reduce el número de operaciones necesarias en ejecuciones de código PHP por medio del uso del almacenamiento en memoria, esto significa obtener un incremento de rendimiento (en algunos casos 3x) sin necesitar más que activar este módulo.

Optimización de recursos estáticos

Los recursos estáticos son aquellos que no ejecutan código, permanecen igual siempre, son por norma general imágenes, ficheros css (hojas de estilo) o js (código javascript).

Consejos en el uso de librerías y recursos externos (imágenes, librerías javascript…)

A menudo se usan imágenes de otras webs enlazadas de forma directa, esto que parece cómodo puede convertirse en un problema. Que pasa si el servidor hacia el cual se realizan las peticiones se vuelve lento o inaccesible, pues todo lo enlazado dejará de funcionar con el consiguiente tiempo de espera desde tu servidor para tratar de llamar al fichero hasta que se produce el "tiempo de espera agotado". Esto en según que aplicaciones puede detener la carga de la web bastantes segundos, manteniendo a la espera al usuario que accede el cual pensará que se trata de una web extremadamente lenta.

Si usas librerías externas, procura enlazarlas desde sistemas fiables que usen sistemas de distribución de contenidos como jsdelivr o cdnjs.

Imágenes

Toda imagen destinada a una web debe ser optimizada, recuerda que los datos son transferidos por lo que no debes usar una imagen redimensionada únicamente en tamaño a través del html pero que después ocupe varios MB y sus dimensiones reales sean mucho mayor, si la imagen la necesitas de 200×200 entonces cámbiale dicha dimensión, de esa forma ocupará mucho menos y también optimiza la calidad de la imagen.

Recuerda que si tienes una o varias imágenes sin optimizar correctamente el peso de la web será considerable provocando lentitud de carga a tus visitantes.

Otros ficheros estáticos (.js y .css)

Siempre que sea posible, minifica y unifica los códigos js y css, la mayoría de los plugins de cache disponen de esta funcionalidad.

Depurar las conexiones

Aprender a ver y depurar las conexiones que realiza una web es una habilidad esencial para todo desarrollador, nos permite ver si existen llamadas problemáticas, ficheros que están siendo usados y de los que no teníamos constancia, conocer el tamaño total por petición y web completa, tiempos de respuesta, errores de respuesta y muchos otros.

Cada navegador incluye su consola de depuración aunque en la práctica todas son similares.

Plugins, componentes y themes, el aliado convertido en enemigo

Aplicaciones como Wordpress, Prestashop o Magento son largamente extensibles, se alimentan de un ecosistema de plugins, módulos o themes para conseguir funcionalidades de las que por defecto no disponen.

A simple vista no hay nada malo en esto, pero se debe tener presente que cada vez que añadimos un plugin estamos añadiendo "peso" a nuestra aplicación, es una funcionalidad de la que depende del sistema y por lo tanto repercutirá en el funcionamiento.

Hemos llegado a ver instalaciones de Wordpress con más de 100 plugins, estamos seguros se puede conseguir estas mismas funcionalidades con mucho menos y en la mayoría de los casos el 80% de estos plugins no tienen uso real.

Algunos consejos:

  • Instala solo aquellos plugins que realmente necesites.
  • Contrasta las opiniones y puntuaciones para saber que efectivamente el plugin o theme dispone de un funcionamiento correcto.
  • Verifica que el desarrollador de mantenimiento activo, sacando versiones nuevas del plugin (un plugin abandonado puede acarrear graves problemas de seguridad).
  • Verifica el rendimiento general tras la instalación de nuevos plugins o themes.

Posibles errores internos

Por defecto todos los sistemas ocultan cualquier error que se produzca en el código PHP de una app, esto lo hace para en caso de fallo, evitar mostrar información sensible a los usuarios que accedan.

No obstante puede ser recomendable activar alguno de los mecanismos de registro o mostrado de errores para ver como se comporta nuestra aplicación y de esa forma poder detectar advertencias o fallos que en apariencia pasaban desapercibidos.