Contenidos
Aprenda cómo optimizar sus Core Web Vitals para lograr una mayor velocidad del sitio web, una mejor experiencia de usuario y clasificaciones SERP más altas.
Esta publicación fue patrocinada por DebugBear Las opiniones expresadas en este artículo son propias del patrocinador.
Un sitio web rápido proporciona una experiencia más agradable para los usuarios y puede generar tasas de conversión más altas. can lead to higher conversion rates
Pero Google también tiene en cuenta la velocidad del sitio web como parte de Core Web Vitals y la utiliza como factor de clasificación. ranking factor
Descubra cómo funciona la evaluación Core Web Vitals de Google y qué puede hacer para garantizar que su sitio web se cargue rápidamente y brinde una buena experiencia una vez cargado.
En esta guía:
- 1 ¿Cuáles son los elementos básicos de la Web?
- 2 ¿Qué es la evaluación de Core Web Vitals de Google?
- 3 Cómo acelerar la pintura con contenido más grande (LCP)
- 4 Cómo mejorar la interacción con la siguiente pintura (INP)
- 5 Cómo reducir el cambio de diseño acumulativo
- 6 Supervise la velocidad de la página y los elementos básicos de la web
¿Cuáles son los elementos básicos de la Web?
Los Core Web Vitals (CWV) de Google tienen como objetivo medir la calidad del sitio web y la experiencia del usuario.
Para ello, se desarrollaron varias métricas nuevas que se pueden recopilar en el navegador Chrome.
Tres de estas métricas forman Core Web Vitals:
- Pintura con contenido más grande.
- Interacción con la siguiente pintura.
- Cambio de diseño acumulativo.
Pintura con contenido más grande
La métrica de pintura con contenido más grande (LCP) mide la rapidez con la que aparece la parte más grande del contenido de la página después de que un visitante la abre. Largest Contentful Paint
Puede ver un ejemplo del LCP en esta tira de película de velocidad de página de renderizado de DebugBear, que muestra qué contenido sería visible para los usuarios en diferentes momentos. DebugBear
Aquí el contenido comienza a aparecer después de solo 1,27 segundos.
Sin embargo, Chrome identifica la imagen de la derecha como el elemento LCP, y esta imagen solo aparece 2,33 segundos después de la navegación.
El Largest Contentful Paint está estrechamente relacionado con otras dos métricas de Web Vitals que no forman parte de Core Web Vitals: Time to First Byte y First Contentful Paint.
Tiempo hasta el primer byte
El tiempo hasta el primer byte (TTFB) mide la rapidez con la que el servidor responde a la solicitud del documento HTML que se carga al inicio del proceso de carga de la página. Time to First Byte
Sin el documento HTML, el navegador no puede mostrar ningún contenido ni comenzar a cargar ningún otro recurso.
Primera pintura llena de contenido
First Contentful Paint (FCP) analiza qué tan pronto aparece cualquier contenido en la página. First Contentful Paint
El contenido aquí generalmente significa texto o una imagen.
Sin embargo, cuando la página alcanza este hito, es posible que la mayor parte del contenido aún no esté disponible para el visitante.
El FCP no puede realizarse hasta después del hito del TTFB A su vez, la pintura con contenido más grande siempre es mayor o igual que la primera pintura con contenido.
Eso significa que TTFB y FCP imponen límites inferiores al LCP y observar estas dos métricas puede ayudarle a comprender el comportamiento de carga de su sitio web.
Interacción con la siguiente pintura
La interacción con Next Paint (INP) mide qué tan receptivo es un sitio web a la entrada del usuario. Interaction to Next Paint
Generalmente analiza la interacción más lenta que tiene un usuario en una página web.
INP informa cuánto tiempo transcurrió entre dos marcas de tiempo durante una interacción de página:
- La entrada del usuario, por ejemplo, un clic o una pulsación de tecla.
- La próxima actualización visual (“pintura”) del sitio web (importa si el contenido cambia o no).
Por ejemplo, esta tira de película muestra que se hace clic en el botón «Ver detalles».
El clic se gestiona mediante el código JavaScript de la página y la ejecución de este código lleva algún tiempo. Mientras se procesa el clic, la interfaz de usuario del sitio web permanece congelada Una vez que se completa el procesamiento de la CPU, el navegador muestra el nuevo contenido.
Técnicamente, la interacción con Next Paint aún no es uno de los Core Web Vitals, pero Google ha anunciado que INP reemplazará la métrica anterior de retraso de la primera entrada en marzo de 2024. Google has announced
Cambio de diseño acumulativo
La métrica Cumulative Layout Shift (CLS) comprueba si el contenido de la página es visualmente estable después de su aparición. Cumulative Layout Shift
Una interfaz de usuario inestable desorienta a los usuarios y puede provocar interacciones no deseadas en la página.
Esta captura de pantalla muestra un ejemplo de un cambio de diseño que ocurre durante el proceso de carga de la página.
Al principio, la imagen en la parte superior derecha aún no es visible porque el navegador aún la está descargando. Una vez que aparece la imagen, el tamaño del elemento de imagen se actualiza. En este caso, el elemento se vuelve más grande y, por lo tanto, empuja hacia abajo el contenido que se encuentra debajo de él en la página.
CLS se denomina “acumulativo” porque se suma el impacto de los diferentes cambios.
Originalmente, esto abarcaba todo el tiempo que la página estuvo abierta, pero esto injustamente le dio a las aplicaciones de una sola página de larga duración una calificación baja. Google ahora ha cambiado a la definición CLS en ventana que sólo mira una ventana de tiempo de hasta cinco segundos. windowed CLS definition
¿Qué es la evaluación de Core Web Vitals de Google?
Google realiza una evaluación de Core Web Vitals en su sitio web y utiliza los resultados como señal de clasificación. ranking signal
Si su sitio web no cumple con los Core Web Vitals, recibirá una advertencia en varias herramientas, por ejemplo, la alerta «Core Web Vitals Assessment: Failed» en Page Speed Insights. Page Speed Insights
Los datos para la evaluación de Core Web Vitals provienen del Informe de experiencia del usuario de Chrome (CrUX), que recopila datos reales de los usuarios de Chrome. Chrome User Experience Report
Además de PageSpeed Insights, Google Search Console también verifica sus datos web vitales y explica qué URL no se consideran «buenas». Google Search Console
¿Qué hace que una evaluación de Core Web Vitals sea buena?
Google define umbrales de «Bueno», «Deficiente» y «Necesita mejorar» para cada métrica.
Para obtener el máximo beneficio de clasificación, su sitio web debe tener una calificación de «Bueno» en los tres Core Web Vitals. A medida que su sitio web empeora, esto afecta gradualmente su clasificación hasta alcanzar el umbral de «Pobre».
Cómo acelerar la pintura con contenido más grande (LCP)
Para mejorar su LCP, necesita que el contenido principal de su sitio web se cargue más rápido.
- Realice una prueba gratuita de velocidad del sitio web para comprender qué está causando que el contenido principal de su página web se retrase.
- Reciba y revise la información de la tira de película visual y las métricas de rendimiento de alto nivel para descubrir cuáles son sus próximos pasos.
- Utilice esos conocimientos para optimizar la velocidad de carga de su página.
Luego puede profundizar en la métrica específica haciendo clic en el título de la métrica «Pintura con contenido más grande» en el resultado de la prueba.
Esto le mostrará:
- Qué elemento de la página es responsable de la pintura con contenido más grande.
- Si el LCP es una imagen, cuál es la URL de la imagen y qué prioridad de solicitud utilizaron los navegadores.
- Si el LCP es una imagen, de qué otras solicitudes dependía el archivo de imagen.
Las cascadas de solicitudes muestran qué recursos se cargaron a través de la red y cuánto tiempo tardaron en cargarse. En este caso, la cascada de solicitud parcial que se centra en la imagen LCP muestra que la imagen depende de cargar primero un archivo JavaScript grande. Este es un problema común y debería intentar cargar imágenes LCP directamente desde el documento HTML. Request waterfalls
El resultado de la prueba DebugBear también ofrece muchas recomendaciones automatizadas y las clasifica según el impacto esperado. DebugBear test
Cómo mejorar la interacción con la siguiente pintura (INP)
Actualmente, solo el 64 % de los sitios web móviles ofrecen una buena experiencia INP, lo que la convierte en una métrica importante a optimizar. 64%
La métrica INP puede ser difícil de depurar ya que depende de la interacción del usuario que no se puede probar tan fácilmente.
Puede probar manualmente las interacciones de la página y medirlas utilizando el perfil de rendimiento de Chrome DevTools. Chrome DevTools performance profile
Esto funciona bien si sabes con qué elementos de la página interactúan normalmente los usuarios. DevTools también es muy útil una vez que haya identificado una interacción lenta, ya que las herramientas de desarrollo de Chrome le dirán exactamente en qué dedica tiempo el navegador durante esa interacción.
La herramienta INP Debugger también puede resultar útil, ya que simula automáticamente interacciones con diferentes elementos de la página. Todo lo que necesita hacer es ingresar la URL de un sitio web. INP Debugger tool
Sin embargo, el depurador INP no podrá identificar todas las interacciones, especialmente si son parte de un flujo de usuarios más largo. Aquí es donde resulta útil recopilar monitoreo de usuarios reales (RUM), ya que le permite enfocar sus optimizaciones exactamente en el lugar correcto. collecting real user monitoring (RUM) is useful
Con los datos de RUM puede ver exactamente con qué elementos de la página interactúan la mayoría de los usuarios y si están experimentando retrasos en la interacción.
También puedes ver un desglose del RON en sus diferentes componentes:
- Retraso de entrada.
- Tiempo de procesamiento.
- Retraso en la presentación.
El retardo de entrada mide cuánto tiempo después de la interacción del usuario el navegador comenzó a procesar la entrada del usuario. Un retraso de entrada alto indica que las tareas en segundo plano o los controladores de eventos anteriores están bloqueando la interacción del usuario.
El tiempo de procesamiento mide el tiempo real dedicado a manejar la entrada del usuario. Si esto es lento, sus desarrolladores deben observar qué código se ejecuta en respuesta a la interacción y cómo se puede optimizar ese código.
El retraso de presentación mide cuánto tiempo transcurrió entre el evento que se está manejando y la siguiente pintura. Este número puede ser alto si la representación de la página es compleja o si se ha puesto en cola otro procesamiento de la CPU mientras se manejaba la interacción.
Cómo reducir el cambio de diseño acumulativo
Al igual que INP, el cambio de diseño acumulativo puede ser difícil de solucionar, ya que suele ocurrir cuando el usuario se desplaza hacia abajo en la página o cuando aparece contenido adicional después de que el usuario hace clic en un elemento de la interfaz de usuario.
Si el cambio de diseño ocurre durante la carga inicial de la página, es fácil identificarlo por:
- Ejecutando una prueba de velocidad de página.
- Al hacer clic en el título de la métrica «Cambio de diseño acumulativo» para ver qué elementos de la página se han movido.
- Arreglando el elemento que está provocando el cambio.
Por ejemplo, aquí, se cargó contenido adicional que provocó que el diseño cambiara.
Cómo arreglar cambios de diseño
Para corregir los cambios de diseño, asegúrese de que haya marcadores de posición del tamaño adecuado si algún contenido solo aparece más adelante en el proceso de carga de la página.
También puedes trabajar para asegurarte de que el resto del contenido se cargue antes; si el contenido está listo tan pronto como la página comienza a renderizarse, entonces no hay cambio de diseño.
Si su puntaje CLS es difícil de replicar, puede usar el monitoreo de usuarios reales de DebugBear para ver qué está causando cambios en el diseño para sus usuarios reales. DebugBear real user monitoring
Además de observar distribuciones de alto nivel, también puede observar las experiencias de los usuarios individuales y lo que llevó a cambios de diseño para ellos.
Supervise la velocidad de la página y los elementos básicos de la web
Si tiene dificultades para aprobar la evaluación de Core Web Vitals, el monitoreo de DebugBear puede ayudarlo a identificar problemas en su sitio web y asegurarse de recibir alertas cuando haya un problema. DebugBear monitoring
Simplemente inicie una prueba gratuita e ingrese las URL de su sitio web Vea todas las métricas de velocidad de su página de un vistazo en el panel DebugBear también realiza un seguimiento de las puntuaciones de Lighthouse y de los datos de Google de usuarios reales que afectan las clasificaciones. start a free trial
Además de probar continuamente su sitio web en un entorno de laboratorio controlado, también puede instalar un fragmento de análisis en su sitio para realizar un seguimiento de las experiencias reales de los usuarios.
Además de la descripción general de alto nivel de Web Vitals, DebugBear RUM le permite desglosar las experiencias de los usuarios por velocidad de página, país o navegador web.
Tener informes de laboratorio detallados y datos reales de los usuarios le permite adelantarse a los datos de Google CrUX que afectan las clasificaciones y se informan con un retraso de 28 días. DebugBear proporciona información valiosa sobre sus Core Web Vitals y le ayuda a comunicarse con el resto de su equipo y la administración.
¿Listo para comenzar a optimizar su sitio web? DebugBear
Créditos de imagen
Imagen destacada: Imagen de DebugBear Usado con permiso.
Leer el articulo original en Search Engine Journal.
