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

¿Quiere que su sitio web sea rápido?

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

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

• Nuevas formas de optimizar tu sitio web.
• Nuevas formas de identificar las causas del 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 Core Web Vitals 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 estén más felices y aumentará las tasas de conversión.

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

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

• Pintura con contenido más grande: ¿qué tan rápido aparece el contenido de la página?
• Cambio de diseño acumulativo: ¿el contenido se mueve después de cargarlo?
• Interacción con Next Paint: ¿qué tan receptiva es la página a la entrada del usuario?

Para cada una de estas métricas existe un umbral máximo que no se debe exceder para aprobar la evaluación de Web Vitals.

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

Nuevas definiciones clave:

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

Este año Chrome lanzó una nueva función llamada reglas de especulación, que puede lograr precisamente eso. Después de cargar la página inicial de un sitio web, se pueden precargar otras páginas 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 <script type="speculationrules"> etiqueta al sitio web. Entonces puedes:

• Pre-renderiza automáticamente páginas enteras que el usuario probablemente visitará a continuación
• Precargar el contenido de la página cuando un usuario pasa el cursor sobre un enlace
• Precargar parcialmente una página para equilibrar el consumo de recursos y la velocidad de navegación.

La siguiente página se cargará mucho más rápido, lo que dará como resultado una excelente experiencia de usuario y una puntuación baja en Largest Contentful Paint.

2. Optimice la interacción con la siguiente pintura con la nueva API de cuadros de animación largos

Nueva definición clave:

La interacción con Next Paint (INP) se convirtió en una métrica principal de Web Vitals en marzo de 2024. Las interacciones lentas a menudo se deben al código JavaScript que se ejecuta en la página. Sin embargo, a menudo puede resultar difícil identificar qué interacciones son lentas y qué guiones están provocando retrasos.

Es por eso que Google agregó la API Long Animation Frames a Chrome. Puede atribuir retrasos en la representación a scripts específicos que se ejecutan en su sitio web, indicándole lo que necesita corregir para mejorar su puntuación INP.

Usar la API directamente es un poco complicado, pero puedes usar la biblioteca web-vitals.js de Google o una herramienta comercial como DebugBear para recopilar los datos.

Con la función Cuadros de animación largos podrás descubrir:

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

3. Vea las métricas de Core Web Vitals en la nueva pestaña Rendimiento de DevTools

Nueva definición clave:

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

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

• Una descripción general de Core Web Vitals en la página actual
• Una lista de interacciones de páginas y cambios de diseño.
• Datos de usuario reales del informe Chrome User Experience (CrUX) de Google

La lista de interacciones del usuario es especialmente útil para depurar puntuaciones INP deficientes, ya que ya no es necesario registrar un perfil de rendimiento completo para comprobar qué tan rápida es una interacción.

4. Analice los componentes de pintura con mayor contenido

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

Google ha publicado ahora un nuevo artículo que explica cuáles de estos componentes tienen el mayor impacto según datos reales del usuario.

Curiosamente, si bien se ha puesto mucho énfasis en optimizar las imágenes para que se carguen más rápido, Google descubrió que cargar una imagen LCP en realidad solo representa alrededor del 10% del valor métrico general de LCP. Aquí estamos analizando sitios web con una calificación LCP promedio, 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 lo muestra el componente “Retraso de carga de imagen”, que representa el 27% de la puntuación LCP general en el cuadro anterior.

Estos hallazgos no se pueden generalizar ni aplicar a ningún sitio web específico. En su lugar, puedes ejecutar una prueba de Lighthouse utilizando una herramienta como PageSpeed ​​Insights. El desglose se puede encontrar en la auditoría del elemento de pintura con contenido más grande.

También puede utilizar la prueba de velocidad gratuita del sitio web de DebugBear para ver el desglose de los componentes 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 con contenido 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 la solicitud.

Cómo aprobar la evaluación de Core Web Vitals de Google

En este artículo, analizamos algunas de las nuevas herramientas de diagnóstico que puede utilizar para investigar problemas de velocidad de la 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 estar al tanto de sus métricas de Core Web Vitals, puede utilizar una herramienta de monitoreo del rendimiento del sitio web como DebugBear. Identifique posibles optimizaciones en su propio sitio web y compare su sitio con el de la competencia para ofrecer la mejor experiencia de su clase.

Las herramientas de monitoreo lo ayudan a detectar tendencias a largo plazo, verificar que los cambios que ha realizado tengan un impacto positivo y asegurarse de descubrir rápidamente cuando se introducen nuevos problemas.

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

Inicie 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 aquí presentadas representan la perspectiva del patrocinador.

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

Créditos de imagen

Imagen destacada: Imagen de DebugBear. Usado con permiso.