Elimina los recursos que bloqueen el renderizado

recursos que bloquean el renderizado en wordpress

Puede que estés aquí porque Lighthouse te ha dicho que “elimines los recursos que bloquean la renderización”. Los recursos que bloquean la renderización son un obstáculo común para renderizar su página más rápido. Afectan a su Web Vitals, que a su vez afecta a su SEO. Los tiempos de renderización lentos también frustran a sus usuarios y pueden hacer que abandonen su página.
Trabajé con un cliente para reducir sus recursos de bloqueo de renderización y mejorar la velocidad de carga de su sitio. Pasamos del 13% al 80% de las visitas a la página que experimentan la primera pintura de contenido (FCP) en menos de 1,8 segundos. Y aún no hemos terminado.
El CSS bloquea la renderización. El navegador lo necesita antes de crear el CSSOM, que bloquea todos los pasos posteriores. Tan pronto como el navegador encuentra una etiqueta <link> o <style> de hoja de estilo, debe descargar y analizar su contenido. Luego debe crear el CSSOM antes de que el resto de la renderización pueda continuar. Puedes ver esto representado en el punto del triángulo en el diagrama. El árbol de renderización no puede continuar hasta que se hayan creado tanto el CSSOM como el DOM.
Los recursos que bloquean el renderizado pueden desencadenar una cascada de fallos en el rendimiento de la web. En primer lugar, la pintura se ralentiza, lo que provoca que la pintura de mayor contenido (LCP) sea más lenta. LCP es uno de los Core Web Vitals que ahora se utilizan para calcular su clasificación en los motores de búsqueda.

eliminar los recursos que bloquean la renderización shopify

En primer lugar, asegúrate de que el CSS crítico está funcionando y no contribuye al cambio de diseño acumulativo (CLS) o al FOUT (destello de texto sin estilo cuando abres tu sitio web). Para arreglar esto, es posible que tengas que borrar la caché o regenerar el CSS crítico en WP Rocket, así como tu constructor de páginas, si lo estás utilizando. También puede ser necesario excluir archivos de la optimización de la entrega de CSS utilizando el plugin de ayuda de WP Rocket.
Escribí una comparación detallada entre Asset CleanUp vs. Perfmatters. Personalmente uso Perfmatters porque la UI/UX es más fácil de usar. Sin embargo, la versión pro de Asset CleanUp le permite descargar CSS personalizado mientras que la versión gratuita (y Perfmatters) no puede hacer esto.
Si utiliza Perfmatters, active el gestor de scripts en la configuración del plugin. Si utiliza Asset CleanUp, active el modo de prueba que le permite probar la descarga de activos sin romper su sitio (sólo usted verá si hay cambios visibles). Perfmatters no tiene un modo de prueba, por lo que tendrá que comprobar si hay errores visibles en su sitio en vivo durante la prueba, o crear un sitio de ensayo para la prueba.

plugin para eliminar los recursos que bloquean el renderizado

Es posible que esté familiarizado con los culpables comunes de un mal rendimiento de la página: el exceso de contenido, los archivos de imagen sin comprimir, el alojamiento insuficiente y la falta de almacenamiento en caché, por nombrar algunos. Pero hay otro culpable que a menudo se pasa por alto: los recursos que bloquean la renderización.
Si has optimizado el rendimiento de tu página en WordPress y sigues teniendo problemas, los recursos que bloquean la renderización pueden ser los culpables. A veces este código es importante que se ejecute en la primera carga, pero la mayoría de las veces puede ser eliminado o empujado hasta el final de la cola.
Verás una lista de archivos que ralentizan la “primera pintura” de tu página – estos archivos afectan al tiempo de carga de todo el contenido que aparece en la ventana del navegador en la carga inicial de la página. Esto también se llama contenido “above-the-fold”.
Autoptimize es un plugin gratuito que modifica los archivos de su sitio web para ofrecer páginas más rápidas. Autoptimize funciona agregando archivos, minificando el código (es decir, reduciendo el tamaño del archivo mediante la eliminación de caracteres redundantes o innecesarios) y retrasando la carga de los recursos que bloquean la renderización.

bloqueo del renderizado de javascript

Como verás, los recursos que bloquean la renderización -archivos JS y CSS- pueden afectar enormemente al rendimiento de tu sitio. En términos prácticos, su sitio de WordPress se cargará más lentamente. Los recursos que bloquean la renderización afectarán a métricas críticas como el mayor contenido de pintura y el primer retraso de entrada, dos de las métricas de Core Web Vitals.
Sin el análisis de estos recursos – que no son necesarios para mostrar el contenido de la página – el navegador renderizaría la página del contenido principal más rápidamente. Los usuarios disfrutarían de una mejor experiencia de usuario, y las métricas de rendimiento también serían buenas.En resumen, los recursos CSS y JS que bloquean la renderización retrasan la renderización de la página sin ninguna razón válida.
No olvides que el tiempo de carga en sí también se verá afectado. No se trata sólo de la puntuación PSI y el rendimiento de Core Web Vitals y SEO. En general, se trata de proporcionar una excelente experiencia al usuario.
La forma más fácil de encontrar los recursos que bloquean la renderización es analizar el informe de PageSpeed Insights. Junto a la recomendación “Eliminar los recursos que bloquean la renderización”, encontrará una lista de archivos de los que debería ocuparse. Puede ver un ejemplo a continuación:

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad