4 nuevas técnicas para acelerar su sitio y arreglar Core Web Vitals

Esta publicación fue patrocinada por Debugbear. Las opiniones expresadas en este artículo son propias del patrocinador.

¿Quieres hacer que tu sitio web sea rápido?

Afortunadamente, existen muchas técnicas y guías para ayudarlo a acelerar su sitio web.

De hecho, solo en el último año, se han lanzado varias características nuevas del navegador que ofrecen:

• Nuevas formas de optimizar su sitio web.
• Nuevas formas de identificar causas de rendimiento lento.

Todo dentro de tu navegador.

Por lo tanto, este artículo analiza estas nuevas funciones de SEO del navegador y cómo puede usarlas para aprobar la evaluación de vital web de Google.

Por qué el rendimiento del sitio web es clave para la experiencia del usuario y el SEO

Tener un sitio web rápido hará que sus usuarios sean más felices y aumentará las tasas de conversión.

Pero el rendimiento también es un factor de clasificación de Google.

Google ha definido tres métricas de experiencia del usuario, llamadas Core Web Vitals:

• Pintura contenta más grande: ¿Qué tan rápido aparece el contenido de la página?
• CUMULATIVO DE LA ELEMA CUMULATIVO: ¿Se mueve el contenido después de la carga?
• Interacción a la siguiente pintura: ¿Qué tan receptiva es la página para la entrada del usuario?

Para cada una de estas métricas, hay un umbral máximo que no debe excederse para pasar la evaluación de vitales de la Web.

1. Agregue la navegación instantánea con “reglas de especulación”

Nuevas definiciones clave:

Cuando los sitios web tardan en cargar, generalmente se debe a que varios recursos deben cargarse desde el servidor del sitio web. Pero, ¿qué pasaría si hubiera una manera de lograr navegaciones instantáneas, donde los visitantes no tienen que esperar?

Este año, Chrome lanzó una nueva característica llamada Reglas de especulación, que puede lograr exactamente eso. Después de cargar la página inicial en un sitio web, otras páginas se pueden precargar en segundo plano. Luego, cuando el visitante hace clic en un enlace, la nueva página aparece instantáneamente.

Lo mejor de todo es que esta característica es fácil de implementar simplemente agregando un Etiqueta al sitio web. Entonces puedes:

• Páginas completas de rehacer automáticamente que es probable que el usuario visite a continuación
• Contenido de la página de precarga cuando un usuario se cierne sobre un enlace
• Precarga parcialmente una página, para equilibrar el consumo de recursos y la velocidad de navegación

La página siguiente se cargará mucho más rápidamente, lo que dará como resultado una gran experiencia de usuario y un puntaje de pintura contento más grande.

2. Optimizar la interacción para la siguiente pintura con la nueva API de marcos de animación larga

Nueva definición clave:

La interacción a la siguiente pintura (INP) se convirtió en una métrica central de vitalidad en marzo de 2024. Las interacciones lentas a menudo son causadas por el código JavaScript que se ejecuta en la página. Sin embargo, a menudo puede ser difícil identificar qué interacciones son lentas y qué scripts están causando retrasos.

Es por eso que Google agregó la larga API de marcos de animación a Chrome. Puede atribuir retrasos a scripts específicos que se ejecutan en su sitio web, diciéndole lo que necesita solucionar para mejorar su puntaje INP.

Usar la API directamente es un poco complicado, pero puede usar la biblioteca Web-Vitals.js de Google o una herramienta comercial como Debugbear para recopilar los datos.

Con la larga función de marcos de animación, puedes averiguar:

• Qué scripts específicos están ralentizando su sitio web
• Por qué el código se está ejecutando (por ejemplo, en respuesta a una interacción del usuario o debido a una tarea de fondo que se está ejecutando en la página)
• Cómo se gasta el tiempo de procesamiento (por ejemplo, ejecutar código o actualizar el diseño de la página)

3. Ver Core Web Vitals Metrics en la nueva pestaña De rendimiento de DevTools

Nueva definición clave:

Chrome Devtools ha sido durante mucho tiempo una gran herramienta para un análisis de rendimiento técnico profundo. Sin embargo, no siempre proporcionó una buena descripción de alto nivel de sus datos centrales de Web Vitals.

Eso ha cambiado ahora con la nueva pestaña de rendimiento de DevTools. Ahora puedes ver fácilmente:

• Una descripción general de los vitales web principales en la página actual
• Una lista de interacciones de página y cambios de diseño
• Datos de usuario reales del informe de la experiencia del usuario de Chrome (Crux) de Google

La lista de interacciones del usuario es especialmente útil para depurar puntajes de INP pobres, ya que ya no necesita registrar un perfil de rendimiento completo para verificar qué tan rápido es una interacción.

4. Analice los componentes de pintura contentful más grandes

Hay muchos factores que afectan su puntaje de pintura contento más grande, ya sea el tiempo de respuesta del servidor, el tiempo dedicado a descargar una imagen o esperando que aparezca el contenido.

Google ha publicado un nuevo artículo que explica cuál de estos componentes tiene el mayor impacto basado en datos reales de los usuarios.

Curiosamente, si bien se ha puesto mucho énfasis en la optimización de imágenes para que se carguen más rápido, Google descubrió que cargar una imagen LCP en realidad solo representa aproximadamente el 10% del valor métrico LCP general. Estamos buscando sitios web con una calificación promedio de LCP aquí, pero este hallazgo es consistente con otras categorías de sitios web.

En teoría, la imagen de la página principal se puede cargar inmediatamente después de que el servidor haya proporcionado el documento HTML al navegador. Pero resulta que a menudo hay un gran retraso hasta que la imagen realmente comienza a cargarse, como se muestra en el componente “Retraso de carga de imagen” que representa el 27% de la puntuación general de LCP en la tabla de arriba.

Estos hallazgos no se pueden generalizar y aplicar a ningún sitio web específico. En su lugar, puede ejecutar una prueba de faro utilizando una herramienta como PageSpeed ​​Insights. El desglose se puede encontrar bajo la auditoría de elementos de pintura contentful más grande.

También puede usar la prueba de velocidad del sitio web gratuita de DebugBear para ver el desglose del componente LCP y obtener más información sobre lo que puede hacer para optimizar la métrica.

Haga clic en la métrica de pintura contenta más grande para ver datos de depuración adicionales como la URL de la imagen, la duración de la carga y la prioridad de solicitud.

Cómo aprobar la evaluación de vital web de la web de Google

En este artículo, hemos analizado algunas de las nuevas herramientas de diagnóstico que puede usar para investigar los problemas de velocidad de página en su sitio web, así como nuevas tecnologías de navegador que pueden ayudarlo a lograr un sitio web más rápido.

Para realizar un seguimiento de sus optimizaciones y mantenerse al tanto de las métricas centrales de Web Vitals, puede utilizar una herramienta de monitoreo de rendimiento del sitio web como DebugBear. Identifique posibles optimizaciones en su propio sitio web y compare su sitio con la competencia para ofrecer una experiencia mejor en su clase.

Las herramientas de monitoreo lo ayudan a detectar tendencias a largo plazo, verificar que los cambios que haya tenido tienen un impacto positivo y se asegure de saber rápidamente cuándo se introducen nuevos problemas.

Debugbear ofrece tres tipos de datos de velocidad de página para ayudarlo a comprender y optimizar la velocidad de su página:

Comience una prueba gratuita para ver qué puede hacer para ofrecer las mejores experiencias en su sitio web.

Este artículo ha sido patrocinado por Debugbear, y las opiniones presentadas en este documento representan la perspectiva del patrocinador.

¿Listo para comenzar a optimizar su sitio web? Regístrese para Debugbear y obtenga los datos que necesita para ofrecer excelentes experiencias de usuario.

Créditos de imagen

Imagen destacada: Imagen de Debugbear. Utilizado con permiso.