Core Web Vitals son las métricas de velocidad que forman parte de las señales de Page Experience de Google que se utilizan para medir la experiencia del usuario. Las métricas miden la carga visual con la pintura con contenido más grande (LCP), estabilidad visual con cambio de diseño acumulativo (CLS) e interactividad con el retardo de la primera entrada (DEFENSOR).

La experiencia de la página y las métricas de Core Web Vital incluidas se utilizarán oficialmente para clasificar las páginas en mayo de 2021.

Fuente: Google

La forma más sencilla de ver las métricas de su sitio es con el Informe de Core Web Vitals en Google Search Console. Con el informe, puede ver fácilmente si sus páginas están clasificadas como “URL deficientes”, “URL que necesitan mejoras” o “URL buenas”.

Dentro del informe, puede encontrar información más detallada sobre los problemas particulares y una lista de las páginas afectadas.

Hecho 1: Las métricas se dividen entre computadoras de escritorio y dispositivos móviles, pero solo se utilizarán señales de dispositivos móviles para clasificar las páginas. Google se está cambiando a Indexación 100% móvil primero en marzo, por lo que tiene sentido utilizar las señales de velocidad móviles, ya que las páginas indexadas también se basarán en las versiones móviles.

Hecho 2: Los datos provienen del Informe de experiencia del usuario de Chrome (CrUX), que registra los datos de los usuarios de Chrome que han optado por participar. Las métricas se evaluarán en el percentil 75 de los usuarios, por lo que si el 70% de sus usuarios está en la categoría “buena” y el 5% está en la categoría “necesita mejorar”, su página todavía se considera que “necesita mejorar”.

Hecho 3: Las métricas se evaluarán para cada página, pero si no hay suficientes datos, John Mueller estados que se pueden utilizar señales de secciones de un sitio o del sitio en general.

Hecho 4: Con la incorporación de estas nuevas métricas, AMPERIO se eliminará como un requisito de la función Top Stories en dispositivos móviles. Dado que las nuevas historias en realidad no tendrán datos sobre las métricas de velocidad, es probable que las métricas de una categoría más grande de páginas o incluso de todo el dominio se utilicen para esto.

Hecho 5: Las aplicaciones de una sola página no miden un par de métricas, DEFENSOR y LCP, a través de transiciones de página. Hablaremos de cuáles son en un minuto.

Hecho 6: Las métricas pueden cambiar con el tiempo y los umbrales también. Google ya ha cambiado las métricas utilizadas para medir la velocidad en sus herramientas a lo largo de los años, así como sus umbrales para lo que se considera rápido o no. Es muy probable que todo esto vuelva a cambiar en el futuro. De hecho, trabajamos un poco para mejorar las métricas anteriores el año pasado, pero tenemos que trabajar de nuevo para mejorar las nuevas métricas.

Solo para establecer expectativas, recuerde que hay más de 200 factores de clasificación. No esperaría mucha mejora mejorando Core Web Vitals. Se desconoce cuánto afectarán las clasificaciones, pero no es probable que sea una señal fuerte, especialmente considerando que muchos de los componentes de la experiencia de la página ya fueron utilizados por Google para determinar las clasificaciones.

Veamos cada uno de los principales elementos vitales de la web con más detalle.

Pintura con contenido más grande (LCP) – cargando

LCP es el elemento visible más grande cargado en la ventana gráfica.

Fuente: web.dev/vitals

El elemento más grande generalmente será una imagen destacada o tal vez la etiqueta

, pero podría ser cualquiera de estos:

• elemento
• elemento dentro de un elemento
• La imagen dentro de un elemento
• Imagen de fondo cargada con la función url ()
• Bloques de texto

Es posible que se agreguen y

Como ver LCP

En PageSpeed ​​Insights, la LCP El elemento se especificará en la sección Diagnóstico. Para la página probada, el LCP es nuestra imagen destacada en la publicación del blog.



En Chrome DevTools, siga estos pasos:

1. Rendimiento> marque “Capturas de pantalla”
2. Haga clic en ‘Comenzar a crear perfiles y recargar la página’
3. LCP está en el gráfico de tiempo
4. Haga clic en el nodo; este es el elemento para LCP



Optimización LCP

Con nuestro LCP elemento en esta y muchas otras páginas que es la imagen destacada, es probable que podamos mejorar esto precargando esta imagen o posiblemente insertando toda la imagen para hacer que la imagen se descargue junto con el HTML código. Básicamente, queremos cargar esta imagen más rápido de lo que lo hacemos actualmente.

Recursos

Cambio de diseño acumulativo (CLS) – estabilidad visual

CLS mide cómo se mueven los elementos o qué tan estable es el diseño de la página. Tiene en cuenta el tamaño del contenido y la distancia que se mueve. Un problema importante con la métrica es que continúa midiendo incluso después de la carga de la página inicial. Google está recibiendo comentarios sobre esta métrica en particular, por lo que es probable que veamos algunos cambios en el futuro.



Fuente: web.dev/vitals

Puede ser molesto si intenta hacer clic en algo en una página que cambia y termina haciendo clic en algo que no tenía la intención de hacer. Me pasa todo el tiempo. Hago clic en una cosa y, de repente, hago clic en un anuncio y ni siquiera en el mismo sitio web. Es frustrante como usuario.



Causas comunes de CLS incluir:

• Imágenes sin dimensiones
• Anuncios, inserciones e iframes sin dimensiones
• Inyectando contenido con JavaScript
• Aplicar fuentes o estilos al final de la carga

Como ver CLS

En PageSpeed ​​Insights, en Diagnóstico, encontrará una lista de los elementos que están cambiando.



Usando WebPageTest. En la vista Tira de película, utilice las siguientes opciones:

• Resaltar cambios de diseño
• Tamaño de la miniatura: enorme
• Intervalo de miniaturas: 0,1 seg.

Observe cómo nuestra fuente cambia de estilo entre 5.1s-5.2s, cambiando el diseño a medida que se aplica nuestra fuente personalizada.



Puede que quieras probar Cambio de diseño GIF Generador.



Revista Smashing También compartieron una técnica interesante en la que describieron todo con una línea roja sólida de 3px y grabaron un video de la carga de la página para identificar dónde están ocurriendo los cambios de diseño.

Optimización CLS

Para nuestra página de prueba, lo que podríamos querer hacer es precargar nuestra fuente personalizada, eliminar la fuente personalizada por completo (dudoso que lo hagamos), o usar una fuente predeterminada para la carga de la página inicial y solo cargar nuestra fuente en cargas de página posteriores. Estos tienen compensaciones en la marca, el estilo, la consistencia, etc., y tendremos que decidir cuál es el mejor camino a seguir.

Recursos

Retardo de la primera entrada (DEFENSOR) – interactividad

DEFENSOR es el tiempo desde que un usuario interactúa con su página hasta que la página puede responder. También puede pensar en ello como capacidad de respuesta. Esto no incluye desplazamiento ni zoom.

Interacciones de ejemplo:

• haciendo clic en un enlace o botón
• ingresar texto en un campo en blanco
• seleccionando un menú desplegable
• haciendo clic en una casilla de verificación.

Puede ser frustrante intentar hacer clic en algo y no sucede nada en la página.



Fuente: web.dev/vitals

No todos los usuarios interactuarán con una página, por lo que es posible que no tengan una DEFENSOR valor. Esta es también la razón por la que las herramientas de prueba de laboratorio no tendrán el valor porque no interactúan con la página. Utilice el tiempo total de bloqueo (TBT) en lugar de.

Causa de DEFENSOR

JavaScript compitiendo por el hilo principal. Solo hay un hilo principal y JavaScript compite para ejecutar tareas en él.



Fuente: https://web.dev/long-tasks-devtools

Mientras se ejecuta una tarea, una página no puede responder a la entrada del usuario. Este es el retraso que se siente. Cuanto más larga sea la tarea, mayor será la demora experimentada por el usuario. Los descansos entre tareas son las oportunidades que tiene la página para cambiar a la tarea de entrada del usuario y responder a lo que quería hacer.

Optimización DEFENSOR

No veo ninguna preocupación por nuestro sitio para DEFENSOR, pero en general, desea dividir las tareas largas y aplazar cualquier JavaScript que no sea necesario para más adelante.

Recursos

Herramientas para medir Core Web Vitals

La diferencia entre los datos de laboratorio y los de campo es que los datos de campo miran a los usuarios reales, las condiciones de la red, los dispositivos, el almacenamiento en caché, etc. y los datos de laboratorio se prueban consistentemente en base a las mismas condiciones con la esperanza de que los resultados de las pruebas sean repetibles.

Datos de campo

Datos de laboratorio

Me gusta el informe en GSC porque puede ver los datos de muchas páginas a la vez, pero los datos están un poco retrasados ​​y en un promedio móvil de 28 días, por lo que los cambios pueden tardar un tiempo en aparecer en el informe. En Chrome 88, Google es agregar Core Web Vitals directamente en DevTools.

También puede encontrar el puntuación de pesos para Lighthouse en cualquier momento y ver los cambios históricos.



Pensamientos finales

Quiere mejorar Core Web Vitals para que sus usuarios tengan una mejor experiencia. Queda por ver qué impacto tendrán para SEO, pero como mencioné en mi artículo sobre la velocidad de la página, deberían ayudarlo a registrar más datos en sus análisis, lo que “se siente” como un aumento.

Trabaje con sus desarrolladores; ellos son los expertos aquí. La velocidad de la página puede ser extremadamente compleja. Si está solo, es posible que deba confiar en un complemento o servicio para manejar esto como WP Rocket o NitroPack.

[ad_2]

Source link