homefinance blog
Te preguntas cuál es el momento de interactuar y cómo afecta la velocidad de su sitio de WordPress. Luego continúe leyendo porque todos queremos un sitio web con el que interactúe de manera rápida y fácil. Nada es más frustrante que hacer clic en algún lugar de la página y no obtener resultados de nuestra acción, ¿verdad? Para asegurarse de que su sitio proporcione una experiencia de usuario excepcional, hay algunos valores de los que debe cuidar, y TTI es uno de ellos. Como medida centrada en el usuario, el tiempo de interactivo posee el 10% de la puntuación de rendimiento global calculada por Lighthouse. Puede que no sea la medida más influyente para el puntaje final, pero la frustración experimentada por el usuario puede hacer que salga de su página, o peor aún: ¡salga de su sitio!
Explicaremos qué es el momento de interactuar, por qué es importante, qué herramientas pueden medir y qué afecta su puntaje. También compartiremos algunos consejos técnicos para remediar un tiempo para notas interactivas (TTI más de 3.8 segundos). Finalmente, le mostraremos cómo mejorar su puntaje general de rendimiento y asegurarnos de que su sitio web no parezca dañado. ¿Qué significa el tiempo para interactivos (TTI) en Lighthouse? Es hora de medidas interactivas qué tan rápido los visitantes son capaces de interactuar completamente con su página. Es un valor de laboratorio significativo para evaluar la capacidad de carga, que afecta directamente cómo los usuarios perciben el rendimiento y la interacción.
El valor de TTI mide el momento en que la página comienza a cargarse hasta que sus subsurbios principales se hayan cargado y puedan responder rápidamente a la acción de un usuario. En resumen, TTI mide la rapidez con que una página puede ejecutar cualquier código JavaScript para que los componentes respondan rápidamente a la acción de cualquier usuario. Le ayuda a identificar qué página parece interactiva. Para explicar con un ejemplo. Un usuario puede ver un botón de urgencia en la pantalla. Intente hacer clic en él, pero no pasa nada: el elemento no se puede hacer clic. Frustrante, ¿verdad? El valor de TTI lo ayuda a identificar aquellas páginas que parecen interactivas, pero de hecho no lo son. Va de la mano con el tiempo total de bloqueo, porque juntas, proporciona información sobre la receptividad de su página a la acción de un usuario. TD> una página se considera completamente interactivo cuando: – La página muestra contenido útil, que se mide por First Paint – Los gerentes de eventos están registrados para los elementos más visibles de la página – la página responde a las interacciones del usuario en 3.8 segundos.
Lighthouse es una herramienta automatizada y de código abierto que ayuda a los desarrolladores a mejorar la calidad de las páginas web. Crea auditorías para velocidad, rendimiento, accesibilidad, UX y optimización para motores de búsqueda (SEO). Para proporcionar a los usuarios una experiencia excelente, los sitios deben esforzarse por tener un puntaje entre 90 y 100.
Puntuación de rendimiento realizada por Lighthouse, incluido TTI – PSI Short, un TTI rápido ayuda a asegurarse de que la página sea utilizable. Lighthouse V8 combina seis valores para generar la puntuación de rendimiento final, incluidos los vitales de la web de núcleo, el índice de velocidad, el tiempo de interactivo y el tiempo de bloqueo total:
<
<
Cómo medir su tiempo de interacción para definir su puntaje TTI, debe medir el tiempo desde el momento en que la página comienza a cargarse hasta que haya presentado visualmente los scripts iniciales y pueda responder rápidamente a la entrada del usuario.
Lighthouse sigue cuatro pasos para medir TTI:
Comience desde primero la pintura contentful (cuando se reproducen los primeros elementos de texto y imagen en la pantalla).
Busque adelante a tiempo para una ventana silenciosa de al menos cinco segundos (ventana silenciosa = sin embarazos largos y no más de dos en la red durante el vuelo) Mire hacia atrás el último embarazo largo antes de la ventana silenciosa, deteniéndose en FCP si no hay tareas largas. se encuentran.
TTI es el final del último embarazo largo antes de la ventana silenciosa (si no se encuentran cargas largas, es el mismo valor que FCP).
Puede ver los cuatro pasos debido al diagrama a continuación:
Explicación de cómo se calcula TTI – Fuente: WebDev – ¿Tiene herramientas para medir automáticamente TTI? Puede usar dos herramientas diferentes para medir su TTI y su rendimiento utilizando la tecnología Lighthouse.
Uso de Google PageSpeed Insight (PSI) para medir el valor TTI:
Tiempo de interactivo – PSI
Uso de GTMetrix para obtener la nota TTI:
Tiempo de interactivo: Gtmetrix ambas herramientas ofrecen una puntuación TTI, pero como puede ver, los números, en el área verde, son ligeramente diferentes:
Puntuación de TTI (PSI): 0.8 s
TTI Score (GT Manux): 1.2 s
Esto se debe principalmente a varios factores, incluida la metodología de prueba del faro, la ubicación de la prueba, etc.
Verde: 0-3,8 (bueno)
Naranja: 3,8-7,3 (requiere mejora)
Rojo: 7.3 (débil)
Puntaje aceptable TTI – Web.dev El tiempo de interacción a menudo se compara con el valor de entrada del primer retraso de entrada (FID). En la siguiente parte, explicaremos por qué. ¿Es el primer retraso de entrada (FID) el mismo con el tiempo de interacción (TTI)? FID y TTI miden el nivel de interactividad de su página web. Sin embargo, además de este punto común, encontramos algunas diferencias:
TTI mide cuánto tiempo dura una página para estar preparado para responder a la entrada del usuario, mientras que FID mide cuán receptiva es su página cuando los usuarios reales están tratando de interactuar con ella.
TTI se puede calcular con datos de laboratorio (sin usuarios del mundo real), pero el primer retraso de entrada (FID) es solo una medida en el campo, lo que requiere usuarios reales. El cálculo de FID no se puede realizar en un entorno de laboratorio. Esta forma de datos solo se puede recopilar de usuarios reales. El primer retraso de entrada le permite capturar esas interacciones tempranas y críticas:
Explicado Fid-Tti
FID, que requiere el cálculo de los usuarios en el mundo real, es una medición de vital web central que mide lo que sucede cuando alguien interactúa con la página, como se muestra a continuación:
El valor de FID: desde la entrada del usuario hasta el tiempo de respuesta del navegador
| En conclusión: tanto TTI como FID miden la interactividad. Los valores capturan la primera impresión del usuario sobre la interactividad y la capacidad de respuesta de un sitio. TTI se puede calcular sin usuarios en el mundo real, mientras que FID no puede. Como se ha visto anteriormente, un TTI alto puede crear una experiencia frustrante para el usuario: el usuario cree que el sitio está completamente preparado, pero cuando intenta hacer clic en algún lugar, no pasa nada. Veamos un ejemplo real para TTI (en naranja a continuación). Como puede ver, marque una página como completamente interactiva si el hilo principal estaba libre de embarazos largos durante aproximadamente 4-5 segundos: Explicación de la fuente de interactividad: Dev.To Herramientas como PageSpeed Insights realmente no les gusta esto y no dudará en penalizar su sitio al reducir la nota de rendimiento. El peso de TTI en la puntuación del faro en el puntaje de rendimiento del faro V8, el peso de TTI se ha reducido del 15% al 10%. Lighthouse Scoring Computer V8 (incluido TTI) – Web. ¿Por qué tal cambio? Web.dev explica que responde directamente a los comentarios de los usuarios e “incoherers en las optimizaciones de las métricas que conducen a mejoras en la experiencia del usuario”.  “TTI sigue siendo una señal útil cuando una página es completamente interactiva, sin embargo, con TBT como un complemento: la variabilidad se reduce. Con este cambio de puntaje, esperamos que los desarrolladores sean más efectivos para optimizar la interactividad de los usuarios “. Fuente: Web.dev TTI mide cuánto tiempo lleva su página para estar preparado para la interacción: cuánto tiempo se bloquea el hilo JS principal y qué tan pronto tendría la capacidad de hacer frente a la acción de un usuario. Es un valor de laboratorio importante porque define si su página es utilizable o no. Antes de darle recomendaciones de actuación para mantenerlo por debajo de 3.8 s, debemos definir qué causa una mala puntuación. ¿Qué afecta el tiempo de interacción? Veamos qué tiempo puede causar una puntuación interactiva con la sección de diagnóstico de Google PageSpeed Insights. En general, tenemos cuatro problemas que contribuyen a una mala nota TTI, a saber:  Javascript y JS no utilizado JS Tiempo de ejecución de JavaScript  Trabajar en el hilo principal  Código de tercera parte Debido a las secciones de “oportunidades” y “diagnóstico” en el informe del faro, puede usar algunos consejos para mejorar su nota de rendimiento general. Las oportunidades y la sección de diagnóstico – Informe PSI de origen muestra cuánto impacto tiene cada error en sus economías estimadas; Resolverlos mejorará drásticamente su experiencia de usuario. Hemos enumerado algunas recomendaciones de PSI si necesita mejorar su puntaje TTI: Eliminar los recursos que bloquean la representación Minimizar el trabajo con el hilo principal Reducir el tiempo de ejecución de JavaScript Eliminar js sin usar Reducir el impacto del tercer código parcial Evite encadenar solicitudes críticas  Precarga las solicitudes de clave Mantenga el número de solicitudes bajas y pequeñas dimensiones de transferencia Reducir los tiempos de respuesta del servidor | |
| Alerta de spoiler: ¡Puede optimizar su puntaje TTI usando el complemento de cohetes WP! Para interactuar optimizando sus archivos JS (incluido el código de terceros). Cualquier tipo de buenas medidas para la ejecución de JS probablemente mejorará TTI . Siempre concéntrese en el pedido y las preferencias de carga de sus recursos y el número y el tamaño de las solicitudes. Hay ocho optimizaciones de rendimiento que recomendamos para implementar si desea corregir el tiempo para interactuar y mejorar la velocidad general de su sitio de WordPress. Posponse js Retrasar js y reducir js sin usar Minimiza JS y CSS Optimizar la entrega de CSS y reducir el CSS no utilizado Reducir TTFB Tomar las aplicaciones DNS Fuentes de precarga Mejorar TTI en el móvil 1. Pospone a JS para posponer los archivos JS significa que se cargarán solo después de que el navegador haya mostrado el contenido más importante. El objetivo es hacer que su página se cargue más rápido, dando prioridad al contenido que desea mostrar primero. Reducirá el tiempo dedicado a analizar, compilar y ejecutar archivos JS, lo que ayudará a mejorar el TTI. Ejemplos JS no esenciales que generalmente se pueden posponer: intercambio social, cookies, etc. Problemas identificados por Lighthouse: “Elimine los recursos que bloquean la representación”, “Reduzca el JavaScript no utilizado” y “evite encadenar las solicitudes críticas”. Una solución manual: usando el atributo de diferir: cuando intenta posponer JS, puede usar el atributo booleano “diferir” Cómo funciona el atributo – Fuente: JavaScript.Plainenglish Solución para complementos de WordPress: Limpieza de activos: este complemento gratuito escanea y detecta el contenido que se cargará en la página con prioridad. Todo lo que tiene que hacer es seleccionar el código CSS o JS que no debe representarse primero. Nota: el autor del complemento recomienda usar la limpieza de activos con un caché como WP Rocket para obtener los mejores resultados de rendimiento Async JS: Async JavaScript le brinda control total sobre las Escrituras para agregar un atributo de “aplazamiento” para ayudar a aumentar el rendimiento de su sitio de WordPress. WP Rocket tiene la opción de posponer el análisis de JavaScript y posponer los archivos JS WordPress, como se muestra a continuación: Cargue la función JS de aplazamiento – Fuente: WP Rocket Dashboard. 2. Retrasar JS y reducir JS no utilizado retrasando la ejecución de JS y eliminando o reduciendo JS no utilizados, mejorará su rendimiento y puntaje TTI. La idea principal es retrasar la carga de todos los archivos JS hasta que ocurra una interacción del usuario, como hacer clic en un botón o ejecutar hasta el final de la página. Un buen punto de partida es verificar su gráfico de cascada Gtmetrix para ver a dónde se carga JavaScript. Puede obtener el mismo diagnóstico usando PSI. Una vez que realice la auditoría, podrá determinar si el JS “malo” proviene de su código o una aplicación de tercera parte. Problemas identificados por Lighthouse: “Evite encadenar las solicitudes críticas” y “reducir el JavaScript no utilizado”. Soluciones manuales: la forma manual de crear un retraso en JS es usar el método setTimeOut (). Esto llamará a una función después del tiempo que especifique en MS. Puede usar esos fragmentos de código muy útiles para retrasar las funciones JS. La eliminación manual de JS no utilizada puede ser peligrosa para su sitio web. Si elimina un espacio u otro soporte, las cosas pueden volverse bastante feas. Si no es un desarrollador avanzado, no recomendaría hacer un manual de este tipo. Use un complemento de WordPress: Scripts de vuelo: un complemento para retrasar JS y proporcionar recursos de archivo JS más críticos. Ayuda a la priorización.  Organizador de complementos: cambie el orden en el que se cargan los complementos (le ayuda a priorizar el contenido a representar primero). WP Meteor: un complemento para posponer los scripts JS y ha mejorado enormemente la velocidad percibida por los visitantes (muy importante para la experiencia del usuario). Gonzales: permite la desactivación condicional de CSS, JS e incluso complementos, dependiendo de la página que visite. Limpieza de activos (consulte la sección anterior). Perfmatters: le permite deshabilitar complementos en todas partes, excepto páginas y publicaciones.  Ejemplo: eliminación del elemento JS no utilizado con perfmatteras Cache WP Rocket Plugin: solución todo en uno. Puede retrasar fácilmente los archivos JavaScript y eliminar (o reducir) JS sin usar con un solo clic. Retrasar la función de ejecución de JavaScript en WP Rocket 3.9 3. Minimiza JS y CSS minimizar el código significa eliminar cualquier trastorno y signos de puntuación innecesarios: nuevas líneas, espacios, etc. Estos elementos pueden ayudarlo a que usted o su desarrollador lean el código, pero también pueden ser responsables de ralentizar su sitio que elimina este código “inútil” de su script liberará el tiempo para que el hilo principal se centre en muchas tareas importantes. Nuevamente, se trata de hacer espacio y tiempo para que el contenido más relevante se presente primero. La pestaña de cobertura de Chrome DevTools puede ayudarlo a encontrar el CSS JavaScript y CSS sin usar: Análisis de cobertura de código: fuente: Instrumentos de desarrollo identificaron problemas identificados por Lighthouse: “Reduzca el tiempo de ejecución de JavaScript”, “Minimice el funcionamiento del hilo principal”, “minificar JS” y “minificar CSS”. Soluciones manuales:  Importancia: haga una copia de seguridad de su sitio o no edite archivos directos JS o CSS en un servidor de producción. Use un editor de texto como texto sublime o código de Visual Studio. Abra el archivo que contiene su código y elimine los comentarios, espacios blancos, nuevas líneas y hendiduras. Recuerde acortar el nombre de la identificación, clase o variables tanto como sea posible y optimizar su declaración condicional. Uso de una herramienta web: Vaya a minifycode.com y haga clic en la pestaña Minifier CSS/JS. Pegue el código CSS/JS en el cuadro de entrada y haga clic en el botón Minify CSS/JS. Herramienta Minifier CSS – Fuente: CSS Minifier Utilice un complemento de WordPress para reducir CSS y JS:  Compilador de cierre de Google (JS) Uglifyjs (JS)  Autocomposición de complementos (CSS y JS)  Instrumento de compresor YUI (CSS y JS) WP Super Minify (CSS y JS) CSS Nano (CSS) CSSO (CSS) UNCSS (CSS) WP Rocket le permite reducir los archivos JS y CSS en unos pocos clics. Función de reducción del archivo JavaScript – Dashboard WP Rocket.  Función de reducción de archivos CSS – WP Rocket 4. Optimizar la entrega de CSS y reducir el CSS no utilizado antes de que el navegador pueda reproducir el contenido, debe procesar toda la información de estilo y apariencia. En otras palabras, el navegador debe entregar CSS, pero esta acción podría bloquear el hilo principal para administrar otras tareas y procesos importantes. Por lo tanto, para mantener un buen rendimiento, es esencial realizar dos tareas: Optimizar cómo se entrega su CSS Eliminar todos los CSS no utilizados Problemas identificados por el faro: “Reduzca el trabajo en el hilo principal” y “Reduzca CSS sin usar”. Soluciones manuales para optimizar la entrega de CSS: Combine, comprime y alinee sus Escrituras CS. Priorice las reglas de CSS: ¡la página de contenido anterior está en primer lugar! Evite usar etiquetas de estilo en el cuerpo HTML. Soluciones manuales para eliminar o reducir el CSS no utilizado: Necesitará algunos conocimientos técnicos para realizar esta acción y tenga cuidado de no romper su página. Si desea eliminar por completo CSS no utilizado, use una herramienta como PurifyCSS para averiguar cuánto se pueden reducir sus archivos CSS. La desventaja es que una vez que se identifica el CSS eliminado, debe eliminarlo manualmente de la página. Complementos de WordPress para optimizar la entrega de CSS y eliminar el CSS no utilizado: Acelera: optimiza la entrega de CSS Cargue la hoja de estilo en modo asíncrono y mejora los tiempos de carga de la página.  AutOptimize incluye opciones para la integración de CSS y el aplazamiento y la optimización de CSS  La limpieza de activos ayuda a reducir el CSS no utilizado El complemento WP Rocket Cache le permite optimizar la entrega de CSS eliminando (o reduciendo) el CSS no utilizado en unos pocos directamente desde el “menú de optimización de archivos”: Elimine el cohete CSS no utilizado: WP Rocket Si esta función no funciona para usted, siempre puede activar CSS asincron y completar el trabajo. 5. Reduzca el tiempo y el tiempo de respuesta del servidor al primer byte (TTFB) Si desea que su puntaje TTI se mantenga bajo, el servidor debe ser rápido. Para reducir el tiempo de respuesta del servidor, puede usar los métodos a continuación: Optar por un proveedor de alojamiento rápido y eficiente Use un servicio CDN (tener un CDN rápido en todo el mundo proporcionará una entrega de contenido más rápida) Use la memorización en caché avanzado. Compresión de compresión GZIP Optimizar su base de datos Use la última versión de PHP Problema identificado por Lighthouse: “Reduzca el tiempo de respuesta inicial”. Use un complemento de caché avanzado y CDN: El complemento WP Rocket Cache y RocketCDN lo ayudará a reducir la puntuación TTI. Panel de cohete WP Activar compresión GZIP Use el complemento de compresión GZIP. WP Rocket activa automáticamente la función GZIP. Optimizar su base de datos  Use WP Rocket para limpiar su base de datos sin destruir las cosas. Optimice la base de datos: el WP Rocket 6. Databoard 6. Tome las solicitudes DNS Si tiene un tercer código de pieza en su sitio, como un video alojado Vimeo o algunas fuentes de Google, debe tomar la solicitud DNS. Hará que su sitio sea más rápido, SS minimiza el tiempo de carga y los recursos en otro sitio. La idea principal es usar preconnect para hacer conexiones tempranas con scripts de tercera parte, en lugar de esperar hasta que lo soliciten. Problemas identificados por Lighthouse: “Reduzca el tiempo de respuesta inicial del servidor”, “minifica el uso por terceros” y “preconcebido a los orígenes necesarios”. Solución manual: Use “rel = dns-prefetch” en la sección del encabezado. Puede especificar el dominio para que el navegador elogie: ! Plugin Perfmatters tiene la opción de preliminar Take -Over DNS: DNS – Opción de complemento de complemento de WordPress de complemento El complemento WP Rocket también tiene una sección “solicitudes de DNS previas” en el tablero de WordPress: ADN solicita DNS – WP Rocket. Una fuente personalizada es una parte esencial de su marca, por lo que es muy importante mostrarla en su sitio web. Sin embargo, hay algunas buenas prácticas para la fuente de red previa para evitar problemas de rendimiento. Aquí hay tres consejos que puede considerar: use el formato de fuente correcto (Woff y Woff2). Precarga las fuentes (como se explica en la sección a continuación).  Use la declaración de fuente correcta (la familia de fuentes correctas). Problema identificado por Lighthouse: “solicitudes clave de precarga”. Solución manual: Dígale al navegador que precarga la fuente usando la etiqueta y los atributos rel = “preload”: ejemplo: ¿Dónde poner la etiqueta? Debe insertar esta etiqueta de enlace entre las etiquetas de cabeza HTML para cada CSS, script y archivos de fuentes cargados en el sitio. Usando un complemento de WordPress: Use el cohete WP para precargar las fuentes. Vaya a la pestaña “precarga”, ejecute a “fuentes de precarga” y simplemente especifique las direcciones de URL con fuentes que desea precargar:  PRELOAD FONTS-WP ROCKET 8. Panel. En primer lugar, concéntrese en abordar cualquier problema con JavaScript. Luego aplique todas las recomendaciones de rendimiento enumeradas anteriormente. Recuerde: cuantos más scripts, más largo será el TTI, y esto puede variar de un dispositivo a otro. Tomemos el ejemplo de un teléfono inteligente con un procesador menos potente que una computadora. Un sitio que se carga en este último necesariamente sufrirá el impacto del número de scripts de JavaScript. Las recomendaciones de Google son eliminar o posponer scripts que no son necesarios para la estabilidad y la reproducción del sitio móvil. Por lo tanto, verifique el JavaScript, mantenga el diseño de la versión móvil simple y evite el uso excesivo de elementos pesados, como una diapositiva. Cómo reducir la puntuación TTI con WP Rocket como se ha visto en la parte anterior, la ejecución de JavaScript es el factor más importante que afecta las métricas. Al posponer y posponer JavaScript utilizando WP Rocket, mejorará la velocidad de su sitio de WordPress. Investigamos las características del cohete WP que mejoran la nota TTI. Analizando el impacto del cohete WP en la puntuación TTI usando PSI para mejorar su puntaje TTI, recomendamos usar WP Rocket, el mejor caché de WordPress. Realicé una auditoría de velocidad para un catering francés llamado “Le Point Gourmand …” usando Google PageSpeed Insights. Echemos un vistazo a nuestra puntuación de rendimiento antes y después del cohete WP: | |
| mi puntaje de rendimiento antes de activar WP Rocket | mi puntaje de rendimiento con WP Rocket |
