En cuanto al rendimiento web, un factor crítico es la eliminación de los recursos que bloquean la visualización. Estos recursos retrasan la visualización de una página y pueden incluir archivos JavaScript y CSS. Estos recursos deben cargarse antes de que el navegador pueda empezar a mostrar la página. Esto incluye archivos CSS y JavaScript externos y cualquier otro elemento que pueda retrasar la visualización de la página.
Si bien algunos recursos que bloquean la renderización son necesarios, como los archivos CSS que garantizan que tu página se vea correctamente, otros pueden optimizarse o eliminarse. Para maximizar la velocidad de carga de tu sitio web, es fundamental identificar y minimizar o eliminar los recursos que bloquean la renderización siempre que sea posible. Es posible que hayas notado esta recomendación al probar un sitio de WordPress con la herramienta PageSpeed.
¿Cómo identificar un recurso que bloquea la representación?
Al intentar mejorar el rendimiento de su sitio web, puede encontrarse con el término "recursos que bloquean la visualización". Esto se refiere a cualquier recurso que deba cargarse antes de que el navegador pueda empezar a visualizar la página. Normalmente, esto incluye archivos CSS y JavaScript externos.
Puedes usar las Herramientas para desarrolladores de Google Chrome para identificar un recurso que bloquea la renderización. Carga tu sitio web en Chrome y luego abre las Herramientas para desarrolladores. Haz clic en la pestaña Cobertura y asegúrate de que la opción "Deshabilitar caché" esté marcada. Esto garantizará que veas la versión más reciente de tu sitio web.
Ahora, recarga tu sitio web. Las Herramientas para desarrolladores te mostrarán una lista de todos los recursos cargados durante el renderizado de tu página. Busca los recursos que tengan una línea roja . Estos son los que bloquean el renderizado.
¿3 formas de eliminar un recurso que bloquea la representación en WordPress?
Hay algunas formas diferentes de hacer esto en WordPress.
Método 1:
Una opción es integrar el CSS crítico, lo que significa incrustar el código CSS directamente en el archivo HTML en lugar de usar 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 que hayas identificado los recursos que bloquean la renderización, deberás eliminarlos o integrarlos. Integrar el recurso significa incrustarlo directamente en el código, de modo que no sea necesario cargarlo por separado. Esto se puede hacer con archivos JavaScript y CSS. Plugins como Flyingpress, WP Rocket, Swift Performance o LiteSpeed Cache pueden ayudarte a automatizar este proceso.
Método 2:
Otra opción es cargar recursos no críticos después de la carga inicial de la página. Esto se puede lograr mediante técnicas de carga asíncrona, como cargar archivos JavaScript después de analizar el documento o usar atributos de aplazamiento.
Método 3:
Por último, también puedes intentar reducir la cantidad de recursos necesarios en cada página. Esto puede implicar combinar varios archivos CSS o JavaScript en uno solo, o usar imágenes más pequeñas que se carguen más rápido. Al reducir la cantidad de recursos que bloquean la renderización, puedes mejorar significativamente la velocidad de carga de tu sitio web y brindar una mejor experiencia de usuario a tus visitantes. Si necesitas más tiempo para familiarizarte con el código, algunos plugins pueden ayudarte a automatizar este proceso, como Autoptimize, WPRocket, etc.
En algunos casos, los recursos que bloquean la renderización pueden ser necesarios para que tu sitio web funcione correctamente. En estos casos, deberás optimizarlos para que carguen más rápido.
Envolver
Si seguiste los consejos anteriores, ya deberías haber eliminado la mayoría, si no todos, los recursos que bloqueaban la renderización de tu sitio web. Si aún necesitas ayuda, consulta nuestro servicio profesional de optimización de velocidad para WordPress. Te ayudaremos a mejorar el rendimiento y la velocidad de tu sitio web, lo cual es fundamental para crear un sitio web de alta calidad y fácil de usar.
Recuerda que otros factores pueden afectar el rendimiento de tu 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 una excelente manera de mejorar la velocidad y el rendimiento de tu sitio web, así como en Core Web Vitals .
