Cuando se trata de rendimiento web, uno de los factores críticos es la eliminación de los recursos que bloquean la renderización. Los recursos que bloquean la renderización retrasan la representación de una página y pueden incluir cosas como archivos JavaScript y CSS. Estos recursos deben cargarse antes de que el navegador pueda empezar a renderizar la página. Esto incluye archivos CSS y JavaScript externos y cualquier otra cosa que pueda retrasar al navegador en el inicio de la visualización de la página.
Aunque algunos recursos que bloquean la renderización son necesarios, como los archivos CSS que garantizan que su página tenga un aspecto correcto, otros pueden optimizarse o eliminarse. Para maximizar la velocidad de carga de su sitio web, es esencial identificar y minimizar o eliminar los recursos que bloquean la renderización cuando sea posible. Es posible que haya notado esta recomendación al probar el sitio de WordPress en la herramienta PageSpeed.
¿Cómo se identifica un recurso que bloquea la renderización?
Al tratar de mejorar el rendimiento de su sitio web, es posible que se encuentre con el término "recursos que bloquean la renderización". Esto se refiere a cualquier recurso que deba ser cargado antes de que el navegador pueda comenzar a renderizar la página. Por lo general, esto incluye archivos CSS y JavaScript externos.
Puede utilizar las Herramientas para desarrolladores de Google Chrome para identificar un recurso que bloquea la renderización. Cargue su sitio web en Chrome y, a continuación, abra las Herramientas para desarrolladores. Haz clic en la pestaña Cobertura y asegúrate de que la opción "Desactivar caché" está marcada. Esto asegurará que vea la versión más actualizada de su sitio web.
Ahora, recargue su sitio web. Las Herramientas para Desarrolladores le mostrarán una lista de todos los recursos cargados mientras su página se renderiza. Busque cualquier recurso que tenga una línea roja al lado. Estos son los recursos que bloquean la renderización.
3 formas de eliminar un recurso que bloquea la renderización en WordPress?
Hay varias maneras de hacer esto en WordPress.
Método 1:
Uno de ellos es el CSS crítico en línea, es decir, incrustar el código CSS directamente en el archivo HTML en lugar de llamar a una hoja de estilos externa. Esto puede ser efectivo para sitios web pequeños con pocas páginas, pero no es práctico para sitios web más grandes. Una vez identificados los recursos que bloquean la visualización, hay que eliminarlos o alinearlos. Inlining significa incrustar el recurso directamente en el código, para que no tenga que cargarse por separado. Esto puede hacerse con archivos JavaScript y CSS. Plugins como Flyingpress, WP Rocket, Swift Performance o LiteSpeed cache pueden ayudarte a automatizar esto.
Método 2:
Otra opción es cargar los recursos no críticos después de la carga inicial de la página. Para ello, se pueden utilizar técnicas de carga asíncrona, como la carga de archivos JavaScript después de analizar el documento o el uso de atributos de aplazamiento.
Método 3:
Por último, también puede intentar reducir el número de recursos que se necesitan en cada página. Esto puede significar combinar varios archivos CSS o JavaScript en un solo archivo o utilizar imágenes más pequeñas que se carguen más rápido. Al reducir el número de recursos que bloquean la renderización, puedes mejorar significativamente la velocidad de carga de tu sitio web y ofrecer una mejor experiencia de usuario a tus visitantes. Si necesitas más tiempo para sentirte cómodo trabajando con el código, algunos plugins pueden ayudar a automatizar este proceso, como Autoptimize, WPRocket, etc.
En algunos casos, los recursos que bloquean la renderización pueden ser necesarios para que su sitio web funcione correctamente. En estos casos, tendrá que encontrar una manera de optimizarlos para que se carguen más rápido.
Resumen
Si ha seguido los consejos anteriores, ahora debería haber eliminado la mayoría, si no todos, los recursos que bloquean la renderización en su sitio web. Si todavía necesita ayuda, consulte nuestro servicio profesional de optimización de velocidad de WordPress. Le ayudaremos a mejorar el rendimiento y la velocidad de su sitio web, lo cual es esencial para crear un sitio web de alta calidad y fácil de usar.
Recuerde que hay otros factores que pueden afectar al rendimiento de su sitio web, como el tiempo de respuesta del servidor, el tamaño de los archivos y la calidad del código. Sin embargo, eliminar los recursos que bloquean la renderización es un enfoque excelente para mejorar la velocidad y el rendimiento de su sitio web y las calificaciones de Core Web Vitals.
