Combinar las herramientas de Google para auditar, mejorar y monitorear tu WordPress

Con las métricas de Core Web Vitals (CWV) ahora incorporadas en las señales de experiencia de la página , la optimización de la experiencia del usuario se ha convertido cada vez más en una prioridad para los propietarios de sitios web. Este artículo sugerirá cómo se pueden combinar las diversas herramientas centradas en el rendimiento que Google ha puesto a disposición de forma gratuita para evaluar eficazmente el estado del sitio web e identificar los puntos débiles, depurar y optimizar las páginas que necesitan atención y monitorear y prevenir la regresión de manera continua.

Los CWV se evalúan a partir de experiencias reales de usuarios en un sitio web. Cuantos más datos se puedan recopilar y analizar en función de los usuarios reales, más éxito tendrán los propietarios de sitios web en la optimización de sus páginas. A tal efecto, recomendamos encarecidamente implementar el monitoreo de Real User Measurement (RUM) además de este flujo de trabajo.

Paso A: evalúe el estado del sitio web e identifique los puntos débiles.

1. Utilice el Panel de control de CrUX para medir la salud de su sitio web.
2. Utilice Search Console para identificar las páginas que necesitan atención.
3. Utilice PageSpeed ​​Insights para profundizar en las métricas de experiencia del usuario para una página específica.

Como desarrollador que se embarca en la optimización de un sitio web, saber por dónde empezar puede resultar abrumador. Las preguntas que suelen venir a la mente son:

• ¿Cómo está funcionando mi sitio web? ¿Necesita atención?
• ¿Ha mejorado o degradado la experiencia del sitio web recientemente?
• ¿Qué páginas, métricas y dispositivos debo priorizar?

Mide la salud de su sitio web con el Panel de control de CrUX

Para obtener una instantánea del rendimiento de un sitio web, puede generar un Panel de control de CrUX en g.co/chromeuxdash , basado en los datos de Chrome UX Report (CrUX). CrUX se basa en métricas clave de la experiencia del usuario en la web pública, agregadas de usuarios reales de Chrome que han optado por sincronizar su historial de navegación (como tal, no informa la experiencia de todos los usuarios de un sitio web).

Es posible que un sitio web no tenga suficiente tráfico apto para incluirse en el conjunto de datos de CrUX para generar este informe. Puede capturar métricas de usuarios clave en tiempo real integrando la biblioteca web-vitals.js o utilizando otras soluciones RUM. Esta es una buena práctica incluso para sitios web con suficientes datos CrUX, ya que permite monitorear a una base de usuarios más grande.

(consulte la documentación para conocer el uso completo y los detalles de la API de la biblioteca de web-vitals.js):

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

El informe CrUX proporciona información sobre:

• Descripción general del sitio: dividido por computadora de escritorio y dispositivo móvil para las métricas clave de CWV (pintura con contenido más grande, cambio de diseño acumulativo y retraso de la primera entrada), además de otras métricas como la primera pintura con contenido y el tiempo hasta el primer byte.
• Tendencia histórica por tipo de métrica: cada página incluye un gráfico que muestra las distribuciones a lo largo del tiempo para cada publicación mensual disponible de los datos del informe CrUX.
• Datos demográficos del usuario: estas páginas ilustran la distribución de las visitas a las páginas en todo el origen para los usuarios de cada grupo demográfico (dispositivos y tipos de conexión efectivos).

Con este panel puedes obtener:

• Información sobre la estabilidad y el rendimiento generales del sitio web por tipo de dispositivo e, identifique áreas de mejora.
• Comprender cómo los cambios arquitectónicos o las construcciones en el sitio han impactado la experiencia del usuario a lo largo del tiempo (superponiendo sus datos de lanzamiento históricos con los resultados mensuales del tablero de CrUX, para comprender qué causó las regresiones).
• Reducir las líneas de tiempo de regresión, proporcionando el foco para una mayor investigación.

Una vez que obtenga la imagen general, el siguiente paso es identificar qué páginas o plantillas necesitan más atención. Estos informes de nivel de origen no proporcionan esta información, pero Search Console sí.

Identifique las páginas de bajo rendimiento con Google Search Console

El informe Core Web Vitals en Search Console proporciona una vista holística de todo el sitio de su rendimiento y ayuda a identificar los tipos de páginas que necesitan más atención. Con esta herramienta puede:

• Identifique la cantidad de páginas que tienen una mala experiencia, las que necesitan mejoras y las que brindan una buena experiencia, desglosadas por vistas móviles y de escritorio.
• Obtenga información granular sobre el rendimiento de la URL agrupada por estado, métrica y grupos de URL (grupos de páginas web similares).
• Identifique las plantillas clave de las páginas para mejorar en función de los grupos de URL que aparecieron. (Cada grupo contiene URL que brindan una experiencia de usuario similar).
• Obtenga informes detallados específicos del dispositivo que muestren cuántas URL hay en los diferentes grupos de experiencia para dispositivos móviles o computadoras de escritorio.

Aquí hay algunas cosas que debe considerar al usar Search Console:

• Mientras que otras herramientas tienen acceso gratuito, Search Console requiere acceso de usuario autorizado. Si no tiene acceso a esta herramienta, comuníquese con el equipo relevante para obtener acceso o compartir información.
• En este informe solo pueden aparecer las URL indexadas, a excepción del informe de cobertura, donde puede ver las URL que se rastrearon pero no se indexaron. Las URL que se muestran son las URL reales para las que se registraron los datos (es decir, los datos no se asignan solo a la URL canónica de una página, como ocurre en la mayoría de los otros informes).
• Los datos que se muestran en este informe pueden tener un aspecto diferente de los que se muestran en el panel de CrUX. Los gráficos de Search Console muestran el estado por URL, mientras que el Panel de CrUX muestra el estado por visita. Por lo tanto, si tiene algunas URL de bajo rendimiento con un alto volumen de visitas, el gráfico de la Consola de búsqueda mostrará solo algunas URL deficientes, mientras que el Panel de CrUX mostrará un alto porcentaje de malas experiencias (visitas desglosadas por métricas).

El análisis de su sitio web con la herramienta Search Console reduce su análisis a las páginas y los tipos de páginas que necesitan más atención. Con este conocimiento, el siguiente paso es entrar en los detalles de rendimiento de estas páginas.

Analizar los detalles del rendimiento de la página con PageSpeed ​​Insights #

PageSpeed ​​Insights (PSI) proporciona dos tipos de datos: datos de campo surgidos de CrUX (los mismos datos que alimentan el Panel de control de CrUX y la Consola de búsqueda) y datos de laboratorio, generados por Lighthouse .

Una de las características más interesantes de PSI es que es la única herramienta basada en web capaz de mostrar un subconjunto de datos CrUX (FCP, LCP, FID y CLS) a nivel de URL, siempre que tenga suficiente tráfico apto para la recopilación de datos. Estos datos cubren los últimos 28 días de experiencia del usuario. Con esta herramienta, puede obtener las métricas de experiencia del usuario evaluadas en el percentil 75. En otras palabras, si el 75% de las experiencias de los usuarios son iguales o mejores que el umbral establecido para la métrica, el rendimiento se considera «bueno». Una URL pasa la evaluación de CWV cuando el 75% de todas las visitas a la página se realizaron en o por encima de los umbrales de CWV para FID, LCP y CLS. Puede comparar los datos a nivel de URL con los datos a nivel de origen para ver si las URL individuales son mejores o peores que las métricas de nivel de origen y comprender qué tiene de particular la página en particular.

Datos de laboratorio, generados por Lighthouse

La puntuación general de Lighthouse para la URL se muestra en la parte superior de la página. Debajo de la sección de datos de campo se encuentra la sección de datos de laboratorio que proporciona métricas recopiladas de una ejecución de Lighthouse en tiempo real y muestra oportunidades para la página.

La ejecución de PSI para diferentes tipos de páginas (analizar los datos de campo y las oportunidades) le proporcionará una comprensión de alto nivel de las métricas y las mejoras en las que concentrarse. Con esa información, ahora está listo para depurar y optimizar sus páginas, lo que discutiremos en la siguiente sección.

Paso B: depurar y optimizar

1. Utilice Lighthouse para auditar una página y descubrir mejoras.
2. Utilice la extensión Web Vitals para analizar las métricas de CWV en tiempo real en una página.
3. Utilice Chrome DevTools para depurar problemas de rendimiento y probar cambios en el código.

Una vez que haya identificado las páginas y métricas que necesitan atención, las siguientes preguntas que debe hacer son:

• ¿Cómo se pueden optimizar estas páginas?
• ¿Cuáles son las frutas más fáciles de abordar de inmediato?
• ¿Qué mejoras requieren más planificación?

Descubra oportunidades con Lighthouse

El primer paso para responder a estas preguntas es utilizar Lighthouse. Proporciona una instantánea de oportunidades para mejorar el rendimiento de carga de páginas específicas en función de una ejecución de laboratorio. Puede acceder a Lighthouse de varias formas, que incluyen:

• Ejecutando Lighthouse desde Chrome DevTools .
• En web.dev/measure .
• De PageSpeed ​​Insights .

Lighthouse identifica áreas críticas de optimización en el momento de la carga y en qué medida podrían mejorar potencialmente la experiencia del usuario. La identificación rápida de las correcciones de bajo esfuerzo ayuda a iniciar el proceso de optimización antes de manejar las tareas más importantes.

Si bien los valores absolutos de las métricas pueden ser interesantes de observar, tenga en cuenta que cambian según el entorno en el que se ejecuta Lighthouse y muchos otros factores, como las condiciones de la red de los servidores que alojan el sitio web y sus terceros. Además, Lighthouse simula la experiencia de un usuario en un móvil de nivel medio en una conexión 4G lenta y es posible que no represente la experiencia de sus usuarios en el percentil 75 (en el que se basan las métricas de CWV). Las métricas son una buena indicación de lo que está sucediendo en un sitio web, pero recomendamos centrarse más en las oportunidades de optimización en el informe.

Lighthouse analiza las páginas en tiempo de carga en un entorno de laboratorio. Si bien las evaluaciones de laboratorio de LCP a menudo son útiles para depurar y optimizar LCP en el campo, las acciones del usuario afectan CLS y FID de formas que no siempre son capturadas por las mediciones de laboratorio de carga de página únicamente. TTI y TBT son métricas de proxy para diagnosticar problemas de FID, pero es posible que no siempre se correlacionen con FID para un sitio en particular.

Análisis en tiempo real con la extensión Web Vitals

La extensión Web Vitals muestra métricas de CWV en tiempo real al cargar y navegar por una página.

Uno de los principales beneficios de usar la extensión sobre otras herramientas es que mide las métricas FID y CLS durante la interacción con la página, a diferencia de Lighthouse, que solo captura métricas hasta que se carga la página (y excluye FID).

La extensión Web Vitals solo funciona en el escritorio de Chrome. Para evaluar el rendimiento de un sitio móvil, utilícelo en modo de emulación móvil. Además, cambie a datos de campo telefónico para obtener resultados más comparables.

Si bien estas herramientas brindan mucha información útil, un desarrollador puede querer profundizar en los problemas subyacentes y probar los cambios antes de publicar su código. Chrome DevTools (CDT) es una gran ayuda para hacer precisamente eso.

Análisis profundo con Chrome DevTools

Algunas características que recomendamos explorar en el contexto de CWV son las siguientes:

• Cargue la página en la pestaña Rendimiento para analizar la cascada, identificar los cuellos de botella y observar las métricas de CWV .
• Active la casilla de verificación Regiones de cambio de diseño en el menú de comandos y cargue la página en la pestaña Red para resaltar los cambios de diseño en el momento de la carga (también es útil mientras navega por la página).
• Analice el uso del código con la pestaña Cobertura y elimine el código no utilizado para mejorar las métricas de LCP y FID.
• Habilite las Anulaciones locales para probar los cambios de código en una página en vivo. Los cambios realizados a través de Chrome DevTools persistirán y puede realizar auditorías como las que se comentaron anteriormente, lo que permite un análisis rápido del impacto en la experiencia del usuario.

Después de seguir los pasos descritos hasta ahora, el sitio web analizado y arreglado debería estar en un mejor estado.

Para asegurarse de que los cambios realizados tengan un impacto positivo real en los usuarios, debe realizar el paso A (Evaluar el estado del sitio web e Identificar los puntos débiles) de este artículo nuevamente. Tenga en cuenta que, dado que los datos de CrUX se agregan durante un período de 28 días, es posible que los cambios en las métricas de la experiencia del usuario no sean evidentes de inmediato en PSI y CrUX. Esta es la razón por la que la implementación de soluciones RUM es fundamental, ya que mostrarán métricas y validarán las correcciones mucho más rápido.

El trabajo de la experiencia del usuario es un proceso iterativo y para garantizar que los nuevos lanzamientos no retrocedan las mejoras realizadas, es fundamental contar con un sólido proceso de supervisión y desarrollo continuo.

Paso C: Monitoreo y desarrollo continuo

1. Use CrUX en BigQuery , CrUX API , PSI API y web-vitals.js para automatizar la recopilación de datos de usuarios reales de un sitio web, para impulsar paneles personalizados y crear sistemas de alerta.
2. Utilice Lighthouse-CI para automatizar las pruebas de laboratorio y evitar regresiones.

Cada organización dedica una cantidad considerable de tiempo y recursos a mejorar el rendimiento de su sitio web. La investigación de Google ha demostrado que la mayoría de los sitios que optimizan su rendimiento web retroceden en seis meses. Un sitio web necesita un seguimiento continuo para comprender las tendencias, identificar problemas, realizar un seguimiento de las regresiones y alertar a los desarrolladores para que actúen en consecuencia para evitar regresiones.

La mayoría de los propietarios de sitios usan herramientas RUM para monitorear el desempeño de su sitio. Estas herramientas proporcionan una vista de sus páginas en diferentes dimensiones, como navegador, red, dispositivos móviles y tráfico. Sin embargo, no todo el mundo dispone de este tipo de herramientas para un seguimiento continuo.

Proporcionamos API de las herramientas discutidas en este artículo que puede integrar en sus sistemas para automatizar la recopilación de datos y potenciar sus soluciones:

• Consultando CrUX en BigQuery .
• Usando la API de CrUX .
• Usando la API de PageSpeed ​​Insights .
• Integrando web-vitals.js .

Estas pueden parecer muchas API para integrar, entonces, ¿qué herramienta debería preferir? Esta tabla lo ayudará a elegir las API adecuadas para satisfacer sus necesidades.

CrUX en BigQuery	API de CrUX	API de PSI	web-vitals.js
Datos a nivel de origen (solo campo)	Datos de nivel de origen y URL (solo campo)	Datos de nivel de origen y URL (laboratorio y campo)	Datos a nivel de URL (solo campo)
Datos agregados mensuales	28 días rodando	28 días rodando	Tiempo real
Permite la división de datos de formas significativas que se pueden unir con otros conjuntos de datos públicos como HTTP Archive para obtener información avanzada.	Acceso RESTful a los datos de CrUX mediante programación. Más posibilidades de filtrado y más rápido que la API de PSI (también mayor cuota).	Acceso RESTful a los datos de CrUX y Lighthouse mediante programación.	Recopile métricas de CWV en tiempo real a partir de experiencias de usuarios reales en un sitio web (debe integrarse en las páginas).
Recomendado para obtener información más precisa. Los usuarios predeterminados pueden consultar 1 TB de datos por mes. Más allá de eso, se aplican las tarifas estándar.	Gratis dentro de la cuota de API.	Gratis dentro de la cuota de API.	Libre.

La recopilación y la generación de informes sobre métricas es solo una parte de la gestión adicional para evitar la regresión, pero ocurre después de haber realizado cambios en el sitio. Sería ideal identificar posibles solicitudes de extracción que degradarían el rendimiento antes de las versiones de código. Para ello, puede utilizar Lighthouse-CI con la mayoría de las herramientas de integración continua. Con esto, podrá identificar PR degradantes y trabajar en optimizaciones antes de que las versiones de código se activen y tengan un impacto inesperado en los usuarios.

Tenga en cuenta que la configuración ideal para identificar mejor las áreas de mejora implica la captura continua de sus propios datos RUM aprovechando herramientas y bibliotecas como web-vitals.js .

Conclusión

Asegurar una gran experiencia de usuario requiere una mentalidad de rendimiento primero y la adopción de la estrategia correcta. Con las herramientas y los procesos adecuados para auditar, depurar, monitorear y agregar gobernanza, creemos que lograr una excelente experiencia de usuario y aprobar CWV está al alcance de cualquiera.

Puedes obtener nuestros servicios al respecto aquí.