Cómo mejorar la puntuación Web Vitals en una página web

Por G. Lara & M. Soutto

Cómo mejorar la puntuación Web Vitals en una página web

En 2021 Google va a medir la puntuación de Web Vitals de las páginas web. Esta puntuación va a ser importante para el posicionamiento en buscadores. En este artículo vamos a revisar algunos puntos de mejora habituales que se pueden optimizar para mejorar las Web Vitals de una página web.

Ahora es el momento para mejorar Web Vitals de tu página web.

Puedes leer más sobre Web Vitals en nuestro blog:

• Las métricas vitales para medir la experiencia de usuario en una página web
• 3 formas de medir Web Vitals en tu página web

Como cada página web se compone de diferentes elementos, optimizarla es un trabajo cuidadoso y a medida. Lo primero será medir, lo segundo que tendremos que decidir es qué actuaciones de optimización emprender para que tenga el máximo impacto en todas las páginas web que componen el sitio web. Aunque Web Vitals cubre muchos tests, nos centraremos en las puntuaciones de las Core Web Vitals o las Métricas Vitales Principales.

Para mejorar web vitals en una página web

Estos son algunos de nuestros consejos para conseguir una mejor puntuación en Core Web Vitals de Google:

Optimiza el CSS de tu página web

Los archivos CSS son recursos que bloquean la representación de la página web, es decir, deben cargarse y procesarse antes de que el navegador muestre la página. Las páginas web que contienen estilos innecesariamente grandes tardan más en procesarse. Así que optimizar los archivos CSS es una buena idea para mejorar Web Vitals de una página web.

Lo primero que debemos hacer es eliminar todos los estilos CSS que no se estén usando en la página web. ¿Para qué cargar un recurso que no se utiliza? Eliminar las sentencias CSS sobrantes mejorará la puntuación Web Vitals de la página web.

En concreto se conseguirá una mejora en la puntuación de carga de la página dentro de las Core Web Vitals y si se hace bien puede tener un impacto positivo en todas las páginas del sitio web.

Aligerar la carga de la página web ayudará a mejorar web vitals.

Optimiza las librerías en JavaScript de tu página web

Hoy en día se usan muchas librerías de terceros en las páginas web que no se crean a medida. Una librería de JavaScript de terceros generalmente se refiere a scripts (secuencias de comandos) que se cargan en un sitio web que no han sido escritos por los desarrolladores de la página web y se pueden cargar desde servidores de terceros.

Lo ideal es prescindir lo máximo posible de este tipo de librerías, que al igual que hemos visto con el CSS, suele cargar elementos que la página web no utiliza. La tendencia actual es dejar de usar librerías de JavaScript complejos, como por ejemplo jQuery para la creación de páginas web. Para mejorar Web Vitals lo mejor es crear las funciones de JavaScript que necesitemos a medida y usando lenguaje JavaScript puro para así poder prescindir de pesadas librerías sin perder funcionalidad en la página web.

A veces no es posible prescincir de sentencias de JavaScript de terceros, por ejemplo cuando queremos usar botones para compartir en redes sociales, scripts de análisis y métricas o reproductores de video incrustados en la página web. En estos casos si se quiere seguir usando estos scripts es necesario cargarlos de manera adecuada para que no bloqueen la carga de la página.

Optimiza las imágenes de la página web

Aquí volvemos al mismo principio: no cargar más de lo que vamos a utilizar. Si una imagen se va a mostrar reducida en la pantalla de un teléfono móvil, no tiene sentido hacer que el navegador del móvil descargue una imagen grande para luego reducirla en la pantalla.

Si la página web se ha programado siguiendo las directrices de Web móvil Mobile First se cargarán imágenes del tamaño adecuado para el móvil y para los ordenadores de pantalla grande. Hay que recordar que las mediciones de Web Vitals se realizan con dos puntuaciones diferentes: para móvil y para ordenador. Optimizar el tamaño de las imágenes tendrá mayor impacto en mejorar Web Vitals para móvil.

Otro punto importante es elegir el formato adecuado para el archivo de imagen (jpg, png, gif, svg, webp) y realizar una compresión adecuada de las imágenes de tu página web. Hay veces que una compresión correcta puede reducir el tamaño de la imagen en hasta un 40% y la diferencia no resultar visible para el ojo humano.

Las imágenes son una parte importante de las páginas web. Su tamaño, compresión y su manera de cargarse en el navegador pueden suponer una gran mejora en la puntuación Web Vitals y en la experiencia de usuario.

Captura de pantalla del histograma de carga de una página web. Para optimizar hay que medir.

Activa la compresión y el protocolo HTTP/2 del lado del servidor

Compresión gzip

Todos los navegadores modernos admiten y negocian automáticamente la compresión gzip para todas las solicitudes HTTP. Esto significa que el servidor transmite los recursos que forman la página web de manera comprimida para que sea más rápido. Habilitar la compresión gzip puede reducir el tamaño de la respuesta transferida hasta en un 90%, lo que puede reducir significativamente la cantidad de tiempo para descargar el recurso, reducir el coste de datos para el cliente y mejorar el tiempo de procesamiento de las páginas por primera vez.

Protocolo HTTP/2

La finalidad de HTTP/2 es reducir la latencia permitiendo una multiplexación completa de solicitudes y respuestas, para así minimizar la sobrecarga de protocolo mediante una compresión eficiente de campos de encabezados de HTTP y agregar compatibilidad con la priorización de solicitudes y push de servidor.

HTTP 2.0 no modifica la semántica de aplicación de HTTP. Todos los conceptos básicos: métodos HTTP, códigos de estado, URI, etc. se mantienen sin cambios. Las mejoras que introduce HTTP 2.0 son el uso de una única conexión y la compresión de cabeceras. Esto se traduce en una mayor velocidad de descarga de los recursos que forman una página web y en una mejor experiencia para el usuario y como consecuencia una mejor puntuación Web Vitals.

Estos dos cambios a nivel de servidor web también se convierten en una mejora automática en la puntuación Web Vitals de una página web.

Conclusiones sobre cómo mejorar Web Vitals

Mejorar la puntuación Web Vitals en una página web resultará en una mejora de la experiencia de usuario. Cuanto mejor experiencia tenga el usuario en una página web mayor nivel de confianza le otorga a la página web, esto hace más probable que el usuario vuelva a la página web o realice una compra en ella.

Cada página web se compone de elementos diferentes de programación. Para mejorar Web Vitals en una página web es importante realizar una buena medición y análisis para encontrar las principales áreas de mejora. Una vez identificadas las partes de la página web que queremos cambiar es importante volver a realizar mediciones para confirmar la mejora.

Es importante recordar que Google va a incorporar la puntuación de Core Web Vitals a su algoritmo de posicionamiento en mayo de 2021. Es mejor no esperar ya que cualquier cambio en una página web puede llevar tiempo en verse reflejado en Google.

Usa profesionales para obtener los mejores resultados, puedes contactarnos, estaremos encantados en atenderte y ayudarte a conseguir los mejores resultados para tu negocio online.

Fuentes

• Web Vitals https://web.dev/vitals/
• Hojas de Estilo en Cascada https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada
• JavaScript https://es.wikipedia.org/wiki/JavaScript
• Http 2.0 https://es.wikipedia.org/wiki/HTTP/2