5 formas de comenzar a optimizar el sitio web de su empresa para Core Web Vitals

Google ha retrasado el lanzamiento de Core Web Vitals de mayo a mediados de junio, retrasando la actualización completa en vivo hasta finales de agosto. El nuevo conjunto muy esperado de señales de clasificación se combinará con las señales de búsqueda actuales, creando la nueva experiencia de página. ¿Qué significa este nuevo desarrollo para su negocio?

Si ha estado trabajando diligentemente con su equipo de diseño web y especialistas en SEO para implementar cambios en su sitio web, no tiene nada de qué preocuparse. El retraso en la implementación solo significa que podría estar a la vanguardia. Si no ha comenzado a modificar su sitio, por otro lado, la demora solo significa que ahora tiene tiempo para cumplir con el nuevo conjunto de métricas.

¿Qué son los Core Web Vitals?

Core Web Vitals está configurado para cambiar la forma en que Google clasifica los sitios web. Cubre tres métricas principales, a saber:

1. Pintura con contenido más grande (LCP). Mide la rapidez con la que carga la página.
2. Retardo de primera entrada (FID). El FID trata sobre la interactividad o cuán atractivas son sus páginas.
3. Cambio de diseño acumulativo (CLS). Esta métrica mide qué tan estables son los elementos en su página a medida que los usuarios interactúan con ellos.

Por lo tanto, el nuevo conjunto de métricas se centrará en el tiempo de carga, la interactividad y la estabilidad de la página, brindándole un modelo de lo que usted y sus desarrolladores web necesitan para trabajar.

Y aquí hay cinco formas efectivas de hacerlo:

1. Optimice sus imágenes y videos

Las páginas de carga lenta pueden costarle a usted, clientes potenciales. Para muchos sitios, las imágenes son el elemento más grande a la vista, por lo que es mejor optimizarlas.

Una forma efectiva de hacer esto es escalar y comprimir todas las imágenes en su sitio web. Algunas herramientas de optimización de imágenes a utilizar son tinypng o ShortPixel. También puede convertir sus imágenes a formatos modernos más eficientes, como .png, y asegurarse de que sean imágenes receptivas que se vean perfectas tanto en dispositivos móviles como de escritorio.

Dibuje una distinción entre "optimización" y "reducción de tamaño". Puede intentar reducir el tamaño de sus imágenes en un esfuerzo por hacer que se carguen más rápido. Pero recuerde que el objetivo principal de Core Web Vitals es brindar una mejor experiencia a los usuarios. Sus imágenes (o videos) pueden cargarse más rápido, pero es posible que los visitantes de su sitio web no los encuentren útiles si están borrosos o son de baja calidad.

2. Imágenes de carga diferida y secuencias de comandos de terceros

La carga diferida es otra forma de hacer que las imágenes de su sitio web respondan mejor y se carguen más rápido. En este método, las imágenes se cargan a medida que el usuario se desplaza a esa área de la página. Si están en la mitad superior de la página, todas las imágenes que se supone que debe mirar un usuario aparecerán primero. A medida que se desplazan hacia abajo, seguirán las imágenes en esas áreas de la página.

La carga diferida no solo asigna el ancho de banda correctamente, sino que también es útil para sitios web que tienen muchas imágenes.

Una forma de cargar fácilmente una imagen de forma diferida es a través de HTML. Solo necesita seguir este marcado:

<img src=”nombre de la imagen.png” loading=”perezoso” alt=”imagen1”/>

<iframe src=”content1.html” loading='lazy”></iframe>

Aunque el proceso puede ser tedioso cuando tiene muchas imágenes en ciertas páginas, la carga diferida puede ser bastante simple.

3. Asegúrese de que todos los elementos de su página no se muevan fuera de lugar

Google mide CLS a través de un observador de rendimiento para detectar cambios de diseño. Cuando un elemento cambia o el diseño cambia, el observador de rendimiento invoca una función de devolución de llamada que se suma a la puntuación de cambio de diseño existente.

Una herramienta que lo ayudará a ver la estabilidad de su sitio web o depurar el cambio de diseño es la opción de regiones de cambio de diseño en DevTools de Chrome. Esta función resalta los elementos en movimiento a medida que se mueven. No te está diciendo por qué está cambiando, tienes que averiguarlo por tu cuenta. Lo que hace es mostrarte los elementos que están afectando el cambio.

Sus imágenes y elementos de video deben venir con atributos de tamaño de ancho y alto. También puedes usar los cuadros de relación de aspecto CSS para reservar el espacio que necesita la imagen o el elemento. De esta forma, la página puede asignar el espacio correcto para el archivo sin cambiar todos los elementos de la página a medida que se carga el archivo.

Los cambios de diseño solo cuentan cuando son visibles para el usuario. Entonces, si se produce un cambio debajo de la página pero el usuario aún tiene que desplazarse hacia abajo hasta esa área, entonces no contará para CLS.

4. Repare sus patrones de UX para escritorio y dispositivos móviles

Muchos cambios de diseño son el resultado de malos patrones de UX. Un ejemplo de eso son las ventanas emergentes en los sitios web o los banners que aparecen en la parte superior de la página para hacer un anuncio. Cuando estos elementos hacen eso, tienden a empujar todo lo demás hacia abajo en la página.

Asegúrese de reservar suficiente espacio para el contenido dinámico . Estos son contenidos que aparecerán posteriormente, como promociones o anuncios. Un consejo es evitar insertar contenido nuevo encima de un contenido existente, especialmente si no está ajustando el contenido para toda la página.

5. Mejore su configuración de monitoreo de usuario real (RUM)

Real User Monitoring es el proceso de capturar y analizar los movimientos de cada usuario de un sitio web o aplicación. A menudo se denomina métricas de usuarios reales o supervisión de la experiencia del usuario final. Puede hacerlo comprobando los datos de rendimiento a nivel de página.

Google Search Console (GSC) es una herramienta útil que le indicará el rendimiento de las páginas en función de grupos de URL o agrupaciones de URL que tienen estructuras HTML similares.

Supervisar el RUM también garantizará que la primera impresión de un usuario sobre la capacidad de respuesta y la interactividad de su sitio sea positiva.

Consejo adicional:

Otro factor que puede afectar el rendimiento de su CWV es el tiempo de respuesta del servidor. En general, un tiempo de respuesta del servidor más rápido mejora cada métrica de carga de página.

Lo ideal es que el navegador reciba rápidamente el contenido del servidor, de esa manera, también aparecerá en pantalla y listo para ser visto por el usuario en un tiempo récord.

¿Cómo puede saber si tiene un tiempo de respuesta del servidor lento? Usa herramientas como WebPage Test y Lighthouse.

Lighthouse en particular tiene un elemento de auditoría de página llamado Reducir el tiempo de respuesta inicial del servidor. Si ve esto en su informe de auditoría, significa que debe dedicar tiempo a investigar el problema con sus desarrolladores web.

Mejor rendimiento del sitio web, mejor experiencia de usuario: mejor clasificación

Los Core Web Vitals están destinados a ayudar a los usuarios a disfrutar de su experiencia en línea. Con su actualización, Google pretende priorizar la velocidad del sitio y la experiencia del usuario. Pero no existe una fórmula única para la optimización porque dependerá del rendimiento actual de su sitio web, sus objetivos y la industria en la que se encuentre.

En última instancia, estas actualizaciones aseguran que la web esté llena de sitios web relevantes y de calidad. Para aplicar las mejores prácticas a su sitio web para asegurarse de que está brindando los mejores servicios y experiencia a sus clientes.