Cómo reducir su tiempo de bloqueo total (TBT) en su sitio web de WordPress

Te preguntas cuál es el valor total del tiempo de bloqueo y cómo afecta esto el rendimiento de su sitio de WordPress. Usted está en el lugar correcto. Todos amamos sitios que son agradables, fáciles de usar y rápido. Para asegurarse de proporcionar una excelente experiencia para el usuario, hay algunos valores en los que debe centrarse, y TBT es uno de ellos. Más importante aún, como medición de la experiencia del usuario, el tiempo de bloqueo total tiene el 30% del puntaje de rendimiento global calculado por Lighthouse. ¡Esto lo convierte en un valor superior para la optimización! Explicaremos en detalle cuál es el tiempo total de bloqueo, por qué es relevante, cómo medirlo y qué factores afectan su puntaje. También compartiremos algunos consejos sobre cómo remediar una mala nota del tiempo total de bloqueo (TBT superior a 300 ms) para mejorar su puntaje general de rendimiento y disfrutar de sus visitantes.
¿Cuál es el tiempo de bloqueo total (TBT) en Lighthouse? El tiempo total de bloqueo es una medida de rendimiento importante que mide la capacidad de cargar su sitio de WordPress. Es la suma de todos los períodos de tiempo entre la primera pintura Contentul (FCP) y el tiempo de interactiva (TTI) cuando la duración de un embarazo excede los 50 ms. El puntaje siempre se expresa en milisegundos. Es importante para el 30% de la nota de rendimiento total hecha por Lighthouse.

Lighthouse es una herramienta automática de código abierto, que ayuda a los desarrolladores a mejorar la calidad de las páginas web. El instrumento considera 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 total de interactivo y el tiempo de bloqueo total:

<

Si necesita ayuda para realizar la auditoría de su sitio web, le recomendamos que siga nuestra guía completa Eso explica cómo mejorar su puntaje de rendimiento del faro. Cómo medir el tiempo de bloqueo total Puede medir la puntuación TBT calculando el tiempo total en el que una página no está bloqueada para responder a la acción de un usuario. El total se calcula agregando el tiempo de bloqueo de todas las tareas largas entre la primera pintura (FCP) y el tiempo de interactiva (TTI). Liméntame para explicarme mejor. Cada navegador tiene un proceso que convierte el código en una página web. Esta acción de procesar todo el código y los estilos debe ser efectiva porque queremos que nuestra página se presente lo antes posible para el visitante. (Tenga en cuenta que queremos causar una buena impresión y mostrarle al usuario lo rápido que es nuestro sitio!) El navegador tiene muchas tareas que completar hasta que pueda reproducir la página, como analizar el script HTML, construir la estructura y el contenido de una web Página (DOM) y la ejecución del código CSS y JS. (Eso es mucho que hacer, ¿verdad?)
Para evitar un largo tiempo de bloqueo, el navegador no debe cumplir con los archivos JS y CSS al analizar el código y reproduce la página. Para mantener el trabajo de su sitio rápidamente, debemos “decir” el navegador lo que queremos dar prioridad y lo que queremos cargar primero. Comprender los embarazos largos si las tareas funcionan más de 50 ms, se llama un embarazo largo y se considera “bloqueado”. En tal caso, su página ya no responde a las entradas del usuario, como clics, presionado de teclado, clics del mouse, etc. El cálculo del tiempo de bloqueo total se basa en esas tareas largas. Una tarea larga monopoliza significativamente el navegador web (> 50 milisegundos) y bloquea el rendimiento de otras tareas esenciales (como la reacción a las acciones del usuario con un clic del mouse). El hilo principal se considera “bloqueado” cada vez que hay una tarea larga. La computadora registra este intervalo para cada aplicación como un tiempo de bloqueo individual. La suma de todos los tiempos de bloqueo individuales se llama un tiempo de bloqueo total. Veamos un ejemplo. Cada vez que Lighthouse detecta una tarea larga (> 50 ms), entonces medirá la duración del bloqueo:
Tiempo de bloqueo total: por ejemplo, como puede ver, el tiempo de bloqueo total es una cantidad calculada al agregar la parte “bloqueo” de diferentes tareas largas. La porción de bloqueo de un embarazo largo es la parte de su duración de más de 50 ms (en rojo en nuestra tabla). Veamos el desglose de otra tarea para identificar TBT:
La cronología a continuación tiene cinco tareas, y tres son tareas largas (duración> 50 ms):

Cronología del hilo principal (duración de las tareas) – web.dev
El siguiente gráfico muestra el tiempo de bloqueo para cada una de las cargas largas, respectivamente 200 ms, 40 ms y 105 ms (total: 345 ms): identificación del tiempo de bloqueo para cada carga larga (TBT) – web.dev

2 herramientas para medir el tiempo de bloqueo total recomendamos dos herramientas diferentes Para medir su TBT y su rendimiento utilizando la tecnología del faro.

Google PageSpeed ​​Insight (PSI):
Gtmetrix:

Ambas herramientas ofrecen una puntuación TBT, pero los números son ligeramente diferentes, como probablemente note. Esto se debe principalmente a varios factores, incluida la implementación del faro, la metodología de prueba, la ubicación de la prueba, etc. Sitio de WordPress y medición de resultados. Siempre debe esforzarse por tener un TBT de 300 ms para garantizar una buena experiencia de usuario. Su puntaje TBT es simplemente una comparación de la hora de TBT de su página y tiempos de TBT de miles de sitios de alto rango cuando se carga en dispositivos móviles o de escritorio.
El puntaje se clasifica de la siguiente manera:

Verde: 0-300 ms (rápido)

Naranja: 300-600 ms (moderado)
Rojo: 600+ms (lento) TBT – Web. Veamos por qué. ¿Cuál es la diferencia entre el tiempo de bloqueo total y el retraso en la primera introducción? Si bien el tiempo de bloqueo total se puede calcular sin usuarios del mundo real, el primer retraso (FID) es solo una medida en el campo, lo que requiere usuarios reales para los cálculos. El cálculo de FID no puede simularse en un entorno de laboratorio. Esta forma de datos proviene de varias fuentes, como las experiencias en el usuario Chrome (Crux), donde los datos recopilados provienen de usuarios del mundo real.
Cuando su sitio web no tiene suficientes datos “reales” para calcular la puntuación FID, la alternativa es observar el valor de TBT, medido en la sección de datos de laboratorio. Los datos de laboratorio tienen datos artificiales y recopilados de un solo dispositivo basado en un conjunto fijo de condiciones de red. De una manera diferente, tanto TBT como FID miden la interactividad y captura la primera impresión del usuario sobre la interactividad y la capacidad de respuesta de un sitio. Por ejemplo, GTMetrix prueba TBT en lugar de FID, ya que diagnostica casi las mismas optimizaciones con los proxies apropiados:
Gtmetrix considera TBT como una web vital en lugar de FID – Fuente: GTMetrix al optimizar el tiempo de bloqueo total, también mejorará la primera puntuación de retraso de entrada, uno de los valores de vital de la web central: existe una correlación positiva entre ellos. Por supuesto, lo contrario es cierto. Si mantiene FID por debajo de 100 ms, está en una excelente forma:
FID – Web.dev obtiene ¿Cuál es la diferencia entre el tiempo total de bloqueo y el tiempo de interacción? La principal diferencia es que el tiempo para medidas interactivas cuánto tiempo lleva una página para ser completamente interactiva, mientras que el tiempo de bloqueo total le dice qué tareas JS duró más para realizar. El tiempo de interactivo es otro valor que tiene que ver con la interactividad de su página es uno de los seis valores perseguidos en el informe del faro para medir el rendimiento de su sitio. La medición TTI es vital, ya que algunos sitios se centran en la visibilidad del contenido en El detrimento de la interactividad real. Esto puede crear una experiencia frustrante para el usuario: el usuario cree que el sitio está listo, pero cuando intenta hacer clic en algún lugar, no sucede nada. Estaba libre de largos embarazos durante aproximadamente 5 segundos. Aquí hay una prueba para ti. En la siguiente imagen, ¿cuando sientes que podrías interactuar? ¿Cuando el botón azul se vuelve “accesible” en tu mente?

Explicación e interactividad de TTI – Fuente: Dev. Para esforzarse por tener un tiempo para interactivos durante menos de 5 segundos para garantizar una buena experiencia de usuario. ¿Cuál es el impacto del tiempo total de bloqueo en el rendimiento? Para comprender el impacto de TBT en el rendimiento, debemos revelarlo una vez más en la puntuación del faro. Como valor de la experiencia del usuario, TBT ahora tiene hasta el 30% del puntaje de rendimiento global. TBT no existía en el Lighthouse V5, pero ahora representa el 30% de la nota total en el faro V8. TBT mide el tiempo total en el que su página web ha sido completamente bloqueada, evitando que el usuario interactúe con las secciones de su página es un valor importante de laboratorio, ya que define si su página es utilizable o no. Hay algunos principios básicos a seguir para mantenerlo por debajo de 300 ms, pero primero, echemos un vistazo a las causas de un mal TBT. ¿Qué causa un tiempo de bloqueo totalmente alto? Hay cuatro razones que determinan una puntuación TBT de 300 ms más larga, a saber: un código JavaScript desordenado y JS no utilizado
Alto tiempo de ejecución js

Un trabajo alto de hilo principal

Uso intenso de un tercer código de pieza
Acceder a la sección de oportunidades y diagnosticar el informe del faro lo ayudará a determinar qué soluciones puede implementar:

Oportunidades y sección de diagnóstico: fuente de PSI El informe muestra cuánto impacto tiene cada error en sus economías estimadas; Resolverlos mejorará drásticamente TBT y el rendimiento de su sitio. Aquí está la lista de inserciones de PageSpeed ​​para abordar si desea mejorar su puntaje TBT:
Eliminar (o reducir) JavaScript sin usar
Reducir el tiempo de ejecución de JavaScript CSS y JS
Eliminar los recursos que bloquean la representación
Reducir el impacto del código de terceros
Activar la compresión de texto

Evite encadenar solicitudes críticas
Evite enormes cargas de red
Minimizar el trabajo con el hilo principal
(Alerta de spoiler: ¡La mayoría de las optimizaciones de TBT se pueden hacer utilizando el complemento de cohetes WP!) Cómo reducir el tiempo de bloqueo total de más de 300 ms en su sitio de WordPress para arreglar su puntaje TBT de 300 ms que debe centrarse en el pedido y las preferencias de carga de sus recursos, así como el número y el tamaño de las solicitudes. La forma más efectiva de reducir el tiempo de bloqueo total en WordPress es optimizar los archivos de JavaScript (incluida la tercera parte). /TD> Hay ocho optimizaciones de rendimiento que recomendamos si desea remediar el tiempo de bloqueo total y mejorar su Sitio de WordPress.
Posponse js
Retraso js
Tomar las aplicaciones DNS
Minimiza js
Use la compresión de GZIP
Reducir los archivos CSS
Optimizar la entrega de CSS
Reduzca el tiempo de respuesta del servidor y el tiempo a primer byte (TTFB)
1. Postpone a JS para posponer JS significa retrasar la carga de JS hasta cierto tiempo. En este caso, los archivos JS se cargarán después de que el navegador haya mostrado el contenido más relevante. Al posponer los archivos de JavaScript, hará que JavaScript se cargue más rápido, que es invaluable para mejorar el rendimiento de su sitio de WordPress. Reducir el tiempo dedicado a analizar, compilar y ejecutar archivos JS también ayuda a mejorar TBT. Existe un problema con la sección de diagnóstico: aborda las recomendaciones “eliminar los recursos que bloquean la representación”, “eliminar a JavaScript” y “evitar encadenar las solicitudes críticas”. Solución manual: use el atributo de diferir: cuando intente posponer JS, puede usar el atributo booleano “diferir”
Los archivos JS se ejecutarán solo después de que se haya cargado el resto de la página.
Atributo de diferir – Fuente: bitsofco.de usa un complemento de WordPress:
Limpieza de activos: este complemento gratuito escanea y detecta el contenido que se cargará en la página. Al editar una página, todo lo que tiene que hacer es seleccionar el código CSS o JS que no es útil. Nota importante: El perpetrador del complemento recomienda el uso de la limpieza de activos con un caché como WP Rocket para obtener los mejores resultados.
WP Rocket tiene la opción de posponer el análisis de JavaScript y posponer los archivos JS WordPress:
Carga JS Retrasada – Dashboard WP Rocket. 2. Retrasar JS La ejecución del JavaScript retrasado mejora el rendimiento y el TBT retrasando todos los archivos JS hasta que se realiza una interacción de usuario, como tocar la pantalla, ejecutar o hacer clic en un botón. Evite encadenar las solicitudes críticas “. Solución manual:
La forma manual de crear un retraso en JS es usar la función del método setTimeOut (). Esto llamará a una función después del tiempo que especifique en MS. Puede encontrar fragmentos de código muy útiles para retrasar las funciones JS, pero aquí hay un ejemplo que puede seguir:
Supongamos que desea hacer el siguiente escenario: “El usuario hace clic en un botón → Espere 2 segundos → La página mostrará un” buen día, ¿cómo estás? “: <Button onClick =" setTimeout (myfunction, 2000) "intente function myFunction () {alert (‘Hola, ¿cómo estás?’);} 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.
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 (recién mencionado en la sección anterior).
Cache WP Rocket Plugin: manera conveniente. Puede retrasar fácilmente los archivos JS con un solo clic.

La función de retraso de la ejecución de JavaScript: el WP Rocket Dashboard 3. Tomar las aplicaciones DNS-Prefetch DNS es un intento de resolver el nombre de dominio antes de que se soliciten los recursos. ¿Cuándo es útil? Si tiene un código de terceros en su sitio web, como un video alojado en Vimeo o algunas fuentes de Google. DNS-Prefetch puede proporcionar un pequeño impulso a su sitio, ya que minimizará el tiempo de carga y los recursos de otro sitio web. En otras palabras, DNS-Prefetch le permite hacer conexiones tempranas con scripts de terceros, reduciendo el retraso y trayendo resultados más eficientes. Problema lejano de la sección de diagnóstico: aborda las recomendaciones “minifica el uso de terceros” y “preconcebidos para los orígenes necesarios”. Solución manual: use “rel = dns-prefetch” en la sección “Cabeza”. En otras palabras, puede especificar manualmente el dominio para el navegador para deleitarlo: >

Use un complemento de WordPress:
Plugin Perfmatters tiene opciones de toma preliminares DNS
El complemento WP Rocket también tiene una sección “solicitudes de DNS previas” en el tablero de WordPress:
Entrenamiento DNES – WP Rocket 4. Minimizar el código minimiza es eliminar cualquier trastorno y signos de puntuación innecesarios: nuevas líneas, espacios, etc. Siempre puede tener un tipo de contenido que no sea necesario y consuma mucho tiempo, evitando su página web. Al eliminar dicho “código muerto” del script, el tiempo de lanzamiento de que el hilo principal se centre en muchas tareas importantes. Problema de faro en la sección de diagnóstico: aborda las recomendaciones “Reducir el tiempo de ejecución de JavaScript”, “minimizar la actividad del hilo principal” y “minificar JS”. Soluciones manuales: haga una copia de seguridad de su sitio o no edite archivos JS directamente en un servidor de producción.
Use un editor de texto como texto sublime o código de Visual Studio. No recomendamos editar su código usando Google Docs, por ejemplo, agrega formato adicional.
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.
Use un complemento de WordPress:
¡Cerrar compilador de Google mismo! Ayuda a la compresión JS.

El complemento de autoadio puede ayudarlo y minimizar JS.
WP Rocket le permite reducir los archivos JS con un solo clic.
Función de reducción del archivo JavaScript – Dashboard WP Rocket. 5. Use compresión GZIP La compresión GZIP permite la compresión de su código, por lo que los archivos enviados desde el servidor al navegador del visitante (¡y su sitio más rápido!) Puede imaginar todas las tabletas HTML, CSS y JS para obtener un archivo más pequeño, reduce TBT y, en consecuencia, aumenta el rendimiento. Problema de faro en la sección de diagnóstico: aborda la recomendación “Activar la compresión de texto”. Use un complemento de WordPress: la activación del complemento de compresión GZIP le brinda la oportunidad de activar y desactivar la compresión GZIP en su sitio web de WordPress.
WP Rocket activa automáticamente la compresión de GZIP. Puede leer más sobre la compresión de GZIP en nuestra documentación.
6. Minimiza los archivos CSS, esto reduce el tamaño de los archivos eliminando comentarios, código redundante y espacios blancos. La idea es que desea reducir el mayor tiempo posible, y estas características no son necesarias para ejecutar la página. Esto reducirá la carga de CSS y el tiempo de análisis general. Problema de faro en la sección de diagnóstico: aborda las recomendaciones “minimizando la actividad del hilo principal” y “minificar CSS”. Soluciones manuales (para más detalles, consulte la sección JS anterior):

Haga una copia de seguridad de su sitio o no edite archivos CSS directamente en un servidor de producción.
Use un editor de texto como texto sublime o código de Visual Studio.
Uso de una herramienta web:
Vaya a MinifyCode.com y haga clic en la pestaña Minifier de CSS.
Pegue el código CSS en el cuadro de entrada y haga clic en el botón Minify CSS.
Herramienta Minifier CSS – Fuente: CSS Minifier Use un complemento de WordPress: optimizar automáticamente
WP Super Minify
CSS nano

Complemento de caché de cohetes WP que le ayuda a minimizar su CSS con un solo clic:
La función de reducción de archivos CSS – WP Rocket. Punto de entrega 7. Optimizar la minimización de entrega de CSS del hilo principal libera el navegador para administrar otras tareas necesarias para ejecutar la web de manera efectiva. Algunos eventos, como el análisis CSS, pueden bloquear el hilo principal para administrar otras tareas y procesos. Por lo tanto, es esencial optimizar cómo se entrega CSS. Problema lejos de la sección de diagnóstico: aborda la recomendación “minimizando la actividad del hilo principal”. Soluciones manuales:
Combine y comprime sus scripts CSS
Priorizar las reglas CSS para los contenidos por encima de la página
Evite usar etiquetas de estilo en el cuerpo HTML
Use un complemento de WordPress:
El complemento WP Rocket Cache lo ayuda a optimizar su entrega de CSS de un solo clic debido a la opción de eliminación de CSS no utilizada. Si no funciona para usted, puede activar la carga de CSS asincron y completar el trabajo de todos modos.
Optimice la función de entrega de CSS – WP Rocket 8. Entregue la pintura. Reduzca el tiempo de respuesta del servidor y el primer byte (TTFB) su servidor debe ser rápido, y TTFB debe optimizarse para mejorar la puntuación TBT. Problema de faro en la sección de diagnóstico: aborda la recomendación “Reducir el tiempo de respuesta inicial”. Use un complemento de caché avanzado y CDN:
El complemento WP Rocket Cache y RocketCDN lo ayudará a reducir el puntaje TBT.

Cómo remediar el puntaje TBT con WP Rocket Como se mencionó anteriormente, la ejecución de JavaScript es el factor más importante que afecta la métrica de TBT. Al retrasar y posponer JavaScript usando WP Rocket, le dará a su sitio de WordPress un pequeño aumento de velocidad. Puede usar más características de cohetes WP para reducir el impacto de TBT y mejorar su puntaje. Echemos un vistazo a un estudio de caso. Ejecutando la auditoría de PageSpeed ​​Insights Audité el sitio web de un catering francés llamado “Le Point Gourmand …” Uso de Google PageSpeed ​​Insights. Permíteme compartir lo que he hecho para obtener los siguientes resultados de rendimiento:
Mi puntaje de rendimiento antes de activar WP Rocket mi puntaje de rendimiento con WP Rocket

Puntuación del faro antes del cohete WP: 51/100
En naranja: TBT fue 480 ms y TTI 7.0 S
En rojo: el índice de velocidad fue de 6.0 sy LCP 7.1 s
Puntuación del faro después de usar WP Rocket: 95/100

En Orange: solo se debe remediar el LCP, pero podemos ver que ha mejorado significativamente.
En Green: Speed ​​Index, FCP, TTI, CLS y … TBT!
Las secciones de diagnóstico y oportunidades no fueron tan excelentes cuando hice mi primera auditoría sin usar el complemento de caché de cohetes WP. Los problemas encontrados por Lighthouse afectaron mi TBT y mi puntaje de rendimiento global. Como se observó anteriormente, el puntaje TBT se ve afectado principalmente por problemas como JS desordenado y no utilizado, un gran tiempo de ejecución de JS, una gran cosa en el hilo principal y un código de terceros que ocupa todos los recursos. Según la auditoría, mi sitio no tenía una muy buena salud y se encontraron muchos problemas JS/principales: problemas identificados por el faro y las áreas de mejora (extracto) -PSI activando las funciones del cohete WP al activar el cohete WP, fui a la configuración Sección de mi sitio de WordPress y me aseguraré de que active las siguientes opciones: 1. Optimización de archivos JS (diferir y retraso)
Optimización de archivos JS – Dashboard WP Rocket 2. Optimización de archivos CSS
Optimización del tablero de cohetes de los archivos CSS-WP 3. URL de avance Agregué algunas URL para la adquisición preliminar y aumenté mi puntaje nuevamente:
Opción para hacerse cargo de WP Rocket 4. Fonts de faro de precarga también ha encontrado un problema de rendimiento en términos de fuentes e iconos utilizados en el sitio. Lo reparé usando la pestaña WP Rocket “Fuentes de precarga”:

Extienda la sección “Solicitudes de clave de precarga” de PSI para identificar las URL que contienen problemas.
Copiar URL proporcionadas por Lighthouse.
Glindlos en la sección “Fuentes de precarga” del tablero de cohetes WP.

Agregar fuentes a la precarga en el tablero de cohetes WP de acuerdo con las recomendaciones de PSI para finalmente el rendimiento de los resultados, mi lista de “auditorías pasadas” ha aumentado significativamente, y algunos problemas como “minificar JS”, “Minimización principal de thread”, “Eliminar JS no utilizado “o” eliminar los recursos de bloqueo de renderizado “han desaparecido debido>
recomendaciones del faro que influyen en el tiempo de bloqueo total ¿Se puede resolver el cohete WP?
JS Problemas:
Elimine los recursos que bloquean la representación y eliminan el JavaScript no utilizado sí: en unos pocos clics, pospondrá y retrasará el código. Entrega CSS. Sí – Miniminación de CSS y utilizando La opción Optimizar la entrega de CSS, se acercará a las recomendaciones de PSI. sí: puede usar la función previa a los DNS. retrasar y posponer JavaScript y mejorará el tiempo de ejecución de JS., Se encargará de la Recomendación PSI. Hasta el primer byte. Esta guía lo ha ayudado a comprender cómo optimizar su puntaje TBT para su sitio de WordPress utilizando algunos pasos concretos. El tiempo total de bloqueo es una medida de rendimiento centrada en el usuario importante, porque es importante para el 30% de la nota de rendimiento del faro. Un sitio web lento puede alejar a los posibles visitantes y clientes, puede afectar a su experiencia de usuario (UX) e incluso afectar el SEO. La forma más simple y conveniente de obtener una excelente puntuación TBT es instalar WP Rocket, que aplica el 80% de las mejores prácticas de rendimiento web inmediatamente después de la activación.