Elimina los recursos que bloquean el renderizado wordpress

Elimina los recursos que bloquean el renderizado wordpress online

Elimina los recursos que bloquean el renderizado wordpress 2020

eliminar los recursos que bloquean el renderizado de wordpress wp rocket

Si estás luchando con el mismo problema, este post te ayudará. En este post, te mostraré cómo he conseguido solucionar este problema en mi página web, aumentando así la puntuación de PageSpeed de 76 a 94.
Ya sabes que una página web se compone de marcas HTML. Cuando visitas un sitio web, tu navegador analiza este HTML y lo representa (muestra) en la pantalla. Sin embargo, este HTML suele llamar a archivos de recursos adicionales como hojas de estilo (CSS) y scripts (JS), que añaden diseño y funcionalidad a la página web.
Normalmente, los enlaces a estos recursos externos aparecen en la sección head del marcado HTML, antes de la etiqueta body que contiene el contenido principal de la página. Así, cuando un navegador encuentra un archivo de este tipo, deja de renderizar la página y comienza a descargarlo y analizarlo. Y la renderización se reanuda sólo cuando ha terminado.
Descargo de responsabilidad: Los pasos descritos en este artículo y en el vídeo de abajo pueden no ser perfectos. Sólo resuelve una advertencia en GPSI. Además, muchas cosas han cambiado con GPSI y Lighthouse después de haber publicado inicialmente este artículo. Un paso crucial en la eliminación de los recursos que bloquean el renderizado es alinear el CSS crítico y diferir (retrasar) el CSS no crítico. Pero con el plugin gratuito Autoptimize, no hay manera de dividir el archivo CSS en crítico y no crítico. Así, el archivo CSS diferido carga las reglas que ya hemos inlineado. Así que, en efecto, está aumentando el tamaño total de la página. Y no sólo eso, si el CSS crítico alineado está incompleto o es imperfecto, puede causar desplazamientos del diseño cuando se carga el archivo CSS original, lo que a su vez empeora la puntuación CLS (Cumulative Layout Shift). En resumen, una corrección introduce otro problema. Por ello, actualmente estoy explorando mejores formas de implementarlo. Hasta entonces, no voy a utilizar las técnicas siguientes en este sitio. Mi punto es, no seguir ciegamente los pasos e introducir nuevos problemas en su sitio. En su lugar, pruebe los métodos y utilice sus resultados.

eliminar los recursos que bloquean el renderizado autoptimize

El navegador de un usuario tendrá que cargar esos scripts y CSS antes de cargar el resto del HTML de la página. Esto significa que los usuarios con una conexión más lenta tendrán que esperar unos milisegundos más para ver la página.
Muestra una puntuación basada en el número de reglas que su sitio pasa. La mayoría de los sitios web obtienen entre 50 y 70 puntos. Sin embargo, algunos propietarios de sitios web se sienten obligados a alcanzar el 100 (la máxima puntuación que puede obtener una página).
Para este método, usaremos el plugin WP Rocket. Es el mejor plugin de caché de WordPress en el mercado y le permite mejorar rápidamente el rendimiento de su sitio web sin ninguna habilidad técnica o una configuración complicada.
WP Rocket funciona de forma inmediata, y activará el almacenamiento en caché con una configuración óptima para su sitio web. Puedes aprender más sobre él en nuestra guía completa sobre cómo instalar y configurar correctamente WP Rocket en WordPress.
Para ello, tienes que visitar la página de Ajustes ” WP Rocket y luego cambiar a la pestaña ‘Optimización de archivos’. Desde aquí, desplázate a la sección de Archivos CSS y marca las casillas junto a las opciones de Minificar CSS, Combinar Archivos CSS y Optimizar la Entrega de CSS.

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