Cómo eliminar los recursos que bloquean el renderizado en WordPress

Rifat Tutoriales de WordPress Dec 15, 2022

Si ejecuta su sitio web a través de Lighthouse, es posible que haya notado una sugerencia para eliminar los recursos que bloquean el renderizado.

Al retrasar JavaScript y poner estilos CSS importantes en línea, puede deshacerse de los recursos en WordPress que ralentizan el renderizado. Esto es compatible con la mayoría de los complementos de caché, Autoptimize y Async JavaScript. Tanto Elementor como Divi tienen formas integradas de deshacerse de los recursos que impiden que la página se represente, utilizando CSS diferido y en línea. La eliminación de CSS, JavaScript y código de terceros innecesarios también puede ayudar en la resolución.

En este artículo, definiremos los recursos de bloqueo de procesamiento y repasaremos las ventajas de eliminarlos de su sitio web. Luego, le mostraremos cinco formas alternativas de deshacerse de ellos.

¿Qué son los recursos de bloqueo de procesamiento ??

Comprender el proceso típico de carga de un sitio web es crucial antes de analizar más de cerca los recursos que bloquean el renderizado. El navegador del visitante debe procesar (o descargar) todo el contenido de su sitio web después de hacer clic en un enlace. Lee todo el HTML, CSS y JavaScript en su sitio web de arriba a abajo. Los visitantes no podrán ver su sitio web hasta que el navegador haya terminado de leer esta cola de secuencias de comandos. Es posible que tengan que esperar mucho tiempo si hay recursos que bloquean el renderizado. Básicamente, un archivo CSS o JavaScript que evita que el navegador cargue otro contenido mientras se procesa es un recurso que bloquea el procesamiento. Esto podría detener el proceso de renderizado y hacer que la página se vea sin terminar o en blanco.

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora

Cuando hay recursos que bloquean el renderizado en su sitio web, se cargan archivos adicionales en la parte superior del código. Antes de ver el sitio web, los usuarios deben esperar mientras se procesan estos archivos. Los recursos de bloqueo de procesamiento tienen el potencial de influir en varios indicadores de rendimiento del sitio web. Por ejemplo, la pintura con contenido más grande mide cuánto tiempo tarda en cargarse el contenido principal de una página. La primera vez que el navegador representa el material del Modelo de objetos del documento (DOM) de su sitio se conoce como la primera pintura con contenido. El tiempo total de bloqueo es el tiempo que transcurre entre la primera pintura con contenido y el tiempo de interacción (el tiempo que tarda una página en volverse completamente interactiva).

Aunque no son necesarios para la carga, los recursos que bloquean el renderizado pueden impedir el renderizado. La experiencia del usuario de su sitio web puede sufrir como resultado (UX). Por lo tanto, es crucial que los elimine para evitar que los visitantes abandonen sus páginas.

Beneficios de eliminar los recursos que bloquean el renderizado

A los usuarios de Internet generalmente no les gusta esperar a que se carguen los sitios web. Un sitio web rápido puede atraer a los usuarios a explorar su material y evitar que visiten a un rival. Al eliminar los elementos que bloquean el procesamiento, está haciendo que el código de su sitio web sea lo más liviano posible, lo que puede ser el secreto para mejorar la velocidad de la página. Debido a que el rendimiento del sitio y la participación del usuario son dos factores que los gigantes de los motores de búsqueda como Google tienen en cuenta al evaluar los sitios web, la eliminación de los archivos que bloquean el procesamiento puede ayudar a mejorar la clasificación de su sitio en los motores de búsqueda.

Cómo eliminar los recursos que bloquean el renderizado en WordPress

Es posible que se pregunte cómo eliminar los elementos que bloquean el renderizado de su sitio web ahora que sabe cómo detectarlos en WordPress. Afortunadamente, hemos reunido una lista de muchos enfoques que puede tomar para lograr esto, comenzando con los más simples.

Optimizar la carga de CSS

Aumentar la velocidad a la que se carga el CSS en su sitio web es una técnica para deshacerse de los recursos que bloquean el renderizado. Un navegador carga su página web de arriba a abajo, como se dijo anteriormente. Esto puede hacer que el proceso de carga tarde más cuando es necesario procesar ciertos archivos. Es crucial recordar que solo se deben cargar algunos archivos CSS para que se muestre la página. Por lo tanto, puede mostrar primero los archivos más importantes cuando optimiza la carga de CSS. El CSS que bloquea el procesamiento se puede eliminar manualmente, pero también puede instalar un complemento para facilitar las cosas. Puede optimizar su sitio web directamente desde su panel de WordPress usando Jetpack Boost. Este complemento simplifica la implementación de la carga diferida, difiere JavaScript no esencial y mejora la carga de CSS. Una de las formas más sencillas de deshacerse de los recursos que bloquean el renderizado en WordPress es hacer esto.

Comience buscando Jetpack Boost en Complementos Agregar nuevo en su panel de control de WordPress. Instale y luego encienda el complemento en su sitio web.

installing Jetpack Boost

Puedes ir a Jetpack Mi Jetpack si ya tienes Jetpack cargado. Busque Boost y seleccione Activar de la lista de productos Jetpack.

activating Jetpack Boost

Una vez que se haya activado el complemento, haga clic en la pestaña Jetpack Boost y elija Comenzar.

getting started with Jetpack Boost

Su sitio web recibirá instantáneamente una calificación de rendimiento de Jetpack. Verá una calificación con letras junto con información sobre su computadora y puntajes móviles.

mobile and desktop score from Jetpack Boost

Luego, active esta función desplazándose hacia abajo hasta Optimizar la carga de CSS. Cuando está activado, Jetpack Boost generará el CSS crucial para su sitio web para que se cargue más rápido.

optimizing CSS loading

Aplazar JavaScript no esencial

Puedes tomar más medidas para deshacerte de los recursos que bloquean el renderizado en WordPress fuera de solo optimizar la carga de CSS. El JavaScript no esencial también se puede posponer para acelerar aún más la carga de su sitio web. JavaScript no esencial se puede retrasar para retrasar algunos procesos hasta después de que se haya cargado su contenido. Puede evitar que el navegador ejecute archivos JavaScript si no son necesarios para cargar una página. Afortunadamente, usar el complemento Jetpack Boost hace que esto sea sencillo. Puede posponer fácilmente JavaScript no esencial después de haber optimizado el proceso de carga de CSS. Active el interruptor de alternancia del área Aplazar JavaScript no esencial. Esta sección se puede encontrar debajo de la sección Optimizar la carga de CSS.

deferring non-essential JavaScript with Jetpack

El complemento actualizará su evaluación del rendimiento general de su página después de habilitar esta configuración. Se mostrará tu puntuación antes y después de usar Jetpack Boost.

a higher website page speed score

Eche un vistazo a los puntajes en las capturas de pantalla tomadas antes y después de que completemos este proceso. Notará que el aumento de la velocidad de la página se logró retrasando el JavaScript no esencial y cargando CSS de manera más eficiente. Los navegadores pueden cargar su contenido más rápidamente porque no tienen que ejecutar secuencias de comandos grandes.

Aplazar imágenes fuera de pantalla

Aunque las imágenes no son un recurso que impida que las páginas se rendericen, es posible que desee pensar en acelerar su tiempo de carga. Los sitios web suelen tener imágenes fuera de la pantalla que no aparecen hasta que el usuario interactúa con la página, como cuando se desplaza. Puede posponerlos con la carga diferida porque no son necesarios para que se cargue la página web. Solo las imágenes que los visitantes pueden ver se cargan de forma perezosa. Estas fotos se cargarán justo antes de mostrarse en la página una vez que el usuario se desplace. Un navegador intentará cargar todas las imágenes de una página a la vez si la carga diferida no está habilitada. Cuanto más tarde su material en cargarse, más probable es que los visitantes abandonen su sitio.

La carga regular puede no ser un problema si un visitante está utilizando una computadora de escritorio. Los teléfonos inteligentes y las tabletas, por otro lado, tienen pantallas más pequeñas y menos ancho de banda. Su sitio web puede consumir más ancho de banda y tardar más en cargarse para los usuarios de teléfonos móviles si carga completamente todas sus fotos a la vez. Este problema se resuelve mediante la carga diferida.

Para habilitar la carga diferida en su sitio, utilice Jetpack Boost. Simplemente busque la opción Lazy Image Loading y habilítela.

turning on image lazy loading

El espectador solo verá las imágenes cargadas en su sitio web cuando se desplace hacia abajo en la página si hace esto. Aunque las fotos no son un recurso que genere bloques, habilitar la carga diferida puede acelerar su página.

Elimine los recursos que bloquean el renderizado con Elementor/Divi

Tanto Elementor como Divi incluyen opciones para eliminar los recursos que obstruyen el renderizado.

Habilite la carga de CSS mejorada y Font-Awesome Inline en la configuración de Experimentos de Elementor para cargar CSS y fuentes en línea, lo que las convierte en un bloqueo sin procesamiento. La carga de activos mejorada elimina CSS/JavaScript innecesarios, lo que mejora los elementos fundamentales de la web de varias maneras.

Al aplicar CSS crucial, diferir CSS/JavaScript y cargar tus fuentes en línea, las opciones de rendimiento de Divi también pueden reducir los recursos que bloquean el renderizado.

Eliminar manualmente el JavaScript que bloquea el renderizado

También puede eliminar manualmente los recursos que bloquean el renderizado, aunque instalar un complemento de optimización es una opción mucho más fácil. Idealmente, solo debería pensar en esta opción si es un codificador experimentado. Si desea reducir la cantidad de complementos en su sitio web, este procedimiento también puede ser útil. Puede otorgar a sus archivos una propiedad asíncrona o diferida para ayudar a que JavaScript se ejecute de manera más eficiente. Se le indicará al navegador que represente los scripts no críticos por separado marcándolos como tales. Ambas características se pueden utilizar para acelerar la carga de información HTML.

El archivo HTML se analiza de manera típica hasta que encuentra el archivo de secuencia de comandos. El análisis se detendrá mientras localiza el script. Después de descargarlo y ejecutarlo, el análisis continúa.

script parsing illustrated

Mientras procesa el HTML restante, el navegador puede descargar JavaScript gracias a la función asíncrona. Después de la descarga, puede detener el procesamiento de HTML y ejecutar el script.

script async illustrated

El atributo diferido funciona de manera similar, lo que permite que el navegador descargue el script mientras analiza el HTML. La distinción es que también retrasa la ejecución del script hasta que se completa el análisis de HTML.

script defer illustration

Debe incluir un fragmento de código en su archivo functions.php para implementar cualquiera de estas propiedades. Primero debe ubicar la etiqueta script> del recurso que bloquea el procesamiento. lo siguiente como un atributo asíncrono:

<script src="resource.js" async></script>

Como alternativa, considere cómo puede verse un script cuando se usa la propiedad defer:

http://resource.js

Si bien un complemento puede encargarse de estos atributos por usted, hacerlo usted mismo podría adaptarse mejor a sus preferencias. Si es así, es crucial entender cuándo aplicar cada atributo. Debe usar una propiedad diferida para scripts no esenciales que dependen de otro script. La opción asíncrona es apropiada para cualquier otro script.

Aplique atributos asíncronos o diferidos con un complemento

Use un complemento como Async JavaScript si tiene problemas para editar scripts manualmente. Tiene control completo sobre qué scripts tienen la propiedad asíncrona o diferida gracias a esta herramienta.

Una vez que se haya instalado el complemento, seleccione Habilitar JavaScript asíncrono en Configuración JavaScript asíncrono.

enabling async JavaScript

A continuación, vaya a la sección titulada Método JavaScript asíncrono. Puede elegir si habilitar los atributos asíncronos o diferidos aquí.

choosing between async and defer

Es una buena idea excluir estos scripts porque muchos complementos dependen de jQuery. La aplicación de propiedades asíncronas a jQuery puede hacer que su sitio web se rompa.

En caso de duda, puede utilizar el atributo aplazar, pero excluir jQuery por completo es el mejor curso de acción.

excluding jQuery

Ahora puede especificar qué secuencias de comandos desea ejecutar de forma asíncrona o diferida. Debe tener cuidado de poner cada guión en la sección correspondiente.

choosing which scripts to defer

Puede enumerar los guiones que desee excluir de este procedimiento en la sección Exclusión de guiones.

También hay opciones para excluir complementos y temas en la parte inferior de la página. Los scripts para cualquier tema o complemento que mencione aquí no se aplicarán a las características asíncronas o diferidas.

excluding plugins and themes

Después de realizar los ajustes necesarios, puede hacer clic en Guardar configuración. Este enfoque puede ser un compromiso útil entre la modificación manual de los scripts y el uso de un complemento para manejar la tarea por usted. Como alternativa, puede eliminar estos pasos adicionales utilizando una aplicación todo en uno como Jetpack Boost.

Terminando

Al hacer que los navegadores de los visitantes pospongan la representación del contenido de la mitad superior de la página mientras descargan activos que no son necesarios de inmediato, los recursos de bloqueo de representación aumentan los tiempos de carga de página percibidos de su sitio de WordPress. Debe retrasar la carga de los recursos que no son inmediatamente necesarios para ayudar a los visitantes a cargar el área visible de su página más rápidamente. Use complementos prefabricados para deshacerse de los recursos que bloquean el renderizado en WordPress. Puede combinar Autoptimize y Async JavaScript, dos complementos creados por el mismo desarrollador, para obtener una solución gratuita. Puede utilizar WP Rocket, que ofrece una interacción particular con Kinsta y puede ayudarlo con muchos ajustes adicionales de rendimiento de WordPress, si está listo para pagar por ello.

Divi WordPress Theme