Qué es Web Performance Optimization

Última revisión: 20 de diciembre de 2021

Internet es tecnología

Cuando hablamos de mejorar el rendimiento de un WordPress no hemos de olvidar nunca que Internet es tecnología y que WordPress funciona con componentes básicos de la mayoría de proyectos en Internet.

Y es que, al igual que pasa en el SEO (Search Engine Optimization), en el WPO (Web Performance Optimization) la relación entre infraestructura (hosting), los motores de búsqueda (Google, Bing, Yandex…) y los usuarios que navegan por tu WordPress tienen mucho que ver.

El SEO y el WPO se basa en elementos y algoritmos creados por ingenieros, por lo que, si quieres que un algoritmo te considere mejor, has de hacer que la tecnología esté de tu lado.

El WPO implica el uso de un 100 % mejoras tecnológicas, más o menos fáciles de aplicar. Lo que sin duda es, son mejoras abiertas y que ayudan a que Internet sea mucho mejor, así que hay que ponerse el sombrero del Open-Source y compartir.

Por qué hacer mejoras de rendimiento

Hablar de Web Performance es hablar de mejorar un proyecto web a todos los niveles. ¿Qué significa esto?

Rapidez por defecto: En el caso de WordPress, su núcleo está pensado para que la velocidad tenga un peso considerable, pero quizá no lo están otros elementos que hay su alrededor como extensiones o temas.
Maquetación del navegador: Con el fin de hacer que las páginas web más rápido los desarrolladores necesitan la capacidad de encontrar qué partes son más lentas. Esto requiere revisar el tiempo que tarda en cargar y ejecutarse el JavaScript, los CSS, la maquetación de los elementos, la gestión del DOM (Document Object Model)…
Estándar: Hay que establecer un estándar sobre las formas de medir, los datos, las pruebas… El Web Performance Working Group es un primer ejemplo a tener presente.
Datos: Hacer seguimiento de los resultados y encontrar nuevas oportunidades de rendimiento requiere un gran análisis de datos.
Verde: Los estudios realizados que cuantifican cómo mejorar el funcionamiento web confirman la reducción del consumo de energía y por ello la contaminación que generan los centros de datos.

Algunos datos sobre WPO

Los datos lo dicen todo:

Amazon: 0,1 segundos de retraso implican una pérdida del 1 % de los ingresos.
AOL: hizo una revisión del número de páginas vistas en muchos sitios web y concluyó que aquellos que funcionan rápido tienen unas 7-8 páginas vistas por usuario y que las lentas tan solo 3-4 páginas vistas por usuario.
Bing: 1 segundo de retraso implica una caída del 2,8 % de los ingresos; 2 segundos de retraso implican una bajada del 4,3 % de los ingresos por usuario.
Facebook: 0,5 segundos más lento provoca una caída de tráfico del 3 %; 1 segundo provoca una caída del 6 %.
Google: 0,4 segundos de retraso causan una caída del 0,59 % de las búsquedas por usuario; 0,5 segundos más en cargar implica un 25 % menos de búsquedas.
Google Maps: redujo un 30 % el tamaño de sus ficheros y el número de peticiones aumentó un 30 %.
Hotmail: 6 segundos de retraso en la carga implica 40 millones de anuncios menos al mes, lo que supone 6 millones de dólares menos al año.
Mozilla: hizo su página de descargas 2,2 segundos más rápida y hubo un crecimiento de descargas de un 15,4 %.
Netflix: activó el sistema gzip en sus servidores consiguiendo un aumento de entre el 13 % y 25 % de velocidad de carga y reducción de un 50 % del volumen de tráfico.
Shopzilla: consiguió reducir el tiempo de carga de las páginas de 7 segundos a 2 segundos y la conversión se incrementó entre un 7 % y un 12 %, además de aumentar un 25 % las páginas vistas del sitio y pudiendo reducir la cantidad de servidores a la mitad.
Yahoo!: 0,4 segundos de retraso causan una caída entre el 5 % y el 9 % del tráfico.

De forma general ya nos encontramos con:

El 47 % de los usuarios esperan que una página cargue en menos de 2 segundos.
El 14 % cambia de tienda en línea si la página tarda en cargar.
El 40 % de los usuarios abandona una página que tarda más de 3 segundos en cargar.
El 64 % de los compradores que no están satisfechos cambia de sitio para su próxima compra.
El 52 % de los compradores afirman que un sitio que carga rápido los fideliza.

Qué significa que un sitio web sea rápido

Cuando hablamos de la velocidad de carga de un sitio hay que normalizar el uso de las palabras o conceptos que utilizamos para que todos «hablemos el mismo idioma». El tiempo de carga de un sitio no se puede medir en un momento en concreto, sino que se ha de hacer en varios.

Cada uno de estos momentos tiene unas implicaciones distintas y requiere de optimizaciones muy distintas, por lo que «mi sitio tarda x.xx segundos en cargar» es una frase que debemos eliminar de nuestro discurso WPO.

Podríamos hacernos unas primeras preguntas:

¿Está pasando algo? ¿La navegación del sitio inicia correctamente? ¿Responde el servidor?
¿Es útil lo que tenemos delante? ¿Se ha iniciado la carga del sitio lo suficiente como para comenzar a interactuar?
¿Es usable el sitio? ¿Pueden los usuarios interactuar o está cargando todavía?
¿Funciona sin problemas? ¿Son las interacciones con el sitio correctas, sin tiempo de carga y veloces?

Para resumir estas preguntas podemos aplicarnos un punto de medición en cada uno, en lo que se refiere a la carga de la página:

Primera impresión
Carga de primeros contenidos
Carga de contenidos útiles
Tiempo para ser interactiva

Además de estos momentos que son los más básicos y que cada uno de ellos permite saber qué se debe mejorar en cada una de las partes de WordPress, podemos añadir los Core Web Vitals, que ayudan a encontrar puntos de dolor en la carga de un sitio.

Una de las razones por la que es importante la velocidad de carga de un sitio es la conversión. La conversión es un concepto muy variable, porque puede ser distinto en un blog, donde quizá la conversión es el tiempo que pasa un usuario y la cantidad de entradas que se leen, o la de un comercio electrónico donde el tiempo implicará más ventas.

Algunas métricas que se pueden tener en cuenta (entre muchas) pueden ser las siguientes:

Aumento de la tasa de rebote
Disminución de las conversiones relativas
Usar promedios o medias
Contenido de terceros

Cómo medir

Cuando vayamos a medir hemos de tener en cuenta que existen dos tipos de datos, los de laboratorio y los reales (RUM).

Los primeros datos son los que nos dan las herramientas. Estos datos son primordiales para poder solventar datos de base de los proyectos y que tienen más que ver con la parte de infraestructura y del software.

Los segundos son datos recogidos por sistemas, normalmente, externos tipo Google Analytics en los que se recuperan puntos de medida de los usuarios que navegan por el sitio y que, dependiendo de muchos factores, hay que analizar caso a caso. Aquí pueden influir cosas tan distintas como el dispositivo, el navegador, el tamaño de pantalla, y sobre todo la potencia del dispositivo y su conectividad a la red.

Teniendo esto en cuenta, cuando se lance un sitio WordPress hemos de definir los puntos de medición, la forma de hacerlo y qué tiempos son los que nos comprometemos a cumplir.

Por ejemplo, se pueden establecer 4 puntos como inicio:

Time to First Byte (TTFB): El tiempo que se tarda desde que se envía la solicitud hasta que se reciben los primeros datos desde el servidor.
DOMContentLoaded: Como momento en el que se carga el HTML y permite trabajar con ello, sin necesidad de esperar a los CSS o scripts.
First Contentful Paint (FCP): Momento en el que se cargan los primeros elementos del DOM (texto, imágenes o cualquier contenido).
Time to Interactive (TTI): Momento en el que el sitio es completamente interactivo y usable por el usuario.

Como cifras iniciales que se podrían tener en cuenta tenemos que el TTI debería estar por debajo de los 5 segundos y que los recursos críticos deberían estar por debajo de los 200 KB (comprimido y minimizado).