El WPO, Web Performance Optimization, es una de las principales técnicas que tenemos para hacer que nuestros sitios web se rendericen más rápido. En esta época en la que a menudo la velocidad de los sitios web determina la cantidad de conversiones, las ventas que realizamos los clientes que contratan nuestros servicios, contar con una web rápida es fundamental para asegurar nuestros objetivos de negocio a largo plazo.
¿Qué es WPO?
El WPO, Web Performance Optimization, se trata del performance de tu web, mejorar la velocidad de carga de tu web. El objetivo es optimizar el renderizado de HTML para los usuarios. Cómo entregamos el HTML y otros recursos al cliente, dónde está nuestra latencia, cuándo nuestra experiencia de usuario no es óptima porque nuestro sitio es muy lento, cómo se renderizan nuestras páginas, ¿Se podrían renderizar de otra forma para mejorar la experiencia de usuario? Tradicionalmente conocido como Front End Optimization o Front End Acceleration, el WPO ahora también se enfoca en el Back-End.
El WPO también busca asegurarse de que nuestras imágenes tienen la compresión adecuada, de que mandamos las imágenes de nuestra página web en el formato más pequeño posible. Cuando hablamos de WPO definitivamente tenemos que hablar de medición, de timing. Para mejorar la experiencia del usuario tenemos que lograr que éste espere lo menos posible para que cargue nuestra página web.
La gran pregunta del WPO es Cómo, nos vamos a concentrar más en cómo un elemento se renderiza y no en qué elemento se renderiza.
El WPO incluye
- Generación de HTML y gestión del servidor Web
- Latencia y descarga en red
- CDN’s
- El renderizado de JavaScript
- Las mecánicas de los navegador sy el renderizado de HTML
- Medición
WPO y SEO
Mejorar el rendimiento de tu web lleva a una mejor experiencia de usuario. La experiencia de usuario de un sitio web siempre afecta de forma positiva a su posicionamiento. La velocidad de carga de una web, el que el usuario sea capaz de navegar con rapidez por nuestro sitio afecta completamente al SEO.
Un buen WPO tiende a mejorar la indexación y el crawleo de los buscadores, como Google.
Para Google la velocidad de un sitio es un factor de clasificación, por lo que un sitio más rápido afecta de forma positiva el posicionamiento en los resultados de búsqueda.
WPO y su impacto en las búsquedas e ingresos
Ahora veamos cómo es que afectó a varias empresas la implementación de WPO o la falta de éste en sus proyectos web:
Para el navegador Bing :
- 1 segundo de retraso conlleva a una caída del 2.8% de los ingresos.
- 2 segundos de retraso llevan a una caída del 4.3% de los ingresos.
Para Yahoo:
- 400 milisegundos de demora en la carga de su sitio llevan a una pérdida de tráfico de entre el 5% y el 9%.
Para Google:
- 0.4 segundos de retraso causan una caída del 0.59% de las búsquedas por usuario.
- 0.5 segundos de retraso implican un 25% de caída en las búsquedas.
Para Amazon:
- 0.1 segundos de retraso conllevan a una pérdida del 1% de los ingresos totales.
Para Mozilla:
- Cuando aplicó WPO en su página de descargas incrementó el número de éstas en un 15.4%.
Para Google Maps:
- Aligeró los archivos de la página en un 30% y la consulta se incrementó un 30%.
Para Netflix:
- Cuando habilitó la compresión Gzip en su sitio hizo que éste fuera entre el 13 y el 25% más rápido. Aumentó el volúmen de tráfico un 50%.
El performance de una página web
Cuando medimos el WPO de una página tenemos que ver las Core Web Vitals de ésta. Las Core Web Vitals son un conjunto de métricas para evaluar la experiencia del usuario. En éstas incluímos el LCP (Largest Contentful Paint), que mide el tiempo que tarda el contenido más grande de una página. A menudo se trata de una imagen que debemos convertir a un formato más amigable.
Otra métrica es el FID (First Input Delay) que mide el tiempo que tarda el sitio en responder a la primera interacción del usuario, así como el CLS (Cumulative Layout Shift) que es la estabilidad visual de la página, que no se muevan solos los elementos cuando estamos renderizando la página web.
Cómo mejorar el rendimiento de una página web
Para mejorar el performance de tu sitio web puedes implementar alguna (o todas) de las siguientes técnicas:
- Optimizar las imágenes: comprime y optimiza las imágenes para reducir el tamaño de los archivos y mejorar los tiempos de carga. El formato .webp es el preferido para esta optimización.
- Implementa caché en el sitio: Usar un sistema de caché para guardar los datos a los que se accede con frecuencia, esto reduce la carga del servidor y aumenta la velocidad de renderizado en la página.
- Utiliza un CDN (Content Delivery Network): Distribuye el contenido de tu sitio en varios servidores alrededor del globo. Esto minimiza la latencia y mejora la velocidad de carga.
- Minifica los recursos: Minifica los archivos HTML, CSS y JavaScript para disminuir su tamaño y mejorar la eficiencia de carga. Esto se logra removiendo los espacios en blanco y los comentarios.
- Reduce las solicitudes HTTP: Disminuyes las solicitudes HTTPs cuando consolidas los recursos como imágenes, scripts y hojas de estilo.
- Habilita la compresión Gzip: Con esto reducirás el tamaño de los elementos en la página web que son transferidos entre el servidor y el cliente.
¿Por qué mi página web carga muy lento?
Para saber la razón de por qué nuestro sitio o una determinada página web carga lento disponemos de algunas herramientas que nos ayudan a saber la razón o las razones detrás de este retraso.
Herramientas:
- PageSpeed Insights
- GTmetrix
- WebPageTest
Analizar los reportes de estas herramientas de velocidad nos puede ayudar a detectar problemas en la carga como optimización de imágenes, ejecución de scripts y tiempo de respuesta del servidor.
Entre algunos de los puntos que podemos considerar para resolver este problema tenemos:
- La elección del hosting
- El análisis de nuestra web
- Detección y corrección de errores comunes
- Optimización de imágenes y vídeos
- Rendimiento en dispositivos móviles
Como vimos, las técnicas de WPO, Web Performance Optimization, son cruciales para mejorar la eficiencia y el rendimiento de tu sitio web. Esto se traduce en una experiencia positiva para el usuario y un aumento de las conversiones, además de una mejora del SEO. ¿Conocías estas técnicas de performance?
Portada: Imagen de rawpixel.com en Freepik