Cómo optimizar para Google Core Web Vitals

Cómo prepararse para el lanzamiento de Core Web Vitals

Actualizado el 15/10/2021

Reparar las malas experiencias de los usuarios en el sitio de una empresa se ha trasladado a la parte superior de muchas listas de prioridades.

Una cosa que ya sabemos es que Google planea usar y desarrollar su nuevo Informe Core Web Vitals de Google Search Console. Está destinado a ayudar a las empresas a hacer más que simplemente rastrear e indexar sus páginas, se trata más de hacerlas más valiosas para los usuarios.

¿Qué son Google Core Web Vitals?

Google Core Web Vitals es un conjunto de informes agregados a Google Search Console en 2019 que comprenden un pequeño conjunto de métricas centrales sobre la velocidad de carga. Ayudan a los especialistas en marketing de búsqueda y a los equipos de desarrollo a saber qué tan bien o mal está entregando un sitio sus páginas web. Google califica cada página web de acuerdo con su desempeño al ofrecer una experiencia placentera a los visitantes del sitio. El informe Core Web Vitals detalla el rendimiento de las páginas web en función de los datos de uso del mundo real, también conocidos como datos de campo.

Estos nuevos factores de clasificación se acercan rápidamente. Si bien todos los sitios se benefician al agregar tipos de marcado de esquema esenciales, utilice el anidamiento y adhiérase a lo que es más importante para evitar la sobrecarga de código.

El 5 de octubre de 2021, Google subió consejos útiles en una presentación de YouTube titulada Cómo mejorar la pintura con contenido más grande para una mejor experiencia de página .

Consejos de Google sobre cómo obtener una mejor puntuación de pintura con contenido más grande (LCP):

Las imágenes suelen ser el motivo de los problemas con la pintura con contenido más grande. Cada bit guardado puede acelerar la carga de la página. Utilice formatos de imagen modernos como AVIF y WebP. Hay muchos casos extremos que se relacionan con la forma en que se calcula su puntaje LCP.

¿Qué es la experiencia de la página de Google?

La experiencia de la página es un subconjunto de la experiencia del usuario.

Page Experience se centra en los aspectos técnicos de los productos web que más a menudo influyen en la experiencia del usuario. Si bien no mide ni refleja los aspectos del diseño de UX como la calidad del contenido o el diseño visual, todas las señales de Page Experience están básicamente bajo el control del equipo de desarrolladores que crea el sitio web. Estas señales tienen un efecto directo en la experiencia general del usuario.

La iniciativa intencional de Google de promover la experiencia de la página tiene la intención de impactar positivamente en la web. Piensa en ello como algo positivo. Es útil tener estas métricas de rendimiento adicionales que se correlacionan con las métricas comerciales para obtener la aceptación más fácilmente de los miembros del equipo que no son técnicos.

Retrocedamos un poco y revisemos cómo llegamos aquí.

La historia de la velocidad del sitio y Google Core Web Vitals

¿Cuál es el momento para el lanzamiento de Google Page Experience?

El 10 de noviembre de 2020, Google anunció: “Las señales de experiencia de página en la clasificación se implementarán en mayo de 2021. Las nuevas señales de experiencia de página combinan Core Web Vitals con nuestras señales de búsqueda existentes, que incluyen compatibilidad con dispositivos móviles, navegación segura, seguridad HTTPS, y guías intersticiales intrusivas”.

Retrocedamos y obtengamos una descripción clara. En el año 2010, Google comenzó a usar la rapidez con la que se carga una página web en una computadora de escritorio como una señal de clasificación.

Google ha estado impulsando la compatibilidad con dispositivos móviles como una señal de clasificación a partir de 2015. Para 2018, el proceso Mobile-First Index se lanzó como oficial. Se notificó a los webmasters y propietarios de sitios en Search Console cuando Google determina que un sitio está listo para la indexación móvil primero. Esto ocurre cuando Google evalúa la versión móvil de su sitio web durante el proceso de evaluación con fines de búsqueda; no puedes activarlo.

A principios de 2020, Google presentó su nuevo conjunto de herramientas dentro de Google Search Console, llamado Core Web Vitals. Dijo explícitamente que las métricas en estos informes se convertirán en señales de clasificación en 2021. Core Web Vitals amplía las métricas de velocidad del sitio anteriores para ayudar a las empresas a abordar cómo se cargan algunas páginas web, anuncios móviles y archivos de soporte.

La introducción de Web Core Vitals alerta a los propietarios de sitios web rezagados que no se preocupan por la compatibilidad con dispositivos móviles que claramente importa. Si bien la actualización de Mobilegeddon fue una implementación lenta, ahora se debe enfrentar la importancia de hacer que un sitio sea una mejor experiencia para los usuarios móviles.

La inversión de Google en herramientas e informes sobre la velocidad del sitio y los dispositivos móviles son señales para los propietarios de sitios web de que necesitan hacer que sus sitios web sean más fáciles de usar o esperan que se conviertan solo en una tarjeta de visita en línea. Hoy anunciamos que las señales de experiencia de página en la clasificación se implementarán en mayo de 2021.

¿Qué métricas básicas componen la experiencia de la página de búsqueda de Google?

Las tres principales métricas de experiencia de la página de búsqueda de Google explicadas:

• Cargando: LCP evalúa cuánto tiempo tarda el elemento de contenido más grande (como una imagen destacada, una imagen destacada o un texto de encabezado H1) en una página web específica en volverse visible dentro de la ventana gráfica de los visitantes. Busque obtener un LCP de 1,2 segundos o menos.
• Interactividad: FID (retraso en la primera entrada): el reloj de tiempo se ejecuta desde que un usuario interactúa por primera vez con su página (como cuando se hace clic en un enlace, se activa un botón, etc.) hasta el momento en que el navegador responde a esa interacción. Esta medida se deriva de cualquier elemento interactivo en el que la persona haga clic primero. Esto es importante en las páginas donde el visitante necesita hacer algo porque es cuando la página se vuelve interactiva. También llamados informes TBT (en GTmetrix); representa cuánto tiempo está bloqueado por los scripts que se invocan durante el proceso de carga de la página. Busque ganar un TBT de 150 milisegundos o menos.
• Estabilidad visual: CLS indica cuánto cambia el diseño de una página que experimenta un visitante a medida que se carga la página. Busque una puntuación CLS de 0,1 o menos.

Para auditar su contenido y determinar si cumple con el umbral de Core Web Vitals para ser etiquetado con una insignia de página rápida, use las herramientas de desarrollo de Google para evaluar la velocidad de carga. Para ayudar con estas tareas de optimización, GTmetrix se ha vuelto más sofisticado. GTmetrix Reports agregó una nueva metodología de puntuación. Los informes anteriores de PageSpeed ​​e YSlow se han actualizado a una calificación general de GTmetrix. Con la tecnología de Lighthouse, los usuarios de GTmetrix ahora obtienen una puntuación de rendimiento y estructura.

¿Qué es el retardo de la primera entrada (FID)?

FID es un puntaje que evalúa cuánto tiempo le tomó al navegador administrar otras tareas antes de que pudiera tratar con una persona que realizaba una acción, como un toque o un clic. Esto indica cuán receptiva es la experiencia de la interfaz de usuario para un usuario y mide la carga de la CPU con el procesamiento de JavaScript.

La forma en que una página ejecuta JavaScript, tanto en la carga de la página como durante el ciclo de vida de la página, afecta directamente a la FID. El tiempo que tarda JavaScript en ejecutarse por completo es importante si los visitantes intentan completar una acción antes de que la aplicación esté completamente lista.

Formas de mejorar el retardo de la primera entrada:

• Retrasar o eliminar archivos de terceros o píxeles de seguimiento.
• Aplaza todos los guiones no esenciales.
• Mejorar la ejecución de JavaScript.

GTmetric y otras cascadas hacen un excelente seguimiento del rendimiento para revelar dónde se consume excesivamente el tiempo de carga. Una vez identificados, pueden ser investigados y resueltos.

¿Qué es el nuevo indicador de experiencia de la página de Google?

Google mostrará a los usuarios la calidad de Core Web Vitals de una página web con su nuevo indicador de experiencia de página. Esto ya se muestra en algunas SERPS. Es similar en tamaño y forma al icono de AMP que indica el estado de una página móvil acelerada. Como Google es muy bueno para probar y hacer interaciones, esto puede verse diferente a medida que se adopte más ampliamente.

Si bien las métricas de Core Web Vitals brindan información más detallada que la que teníamos antes en los informes de Google Search Console, es probable que surjan muchos falsos positivos después de la implementación completa.

Cómo determinar las tareas básicas vitales web más importantes

Concéntrese primero en las métricas de velocidad de carga más impactantes antes de realizar optimizaciones más profundas del rendimiento del sitio web.

1. Resuelva todo lo que esté etiquetado como "Pobre" primero.

2. A continuación, priorice su lista de tareas según los problemas que afecten negativamente a la mayoría de las URL, o según los problemas que perjudiquen a sus URL generadoras de ingresos.

3. Los problemas que “necesitan mejorar” ahora son los siguientes en la lista de prioridades.

La necesidad de una mejora drástica en el cambio de contenido de diseño me sorprendió bastante, pero claramente influye en la obtención de los mejores resultados de SEO. La página no tiene anuncios de carga tardía sobre el contenido, ni intersticiales intrusivos, y todas las imágenes tenían su ancho y alto correctamente definidos. Sin embargo, el tamaño de la imagen destacada original era de 1280 por 860 píxeles. Esto estaba causando un problema de cambio de tamaño de imagen; cuando los navegadores lo cargaban, lo redimensionaban a 1200 por 800 píxeles. Esto provoca un cambio de diseño y el consiguiente retraso en la carga. Asegúrese de que sus imágenes tengan el tamaño correcto para el marcado JASON-LD Schema.

Cuando haya solucionado un problema específico en todas sus URL, puede confirmar si solucionó el problema para todas las URL. Haga clic en Iniciar seguimiento para iniciar una sesión de monitoreo de 28 días para verificar instancias de este problema en su sitio. Si este problema no está presente en ninguna URL de su sitio durante la ventana de 28 días, el problema se considera solucionado. La presencia de ese problema en cualquier URL es suficiente para marcar el problema como no solucionado; sin embargo, el estado de las URL individuales permanece bajo evaluación durante los 28 días completos, sin importar cuál sea el estado del problema.

PREGUNTAS FRECUENTES COMUNES SOBRE CVW

Puede llevar mucho tiempo aprender, solucionar problemas y probar/modificar muchas opciones para mejorar las puntuaciones de CWV. Aquí están las respuestas:

¿Cómo calcular la puntuación CLS?

La puntuación CLS de una página se calcula multiplicando la proporción de la pantalla del usuario que se movió inesperadamente al cargar por la distancia recorrida. Los sitios a veces incluso se enfrentan a que la mitad de la pantalla se vea afectada por el cambio de contenido. Eso es molesto para los espectadores. Al mismo tiempo, se tiene en cuenta la distancia que tuvo que recorrer el contenido en la pantalla. Por lo tanto, para calcular la puntuación CLS, multiplique el área de la pantalla afectada (0,5) por la distancia recorrida (0,15) y podrá obtener una puntuación útil.

¿Cuáles son las causas comunes que crean problemas de cambio de diseño de contenido?

• Eliminar márgenes en la imagen destacada : al ejecutar la herramienta Lighthouse junto con Chrome Dev Tools, en un sitio web, el código figure class=”featured-media” demostró ser un problema. Al agregar este código CSS adicional .featured-media { img display: none; } .featured-media { img display: none; } , la puntuación de rendimiento del escritorio mejoró inmediatamente dos puntos completos.
• Resuelva cualquier problema con la carga de las fuentes : algunos diseñadores web prefieren el aspecto de las fuentes web de titulares elegantes; sin embargo, a menudo la forma en que se cargan provoca un cambio de diseño. Pruebe para descubrir si hay problemas potenciales de dilución de caché para resolver, así como también cómo se entrega el tamaño general de las fuentes. Descubrimos que al especificar la visualización de fuente alternativa, al agregar { font-display: fallback;} , podemos mejorar el comportamiento de representación de los elementos utilizando la instrucción de fuente.
• Contenido inyectado dinámicamente : esto ocurre comúnmente cuando se agregan banners o formularios a una página de forma dinámica. Además, los usuarios que no pueden ver una "x" para darse de baja de una ventana emergente pueden sentirse frustrados. Además, cuando los elementos en la página son utilizables, siguen siendo los culpables de por qué la página se reorganiza y "cambia".
• Falta de especificaciones de imagen : cuando las imágenes de una página tienen dimensiones de imagen incorrectas, deficientes o no especificadas, los navegadores han agregado trabajo y tiempo para cargar la página sin esta información y luego deben cambiar para calcularla.
• Incrustaciones en la página, anuncios e iframes sin dimensiones : al informar a los navegadores sobre el espacio de diseño necesario para estos elementos visuales en la página, puede evitar que el navegador tenga que cambiar una vez que cada uno de ellos esté visualmente en su lugar.

Después de seguir las estrategias de mejora de CLS anteriores, la puntuación de cambio de diseño acumulativo del mismo sitio ahora es 0,01. Esto contribuye en gran medida a mejorar los resultados de búsqueda móvil de un sitio.

¿Qué métricas de Core Web Vitals se pueden mejorar al cargar CSS Async?

Debido a que es lo que la gente ve primero, las métricas calculadas en la sección de la mitad superior de la página garantizan que el contenido clave que es visible para el usuario se vea rápidamente. Algunos archivos de contenido y soporte pueden cargarse en segundo plano hasta que alcance el "Tiempo de carga completa".

Según Koray Tugberk GUBUR, propietario de Holistic SEO, “en la relación entre cargar archivos CSS como Async y abrir páginas web antes para el usuario, algunas métricas de velocidad de página se ven más afectadas que otras. La carga más rápida de archivos CSS mejora especialmente las métricas de First Paint, First Contentful Paint, Largest Contentful Paint e Speed ​​Index”.

Coloque su contenido clave en la parte superior de la página donde se pueda ver fácilmente para que coincida con la intención de los buscadores. No haga esperar a los visitantes del sitio para encontrar respuestas a sus preguntas.

¿Cómo mide Google la velocidad de carga?

Las sugerencias de mejora y los diagnósticos que se encuentran en PageSpeed ​​Insights se generan a partir de pruebas de laboratorio; las métricas de rendimiento son más precisas cuando se obtienen de los resultados de campo. Una vez que tenga una idea general de cómo mejorar PageSpeed, la lógica de cómo Google califica esto puede impactar positivamente en los resultados vitales de su web.

Tres nuevas métricas de rendimiento engloban este mundo de rendimiento web. Son compatibles a través de una API en Chrome, Chrome en Android, navegadores Chromium Edge. Los datos en los que se basa Google para la medición de la experiencia de la página se derivan del Informe UX de Chrome (CRUX). Se compone de estadísticas de rendimiento anonimizadas que proporcionan las cargas de páginas reales en los navegadores Chrome de todo el mundo.

Al ser independiente del estado de la memoria caché, CRUX evalúa todas las cargas regulares de la página, incluidas las páginas web de destino y de mitad de sesión. Omite las navegaciones suaves, también llamadas cambios de ruta, dentro de las aplicaciones de una sola página. Las navegaciones suaves tienen el potencial de ser penalizadas. Las puntuaciones más bajas de CLS y los valores de LCP indican un cambio reducido de usuarios que experimentan cambios de diseño inesperados.

¿Qué tan importante es la compresión de imágenes para una puntuación CWV?

No necesita comprometer la calidad de la imagen para obtener una buena puntuación de CWV.

Los navegadores actuales pueden administrar imágenes de alta resolución cuando se suministran; Si bien aún desea comprimirlos, use solo el tamaño que necesita para que se vean bien en pantallas de alta resolución. Puede usar un CND y pensar en comenzar con una imagen o fondo menos complejo para comenzar. Aprenda y siga las Directrices de imágenes de Google.

@Jamsession18 le preguntó a John Mueller de Google el 26 de marzo de 2021:

“¿Pueden responder a mi consulta sobre la calidad de las imágenes utilizadas? Trabajo para un sitio de noticias que actualmente se está optimizando para CWV y, para eso, nuestra tecnología está comprimiendo las imágenes a un nivel extremo a costa de la calidad de la imagen (imágenes borrosas ahora). ¿Vale la pena el costo?”

“Eso suena como una mala idea. La experiencia de la página es solo una de las muchas cosas que analizamos para la clasificación, pero si a los usuarios no les gusta su contenido, es poco probable que se conviertan (como quiera que lo hagan) y es poco probable que quieran volver. -???? Juan ???? @juanmu

¿En qué se diferencian los datos de campo y de laboratorio?

Una diferencia es que los datos de laboratorio son útiles para las pruebas, los datos de campo son mejores para clasificar.

Los datos de laboratorio se refieren a los datos de rendimiento que se encuentran en un entorno único. Las herramientas Chrome Dev Tools y webpagetest.org se usan comúnmente para obtener datos de laboratorio. Los datos de campo abarcan los datos recopilados de la recopilación de usuarios que visitan las páginas de su sitio utilizando el navegador Chrome. Los datos de campo son los que completan sus informes de Google Search Console, así como Google Page Speed ​​Insights (que se basa en datos de laboratorio y de campo para sus informes de página).

Los datos de campo se pueden obtener mediante la automatización a través de BigQuery. Para los sitios o páginas más nuevos que no reciben mucho tráfico orgánico, es posible que no haya datos de campo disponibles.

¿Por qué es importante mejorar las tres métricas Web Core Vitals?

Los tres puntos de referencia de Core Web Vitals (CWV) señalan un componente clave de lo que se necesita para proporcionar una buena experiencia de usuario. Cada una de las 3 métricas debe cumplirse para calificar para el aumento de la señal de clasificación de Google relacionado que se implementará en mayo de 2021. Google nos brinda 6 formas de medir estos Core Web Vitals. Como nos dice John Mueller, analista sénior de tendencias para webmasters de Google, se deben cumplir todos los requisitos mínimos para beneficiarse de esta próxima actualización del algoritmo.

“Tengo entendido que vemos si está en verde y luego eso cuenta si está bien o no. Entonces, si está en amarillo, entonces no estaría en verde, pero no sé cuál será el enfoque final.

Hay una serie de factores que confluyen y creo que la idea general es que si podemos reconocer que una página coincide con todos estos criterios, nos gustaría usar eso de manera adecuada en la clasificación de búsqueda.

No sé cuál sería el enfoque donde hay algunas cosas que están bien y otras que no están perfectamente bien, como cómo se equilibraría eso”. – John Müller

Esto hace que la percepción de una página de carga rápida frente a una carga lenta sea de gran importancia. Cumplir con las tres métricas es una oportunidad; las pequeñas empresas pueden mejorar su SEO y obtener una ventaja competitiva que les ayude a ganar nuevos negocios. El enfoque de cada sitio debe estar en mejorar los resultados de búsqueda móvil sobre la experiencia de escritorio, ya que esto es más importante para el mayor volumen de buscadores.

Como gran parte del marketing de búsqueda, lo mejor es un enfoque holístico. Es fácil centrarse demasiado en un área del rendimiento del sitio y descartar otras que necesitan atención. Un ejemplo de esto es agregar todo el marcado de esquema que pueda pensar cuando solo puede estar agregando código de poco valor. Lea nuestra Guía completa para el marcado de esquemas de comercio electrónico para ampliar mejor la visibilidad de sus productos en SERP.

¿Podrá una persona que realiza una búsqueda saber qué sitios pasan la prueba Core Web Vitals?

Las personas que desean una señal de que una empresa ha tenido en cuenta la velocidad de la página, la capacidad de respuesta de la página y los factores de estabilidad visual de la página antes de hacer clic en una página verán una insignia.

John Mueller ha indicado que Google puede introducir una insignia en los resultados de búsqueda para las páginas que pasan Core Web Vitals de Google. La insignia actuará como una especie de filtro. Afirma a una persona que usa la Búsqueda de Google que si hace clic en una página web con esta insignia CWV, puede esperar una experiencia positiva.

Herramientas de prueba de Core Web Vitals

Cuando pruebe su Core Web Vitals, use una ventana de incógnito para evitar problemas no deseados.

Hay varias herramientas ahora disponibles; preferimos Faro. Al usar muchos, puede tener una perspectiva más general. Sin embargo, difieren considerablemente en sus aplicaciones, los niveles de habilidad necesarios para la competencia técnica y los informes. La consola de búsqueda es muy útil por ser el panel principal de Web Vitals de cada sitio. Obtener una vista panorámica de un sitio web completo, según Google, es vital para el éxito. Chrome Extension y PageSpeed ​​Insights son mejores para esas evaluaciones rápidas de páginas. Agregaremos más aquí con el tiempo.

Una vez que este trabajo esté en su lugar, cubriremos sus informes de progreso de marketing de búsqueda en persona. Queremos que comprenda y disfrute de los beneficios.

Mejorar los aspectos técnicos de SEO siempre ha requerido la participación necesaria y los recursos de los desarrolladores para lograrlo. Los especialistas en marketing de búsqueda que trabajan con empresas de todos los tamaños siempre han tenido problemas con las aprobaciones presupuestarias. Hoy en día, el rendimiento de cada sitio web ahora tiene una clara puntuación de crucialidad. Si alguien no se tomó esto en serio en el pasado, ahora es una cruda realidad. ¿Por qué esperar hasta que te penalicen en los rankings?

Google ha sido testigo de estas luchas y ha escuchado a los SEO preguntar cómo obtener aceptación durante años. El gigante tecnológico está destacando de manera inteligente la importancia del rendimiento al hacerlo transparente en sus informes de Google Search Console y al establecerlo como una señal de clasificación adicional. La experiencia de la página de Google se describe mejor como un conjunto de factores que miden qué tan satisfactorio es para una persona interactuar con una página web. Concéntrese en sus clientes y visitantes del sitio y en cómo hacer que su experiencia en su sitio web sea lo mejor posible para ellos.

RESUMEN

La optimización de las métricas de rendimiento de Core Web Vital, según lo medido por Google en CRUX, puede ser un gran impulso en el futuro. Pero incluso antes de que estos datos vitales web se conviertan en un factor de clasificación, tendrá un impacto positivo en la experiencia del usuario de su sitio. Los consumidores quieren experiencias más rápidas. Mejorar los problemas de velocidad de carga conduce a una tasa de rebote más baja, una mayor duración de la sesión de la página, mejores puntajes de satisfacción del usuario, una mejor tasa de conversión y un mayor tráfico de SEO. En última instancia, todo esto conduce a un aumento de los ingresos.

Lo mejor de las optimizaciones de rendimiento de la página es que a menudo se logra con mejoras de código relativamente menores.

Hill Web Creations puede liderar sus esfuerzos de optimización comenzando con una Auditoría técnica integral de SEO .