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 visualización son necesarios, como los archivos CSS que garantizan que la página se vea correctamente, otros pueden optimizarse o eliminarse. Para maximizar la velocidad de carga de su sitio web, es fundamental identificar y minimizar o eliminar los recursos que bloquean la visualización siempre que sea posible. Es posible que haya 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 visualización . Carga tu sitio web en Chrome y abre las Herramientas para desarrolladores. Haz clic en la pestaña "Cobertura" y asegúrate de que la opción "Desactivar caché" esté marcada. Esto te permitirá ver 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 de ellas es la inserción en línea de CSS crítico , lo que significa 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, deberá eliminarlos o insertarlos en línea. La inserción en línea implica incrustar el recurso directamente en el código, por lo que no es necesario cargarlo por separado. Esto se puede hacer con archivos JavaScript y CSS. Plugins como Flyingpress, WP Rocket, Swift Performance o LiteSpeed Cache pueden ayudarle a automatizar esto.
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:
Finalmente, 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 carguen más rápido. Al reducir la cantidad de recursos que bloquean la visualizació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 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, deberías haber eliminado la mayoría, si no todos, los recursos que bloqueaban la visualización de tu sitio web. Si aún necesitas ayuda, consulta nuestro servicio profesional de optimización de velocidad de WordPress . Te ayudaremos a mejorar el rendimiento y la velocidad de tu sitio web, esenciales 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 estrategia para mejorar la velocidad y el rendimiento de tu sitio web, así como de Core Web Vitals .
