Optimización de la web
Cuando una página web tarda demasiado en cargar solemos echar la culpa a la conexión a Internet. En la mayoría de las ocasiones el enfado con el router o nuestro proveedor de internet está justificado. Sin embargo, en muchas otras se da el caso de que la web a la que queremos acceder está mal optimizada y la carga del contenido de la misma supera con creces el tiempo medio de carga de las páginas web (2-3 segundos). Esto puede suponer un verdadero problema para aquellos cuya web es su escaparate y desde ella ofrecen sus productos o servicios. Como ejemplo de ello, tenemos a grandes empresas de Internet como Amazon, donde 0,1 segundos de retraso suponen una pérdida del 1% en ingresos, o Facebook, que un solo segundo provoca una caída del 6%.
Pero, ¿cómo se puede saber si un sitio web está bien optimizado? PageSpeed Insights es una plataforma desarrollada por Google que permite conocer de una forma rápida y sencilla si una página web está bien optimizada. Tras un pequeño análisis de la página, la plataforma refleja en los resultados qué mejoras son las más recomendadas para que el sitio web esté correctamente optimizado.
Si bien una página web puede estar siendo ralentizada por gran cantidad de factores, por norma general, existen cinco que suelen darse en la mayoría de las páginas. En DIGITAL55 hemos querido recopilar estos cinco factores y las técnicas recomendadas por Google para mejorar la velocidad de un sitio web.
Minificar recursos (HTML, CSS y JavaScript)
La minificación hace referencia a un proceso por el cual se eliminan los datos innecesarios o repetidos de un recurso sin afectar al modo en el que los navegadores lo procesan. Esto permite eliminar código que no se utiliza, formatos innecesarios, emplear nombre de funciones más cortos, etc. En resumen, hacer un barrido por el sitio web para quitar todo aquello que no hace falta y que retrasa la carga de la web. Google aconseja utilizar las siguientes herramientas para minificar los recursos en HTML, CSS o JavaScript:
- Minificar HTML: HTMLMinifier.
- Minificar CSS: CSSNano y csso.
- Minificar JavaScript: UglifyJS y Closure Compiler.
Aprovechar el almacenamiento en caché de los navegadores
Cada vez que se accede por primera vez a un sitio web se descargan los recursos del mismo y se almacenan en la memoria caché del navegador. De este modo, la próxima vez que los usuarios visiten el sitio no será necesario realizar el proceso nuevamente y podrán acceder a la web más rápidamente. Es un proceso lento y “puede requerir varios ciclos de ida y vuelta entre un usuario y un servidor para que todos estos recursos sean descargados”, lo cual puede llegar a bloquear el renderizado del contenido de las páginas, es decir, provocar que la página web no cargue correctamente o no se vea como debe.
Todos los recursos cuentan con una política de almacenamiento de la memoria caché donde se define si el recurso en cuestión puede ser almacenado en la misma, quién podría almacenarlo y durante cuánto tiempo puede almacenarse.
La interacción entre usuario y servidor se resume en peticiones y respuestas respectivamente. Cuando un servidor devuelve una respuesta debe proporcionar los encabezados Cache-Control y ETag:
- Cache-Control “permite definir cómo y durante cuánto tiempo los navegadores y otras memorias caché pueden almacenar una respuesta concreta”.
- ETag, por su parte, “proporciona un token de revalidación que los navegadores envían automáticamente para verificar si el recurso en cuestión ha cambiado desde la última vez que se solicitó”.
Según las recomendaciones de Google, el tiempo de almacenamiento óptimo de la memoria caché es de una semana mínimo, o de hasta un año para aquellos sitios web cuyos recursos cambien con poca frecuencia.
Por otro lado, para conocer qué política de almacenamiento caché es la óptima para una página web concreta, Google pone a disposición de los usuarios dos guías muy completas:
Habilitar la compresión
La compresión GZip está disponible en todos los navegadores. Dicha compresión se ejecuta automáticamente cuando un usuario realiza una solicitud HTTP a un servidor. Habilitar la compresión GZip permite reducir el tamaño de las respuestas del servidor en un 90%, lo cual permite a su vez disminuir el tiempo de descarga del recurso que se haya solicitado.
Google recomienda el uso de HTML5 Boilerplate, una plataforma que incluye guías muy completas de la configuración de los servidores más populares. Los usuarios pueden buscar su servidor y, siguiendo los pasos indicados, configurarlo de forma adecuada para habilitar la compresión GZip. Es importante tener en cuenta que algunos servidores y antivirus pueden inhabilitar la compresión GZip cuando se descargan archivos en el equipo.
Optimizar imágenes
Por norma general, las imágenes representan la mayor cantidad de datos a descargar de una página. Por ello, optimizar estos recursos es uno de los mejores métodos para mejorar el rendimiento de la web.
En su plataforma dedicada a desarrolladores, Google ofrece una guía con las prácticas recomendadas para publicar imágenes adaptables.
Los formatos GIF, PNG y JPEG suponen el 96% del total de las imágenes de Internet. Es por esto que la herramienta PageSpeed Insights de Google ofrece recomendaciones específicas para optimizar este tipo de formatos. No obstante, existen alternativas a disposición de los usuarios como ImageMagick, cuyo resultado es muy similar. Cabe destacar que si las imágenes ya están bien optimizadas, es posible que al usar herramientas de terceros las imágenes aumenten de tamaño.
PNG, GIF y JPEG
Con el formato PNG la compresión de las imágenes no supone una pérdida de calidad. Por otro lado, con los GIF es más recomendable utilizar video en lugar de este formato. En el caso de los JPEG el proceso de compresión elimina detalles de la imagen. No obstante, la tasa de compresión puede llegar a ser 10 veces mayor que la de los formatos anteriores.
Mejorar el tiempo de respuesta de los servidores
Para que una sitio web se considere que está bien optimizado, el tiempo medio de respuesta de un servidor debe estar por debajo de los 200 ms. Este concepto hace referencia al tiempo que se tarda en cargar el código HTML desde el servidor. Cualquier resultado por encima de ese tiempo es recomendable que sea optimizado.
Existen diferentes factores que pueden ralentizar la respuesta de un servidor: consultas lentas a la base de datos, la escasez de memoria, una lógica de aplicación lenta, las bibliotecas, etc. Google recomienda seguir unos pasos concretos para optimizar la respuesta del servidor de un modo rápido y sencillo:
- En primer lugar, medir los datos del rendimiento para conocer el tiempo exacto de respuesta del servidor y cuál o cuáles son los factores que lo están ralentizando.
- Corregir dichos factores utilizando las guías donde aparecen las prácticas recomendadas en función de la plataforma de gestión de contenidos o el framework web que se esté utilizando.
- Mantener un control periódico del servidor y permanecer alerta por si en un futuro disminuye el rendimiento.
Importancia de la optimización
Como dijimos al inicio, una gran cantidad de personas utilizan las páginas web como escaparates para sus productos o servicios. La correcta optimización de sus sitios web es muy importante para que la navegación por los mismos sea fluida y permita a los clientes potenciales acceder de forma rápida a los contenidos que en él se ofrecen. Una mala optimización repercute directamente en las posibles ventas que se pudiesen realizar desde la web. Por lo que el mantenimiento continuado puede ahorrar futuros problemas de rendimiento que podrían afectar gravemente a la experiencia de navegación de los usuarios que la visitan.
