M谩s

    Optimizaci贸n de la interacci贸n con la siguiente pintura: una gu铆a paso a paso

    - Advertisement -

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

    Mantener su sitio web r谩pido es importante para la experiencia del usuario y el SEO.

    El Elementos vitales web b谩sicos La iniciativa de Google proporciona un conjunto de m茅tricas para ayudarle a comprender el rendimiento de su sitio web.

    Las tres m茅tricas de Core Web Vitals son:

    Esta publicaci贸n se centra en la m茅trica INP recientemente introducida y en lo que puede hacer para mejorarla.

    En esta gu铆a

  • 1. 驴C贸mo se mide la interacci贸n con la siguiente pintura?
  • 2. C贸mo identificar y solucionar tiempos de INP lentos
  • 3. C贸mo investigar un retraso de entrada elevado
  • 4. C贸mo investigar un retraso elevado en la presentaci贸n
  • 5. Obtenga los datos que necesita para mejorar la interacci贸n con la siguiente pintura
  • 驴C贸mo se mide la interacci贸n con la siguiente pintura?

    INP mide la rapidez con la que su sitio web responde a las interacciones del usuario, por ejemplo, un clic en un bot贸n. M谩s espec铆ficamente, INP mide el tiempo en milisegundos entre la entrada del usuario y cuando el navegador termina de procesar la interacci贸n y est谩 listo para mostrar cualquier actualizaci贸n visual en la p谩gina.

    Su sitio web debe completar este proceso en menos de 200 milisegundos para obtener una puntuaci贸n 芦Buena禄. Los valores superiores a medio segundo se consideran 芦pobres禄. Una puntuaci贸n baja en una m茅trica de Core Web Vitals puede afectar negativamente impactar su ranking en los motores de b煤squeda.

    Google recopila datos INP de visitantes reales de su sitio web como parte del Informe de experiencia del usuario de Chrome (Quid). Estos datos de CrUX son los que, en 煤ltima instancia, impactan las clasificaciones.

    Imagen creada por DebugBear, mayo de 2024

    C贸mo identificar y solucionar tiempos de INP lentos

    Los factores que causan una mala interacci贸n con Next Paint a menudo pueden ser complejos y dif铆ciles de determinar. Siga esta gu铆a paso a paso para comprender las interacciones lentas en su sitio web y encontrar posibles optimizaciones.

    1. C贸mo identificar una p谩gina con tiempos de INP lentos

    Diferentes p谩ginas de su sitio web tendr谩n diferentes puntuaciones de Core Web Vitals. Por lo tanto, debe identificar una p谩gina lenta y luego investigar qu茅 la causa.

    Usando la consola de b煤squeda de Google

    Una manera f谩cil de verificar sus puntajes INP es usar el Secci贸n de elementos b谩sicos de la web en Consola de b煤squeda de Googleque informa datos basados 鈥嬧媏n los datos de Google CrUX que hemos discutido antes.

    De forma predeterminada, las URL de las p谩ginas se agrupan en grupos de URL que cubren muchas p谩ginas diferentes. Tenga cuidado aqu铆: no todas las p谩ginas pueden tener el problema que Google informa. En su lugar, haga clic en cada grupo de URL para ver si hay datos espec铆ficos de URL disponibles para algunas p谩ginas y luego c茅ntrese en ellas.

    馃摲 1716365005 454 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla de Google Search Console, mayo de 2024

    Uso de un servicio de monitoreo de usuarios reales (RUM)

    Google no informar谩 los datos de Core Web Vitals para cada p谩gina de su sitio web y solo proporciona mediciones sin procesar sin ning煤n detalle para ayudarlo a comprender y solucionar los problemas. Para conseguirlo puedes utilizar un herramienta de monitoreo de usuarios reales como DebugBear.

    El monitoreo de usuarios reales funciona instalando un fragmento de an谩lisis en su sitio web que mide qu茅 tan r谩pido es su sitio web para sus visitantes. Una vez configurado, tendr谩 acceso a un panel de Interacci贸n con Next Paint como este:

    馃摲 1716365005 276 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla del panel de interacci贸n de DebugBear con Next Paint, mayo de 2024

    Puede identificar las p谩ginas que desea optimizar en la lista, pasar el cursor sobre la URL y hacer clic en el icono del embudo para ver los datos de esa p谩gina espec铆fica 煤nicamente.

    馃摲 1716365005 123 Optimizacion de la interaccion con la siguiente pintura una guiaImagen creada por DebugBear, mayo de 2024

    2. Descubra qu茅 elementos las interacciones son lentas

    Diferentes visitantes de la misma p谩gina tendr谩n diferentes experiencias. Mucho de eso depende de c贸mo interact煤an con la p谩gina: si hacen clic en una imagen de fondo, no hay riesgo de que la p谩gina se congele repentinamente, pero si hacen clic en un bot贸n que inicia un procesamiento pesado, entonces es m谩s probable. Y los usuarios en ese segundo escenario experimentar谩n un INP mucho mayor.

    Para ayudar con eso, los datos de RUM proporcionan un desglose de los elementos de la p谩gina con los que interactuaron los usuarios y la magnitud de los retrasos en la interacci贸n.

    馃摲 1716365005 448 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla de la vista Elementos INP de DebugBear, mayo de 2024

    La captura de pantalla anterior muestra diferentes interacciones INP ordenadas seg煤n la frecuencia de estas interacciones de los usuarios. Para que las optimizaciones sean lo m谩s f谩ciles posible, deber谩 centrarse en una interacci贸n lenta que afecte a muchos usuarios.

    En DebugBear, puede hacer clic en el elemento de la p谩gina para agregarlo a sus filtros y continuar su investigaci贸n.

    3. Identifique qu茅 componente INP contribuye m谩s a las interacciones lentas

    Los retrasos del INP se pueden dividir en tres componentes diferentes:

    • Retraso de entrada: c贸digo de fondo que bloquea el procesamiento de la interacci贸n.
    • Tiempo de procesamiento: el tiempo dedicado a manejar directamente la interacci贸n.
    • Retraso de presentaci贸n: muestra las actualizaciones visuales en la pantalla.

    Debe centrarse en qu茅 componente del INP es el que m谩s contribuye al tiempo lento del INP y asegurarse de tenerlo en cuenta durante su investigaci贸n.

    馃摲 1716365005 644 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla de los componentes INP de DebugBear, mayo de 2024

    En este escenario, el tiempo de procesamiento es el mayor contribuyente al lento tiempo de INP para el conjunto de p谩ginas que est谩 viendo, pero es necesario profundizar m谩s para comprender por qu茅.

    Un tiempo de procesamiento elevado indica que hay c贸digo que intercepta la interacci贸n del usuario y ejecuta c贸digo de rendimiento lento. Si, en cambio, vio un retraso de entrada alto, eso sugiere que hay tareas en segundo plano que bloquean el procesamiento de la interacci贸n, por ejemplo, debido a scripts de terceros.

    4. Compruebe qu茅 scripts contribuyen a ralentizar el INP

    A veces, los navegadores informan de secuencias de comandos espec铆ficas que contribuyen a una interacci贸n lenta. Es probable que su sitio web contenga scripts propios y de terceros, los cuales pueden contribuir a ralentizar los tiempos de INP.

    Una herramienta RUM como DebugBear puede recopilar y mostrar estos datos. Lo principal que debe observar es si ve principalmente el c贸digo de su propio sitio web o el c贸digo de terceros.

    馃摲 1716365005 748 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla de la agrupaci贸n de dominios de script primario INP en DebugBear, mayo de 2024

    Consejo: Cuando ve un script o una funci贸n de c贸digo fuente marcada como 芦N/A禄, esto puede indicar que el script proviene de un origen diferente y tiene restricciones de seguridad adicionales que impiden que las herramientas RUM capturen informaci贸n m谩s detallada.

    Esto ahora comienza a contar una historia: parece que los an谩lisis y los scripts de terceros son los que m谩s contribuyen a los tiempos lentos del INP.

    5. Identifique por qu茅 se ejecutan esos scripts

    En este punto, ahora tiene una fuerte sospecha de que la mayor parte del retraso de INP, al menos en las p谩ginas y elementos que est谩 viendo, se debe a scripts de terceros. Pero, 驴c贸mo se puede saber si se trata de guiones de seguimiento generales o si realmente desempe帽an un papel en el manejo de la interacci贸n?

    DebugBear ofrece un desglose que ayuda a ver por qu茅 se est谩 ejecutando el c贸digo, denominado desglose del invocador de script primario INP. Eso es un poco complicado: m煤ltiples guiones diferentes pueden estar involucrados en ralentizar una interacci贸n, y aqu铆 solo ves el mayor contribuyente. El 芦Invoker禄 es solo un valor que el navegador informa sobre lo que caus贸 la ejecuci贸n de este c贸digo.

    馃摲 1716365006 224 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla de la agrupaci贸n de invocadores de scripts principales de INP en DebugBear, mayo de 2024

    Los siguientes nombres de invocadores son ejemplos de ancho de p谩gina. controladores de eventos:

    • al hacer clic
    • con el mouse abajo
    • puntero

    Puede verlos mucho en la captura de pantalla anterior, que le indica que el script de an谩lisis rastrea los clics en cualquier parte de la p谩gina.

    Por el contrario, si ve nombres de invocadores como estos que indicar铆an controladores de eventos para un elemento espec铆fico en la p谩gina:

    • .load_more.onclick
    • #logo.al hacer clic

    6. Revisar vistas de p谩ginas espec铆ficas

    Muchos de los datos que has visto hasta ahora est谩n agregados. Ahora es el momento de observar los eventos INP individuales para llegar a una conclusi贸n definitiva sobre lo que est谩 causando el INP lento en este ejemplo.

    Las herramientas de monitoreo de usuarios reales como DebugBear generalmente ofrecen una forma de revisar experiencias de usuarios espec铆ficas. Por ejemplo, puedes ver qu茅 navegador utilizaron, qu茅 tan grande es su pantalla y qu茅 elemento condujo a la interacci贸n m谩s lenta.

    馃摲 1716365006 848 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla de una vista de p谩gina en DebugBear Real User Monitoring, mayo de 2024

    Como se mencion贸 anteriormente, m煤ltiples secuencias de comandos pueden contribuir a que el INP sea lento en general. La secci贸n Scripts INP le muestra los scripts que se ejecutaron durante la interacci贸n INP:

    馃摲 1716365006 962 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla del desglose del script DebugBear INP, mayo de 2024

    Puede revisar cada uno de estos scripts con m谩s detalle para comprender por qu茅 se ejecutan y qu茅 hace que tarden m谩s en finalizar.

    7. Utilice DevTools Profiler para obtener m谩s informaci贸n

    Las herramientas de monitoreo de usuarios reales tienen acceso a una gran cantidad de datos, pero por razones de rendimiento y seguridad no pueden acceder ni cerca de todos los datos disponibles. Por eso es una buena idea utilizar tambi茅n Herramientas de desarrollo de Chrome para medir el rendimiento de su p谩gina.

    A depurar INP en DevTools Puedes medir c贸mo el navegador procesa una de las interacciones lentas que has identificado antes. Luego, DevTools le muestra exactamente c贸mo el navegador dedica su tiempo a manejar la interacci贸n.

    馃摲 1716365006 453 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla de un perfil de rendimiento en Chrome DevTools, mayo de 2024

    C贸mo podr铆a resolver este problema

    En este ejemplo, usted o su equipo de desarrollo podr铆an resolver este problema de la siguiente manera:

    • Trabajar con el proveedor de secuencias de comandos de terceros para optimizar su secuencia de comandos.
    • Eliminar el script si no es esencial para el sitio web o buscar un proveedor alternativo.
    • Ajustar c贸mo interact煤a su propio c贸digo con el script

    C贸mo investigar un retraso de entrada elevado

    En el ejemplo anterior, la mayor parte del tiempo de INP se dedic贸 a ejecutar c贸digo en respuesta a la interacci贸n. Pero a menudo el navegador ya est谩 ocupado ejecutando otro c贸digo cuando ocurre una interacci贸n del usuario. Al investigar los componentes INP, ver谩 un valor de retardo de entrada alto.

    Esto puede suceder por varias razones, por ejemplo:

    • El usuario interactu贸 con el sitio web mientras a煤n se estaba cargando.
    • Se est谩 ejecutando una tarea programada en la p谩gina, por ejemplo, una animaci贸n en curso.
    • La p谩gina se est谩 cargando y mostrando contenido nuevo.

    Para comprender lo que est谩 sucediendo, puede revisar el nombre del invocador y la secci贸n de scripts INP de las experiencias de usuario individuales.

    馃摲 1716365006 32 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla del desglose del componente INP en DebugBear, mayo de 2024

    En esta captura de pantalla, puede ver que un temporizador ejecuta un c贸digo que coincide con el inicio de la interacci贸n del usuario.

    El script se puede abrir para revelar el c贸digo exacto que se ejecuta:

    馃摲 1716365006 241 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla de los detalles del script INP en DebugBear, mayo de 2024

    El c贸digo fuente que se muestra en la captura de pantalla anterior proviene de un script de seguimiento de usuarios de terceros que se ejecuta en la p谩gina.

    En esta etapa, usted y su equipo de desarrollo pueden continuar con el flujo de trabajo INP presentado anteriormente en este art铆culo. Por ejemplo, depurar con DevTools del navegador o ponerse en contacto con el proveedor externo para obtener asistencia.

    C贸mo investigar un retraso elevado en la presentaci贸n

    El retraso en la presentaci贸n tiende a ser m谩s dif铆cil de depurar que el retraso en la entrada o el tiempo de procesamiento. A menudo es causado por el comportamiento del navegador m谩s que por un script espec铆fico. Pero como antes, a煤n debes comenzar identificando una p谩gina espec铆fica y una interacci贸n espec铆fica.

    Puede ver un ejemplo de interacci贸n con un alto retraso de presentaci贸n aqu铆:

    馃摲 1716365006 312 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla de una interacci贸n con un gran retraso en la presentaci贸n, mayo de 2024

    Ver谩 que esto sucede cuando el usuario ingresa texto en un campo de formulario. En este ejemplo, muchos visitantes pegaron grandes cantidades de texto que el navegador tuvo que procesar.

    Aqu铆 la soluci贸n fue retrasar el procesamiento, mostrar un mensaje 芦Esperando…禄 al usuario y luego completar el procesamiento m谩s adelante. Puedes ver c贸mo mejora el puntaje del INP a partir del 3 de mayo:

    馃摲 1716365006 497 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla de una l铆nea de tiempo de interacci贸n con Next Paint en DebugBear, mayo de 2024

    Obtenga los datos que necesita para mejorar la interacci贸n con la siguiente pintura

    Configurar un monitoreo de usuarios real lo ayuda a comprender c贸mo los usuarios experimentan su sitio web y qu茅 puede hacer para mejorarlo. Pruebe DebugBear ahora registr谩ndose para una prueba gratuita de 14 d铆as.

    馃摲 1716365006 966 Optimizacion de la interaccion con la siguiente pintura una guiaCaptura de pantalla del panel de DebugBear Core Web Vitals, mayo de 2024

    Los datos CrUX de Google se agregan durante un per铆odo de 28 d铆as, lo que significa que pasar谩 un tiempo antes de que notes una regresi贸n. Con el monitoreo de usuarios reales, puede ver el impacto de los cambios en el sitio web de inmediato y recibir alertas autom谩ticamente cuando haya un cambio importante.

    DebugBear monitorea datos de laboratorio, datos de CrUX y datos de usuarios reales. De esa manera, tendr谩 todos los datos que necesita para optimizar sus Core Web Vitals en un solo lugar.

    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? Matricularse en Depurar oso y obtenga los datos que necesita para ofrecer excelentes experiencias de usuario.

    Cr茅ditos de imagen

    Imagen destacada: Imagen de Redesign.co. Usado con permiso.

    Fuente: Optimizaci贸n de la interacci贸n con la siguiente pintura: una gu铆a paso a paso

    Populares

    M谩s de esta categor铆a

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aqu铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.