Publicado el 1 Jun, 2021 7 minutos de lectura
Al igual que tú, Google quiere ofrecer la mejor experiencia a sus usuarios. Y para determinar los sitios web que ofrecen una experiencia más valiosa, actualiza constantemente su algoritmo. Aunque aspectos como ofrecer un contenido relevante y haber hecho un buen trabajo con las palabras clave, son importantes para el posicionamiento de una página web, Google también tiene en cuenta el rendimiento técnico de un sitio web: la velocidad de carga de un sitio, el tiempo que demora en ser interactivo, la optimización para dispositivos móviles y la carga del sitemap en herramientas como Search Console.
En noviembre de 2020 Google anunció, en la cuenta de Twitter de Google Search Central, que, desde mayo de 2021, los Core Web Vitals tomarían relevancia máxima y se añadirían a estos indicadores de la experiencia de usuario y serían muy importantes para el posicionamiento de un sitio web en el ránking de resultados de una búsqueda. Mayo ya ha llegado y, por tanto, este es el mes clave en el que estos indicadores empiezan a ser más relevantes para aparecer en los resultados de Google.
En este artículo, repasamos exactamente qué son los Core Web Vitals, cómo medirlos y, por último, qué qué puedes hacer en tus canales digitales para mejorar las métricas.
¿Qué son los Core Web Vitals?
Los Core Web Vitals son métricas que indican el tiempo que demora un usuario en poder interactuar con un sitio web, concretamente, se trata de la velocidad, la capacidad de respuesta y la estabilidad visual de una página. Estas métricas son uno de los factores que evalúa Google para medir la experiencia de usuario en un sitio y, a partir de mayo de 2021, serán determinantes para el posicionamiento en Google, lo cual impacta directamente en las estrategias de SEO.
En concreto, los Core Web Vitals son tres, LCP, FID y CLS:
- LCP: siglas de Largest Contentful Paint, es el tiempo que demora una página en cargar y renderizar el contenido principal y más grande de la ventana gráfica, lo cual determinará la velocidad de carga percibida por el usuario. Se recomienda que el LCP no sea superior a 2,5 segundos.
- FID: siglas de First Input Delay, es el tiempo que demora una página en ser interactiva y cuanto más rápido se produzca esto, mejor será la experiencia de usuario. En este caso, el tiempo ideal es de menos de 100 milisegundos.
- CLS: siglas de Cumulative Layout Shift, corresponde a la suma del tiempo en el que se pueden producir cambios visuales inesperados en el diseño del sitio, y se espera que sea menor a 0,1.
Gráficamente, estos serían los datos numéricos que se esperan de los Core Web Vitals, los valores que indican que necesitas mejoras y cuando deberías preocuparte:
Así, el LCP, el FID y el CLS pasan a formar parte de los indicadores de experiencia de usuario junto a la optimización para móviles, la navegación segura, el protocolo HTTPS y las directrices de anuncios intersticiales intrusivos.
¿Cómo medir los Core Web Vitals?
Casi más importante que saber qué son los Core Web Vitals, es saber cómo medirlos para averiguar si nuestro sitio está en los rangos adecuados, así como las mejoras que podemos realizar para ajustarnos más a los valores recomendados.
Google habla de 6 herramientas y extensiones que pueden ayudarnos a medir los Core Web Vitals:
De todas ellas, comentaremos Search Console y la extensión Lighthouse por ser con las que tenemos más experiencia en Modyo, pero el resto de herramientas ofrecen detalles más específicos para las personas que deban trabajar en las mejoras que requieren los sitios en relación a la performance.
Search Console
El año pasado se agregó a Search Console una sección específica donde puedes revisar los Core Web Vitals de un sitio y obtener detalles de la performance de todas las páginas de un sitio, y saber a qué grupos debemos prestar atención.
Lighthouse
Esta herramienta se despliega al inspeccionar una página y nos permite auditarla a nivel de Performance, Accesibilidad, Mejores Prácticas y SEO. En el reporte de Performance se verán reflejadas las métricas de los Core Web Vitals y se generarán las advertencias y alertas al respecto de éstos. Debemos prestar atención a los números rojos y naranjos si queremos que estos indicadores no hagan empeorar la experiencia de usuario de nuestro sitio.
En una segunda parte de este contenido, detallaremos algunas formas de mejorar los Core Web Vitals para que el posicionamiento de tu web en los buscadores, es decir, el SEO, no se vea afectado por este cambio anunciado por Google.
¿Cómo mejoramos los Core Web Vitals usando una Plataforma de Experiencia Digital (DXP)?
En Modyo sabemos lo importantes que son los Core Web Vitals para el posicionamiento de un sitio web en los buscadores y aplicamos varias prácticas para que el SEO no se vea afectado por este cambio anunciado por Google. ¿Cómo? Con las siguientes buenas prácticas:
Optimización de la carga de la página
Cargar rápidamente las fuentes por defecto
Con la librería de JavaScript Web Font Loader, cargamos de forma asíncrona las tipografías. Esto mejora los Core Web Vitals porque, al momento de la carga de la página, se usan las fuentes por defecto y se evita la demora en la primera carga, mejorando así el FID (First Input Delay), para luego hacer un intercambio con la fuente descargada.
Cargar imágenes de forma asíncrona
La carga de imágenes se realiza de forma asíncrona con la librería recomendada por Google, lazySizes, que carga los recursos a medida que se necesitan en lugar de hacerlo por adelantado. Esto libera recursos durante la carga inicial de la página y evita cargar elementos que nunca se van a requerir.
Renderizar el contenido en el lado del servidor
Al usar lenguaje de programación Liquid, la renderización de los contenidos cargados en Modyo se produce a nivel de servidor y no a nivel de browser, lo cual mejora la performance e impacta positivamente en el SEO del sitio.
Mejores prácticas basadas en la plataforma
Haz que tus páginas sean accesibles
Hacemos sitios que cumplen los principios de accesibilidad del World Wide Web Consortium (W3C), la principal organización internacional que genera recomendaciones y estándares que aseguran el crecimiento de la World Wide Web a largo plazo.
Utilizar formatos de imagen modernos
Utilizamos formatos de última generación para las imágenes como JPEG 2000, JPEG XR y WebP, además de optimizarlas y cargarlas siempre en el tamaño que serán utilizadas.
Evitar la carga de bibliotecas innecesarias
Evitamos hacer llamados a librerías de JavaScript que no se estén utilizando en las páginas del sitio mediante la creación de layouts, hojas de JavaScript y hojas de estilo CSS que evitan cargar todo el código en todo el sitio. Esto permite optimizar y priorizar algunas hojas.
Evitar los pop-ups y los elementos que cambian el diseño
No solemos promover el uso de pop-ups ni de elementos externos que alteren la experiencia del usuario y afecten el CLS (Cumulative Layout Shift).
Optimización de la arquitectura y la entrega
Utilizar aplicaciones web progresivas
Desarrollamos Progressive Web Applications (PWAs), es decir, que cuando ya has visitado un sitio desde tu teléfono móvil, puedes guardarlo y se comporta como una aplicación nativa con un icono propio. Además, puedes instalar la aplicación en tu escritorio de la computadora o en tu móvil como una app y aumentar la velocidad de navegación al estar el sitio almacenado en la memoria caché del dispositivo, así como utilizar algunas APIs nativas del teléfono para verificar si tienes señal o no.
Elige cuándo cargar elementos de forma asíncrona
Trabajamos con Micro Frontends que se cargan asíncronamente una vez la página se ha cargado. Del mismo modo, podemos hacer que la carga sea síncrona cuando los widgets tienen poco peso, mejorando así el CLS (Cumulative Layout Shift), o cuando su carga asíncrona pudiera afectar a la visualización del sitio.
Almacene sus páginas en caché
Implementamos caché, una herramienta que permite reducir el número de peticiones que llegan a los servidores de aplicaciones, mejorando el rendimiento y reduciendo los tiempos de respuesta.
Utilice HTTPS, no HTTP
Protegemos los sitios con el protocolo HTTPS (Hypertext Transfer Protocol Secure), dado que Google solo indexa páginas que utilicen este protocolo de comunicación argumentando que protege la integridad y la confidencialidad de los datos de los usuarios entre sus computadores y el sitio web.
Resumen
En resumen, ahora es más importante que nunca que los sitios tengan en cuenta los indicadores de la experiencia del usuario, porque estos indicadores establecen el nuevo estándar para lo que Google y otros motores de búsqueda mostrarán finalmente en la página uno de los resultados de búsqueda de los usuarios. Hay que prestar atención a todos y cada uno de los aspectos del performance de tu sitio que ayuden a reducir los tiempos de carga, permitan a los usuarios interactuar rápidamente y evitan que se desplace el diseño de la página. En definitiva, ahora se presta más atención a los elementos fundamentales de lo que constituye una buena experiencia de usuario, y todos debemos esforzarnos por cumplir esta nueva norma.
Si esto es algo que te interesa explorar más a fondo, tenemos una plataforma dedicada a resolver retos como este, y mucho más. Si quieres ponerte en contacto con nosotros directamente, estaremos encantados de conocer mejor tus ideas y el tipo de experiencias que quieres ofrecer a tus usuarios.
Photo de Gustavo Campos en Unsplash.
