Si alguna vez ha ejecutado su sitio de WordPress a través de Google PageSpeed Insights, Google probablemente le ha dicho que necesita eliminar los recursos de bloqueo de renderizado en su sitio de WordPress. De hecho, puede que sea por eso por lo que está leyendo este mismo post ahora mismo.

Eso probablemente plantea dos preguntas en su mente:

  1. ¿Qué son los recursos de bloqueo de la reproducción en primer lugar?
  2. ¿Cómo puede eliminar los recursos de bloqueo de renderizado en WordPress?

En este post, vamos a responder a ambas preguntas para usted. Aquí está todo lo que cubriremos en este artículo:

¿Qué significa «Eliminar los recursos que bloquean el renderizado»?

Para entender qué son los recursos de bloqueo de renderizado y por qué perjudican los tiempos de carga de su sitio, necesitamos empezar con una mirada básica a cómo un navegador web renderiza una página web.

Cuando un visitante aterriza en su sitio, su navegador web básicamente comienza en la parte superior del código de su sitio y lee hacia abajo. De arriba a abajo, ¿bien?

Si en ese proceso, se encuentra con un archivo CSS o JavaScript, necesita dejar de «leer» mientras espera para descargar y procesar ese archivo. El tiempo que pasa «en pausa» para descargar y analizar esos recursos podría dedicarse a algo mucho más productivo, como cargar la parte del contenido de su sitio web que es visible inmediatamente cuando alguien aterriza en la página.

Veamos un ejemplo extremo para mostrar por qué esto puede ser un problema.

Digamos que tiene este genial efecto de JavaScript en el pie de página de su sitio. Está potenciado por «coolfooter.js», que es un script al que se hace referencia en la parte superior del código de su sitio (aunque el efecto está en el pie de página, por lo que los visitantes no lo verán hasta que se desplacen al pie de página).

Así que un diseño muy aproximado para el código de su sitio podría ser algo así como:

Y aquí está la razón por la que esto es un problema:

Cuando un visitante llega a su sitio, su navegador comienza a leer de arriba a abajo. Así que antes de que pueda analizar y mostrar el HTML para el contenido de su sitio, necesita esperar para descargar y analizar el archivo coolfooter.js.

¿Resultado final? Se tarda más tiempo en mostrar el HTML para el contenido de arriba, lo que significa que sus visitantes percibirán que su sitio es más lento.

Cuando Google le dice que elimine los recursos de bloqueo de renderizado, está diciendo esencialmente, «oiga, no cargue recursos innecesarios en la parte superior del código de su sitio porque va a hacer que los navegadores de los visitantes tarden más en descargar la parte visible de su contenido».

Con los consejos de este post, podrá esperar a cargar ciertos recursos CSS y JavaScript hasta que la parte visible de su página ya se haya cargado.

¿Qué son los recursos para bloquear el renderizado?

Cuando nos referimos a los recursos de bloqueo de renderizado, normalmente hablamos de:

Es importante entender que no todos los archivos CSS y JavaScript bloquean el renderizado.

Por ejemplo, es importante cargar su CSS crítico cerca de la parte superior, de lo contrario sus visitantes podrían experimentar lo que se conoce como un flash de contenido sin estilo (FOUC).

¿Las imágenes son recursos que bloquean el renderizado?

No, las imágenes no bloquean el renderizado. Sigue siendo importante optimizar las imágenes para reducir el tamaño de los archivos, pero no hay que preocuparse por optimizar la ruta de entrega de las imágenes.

¿Cómo probar si su sitio web tiene recursos para bloquear el renderizado?

Para evaluar si su sitio de WordPress dispone actualmente de recursos de bloqueo de renderizado, puede utilizar Google PageSpeed Insights.

Todo lo que tiene que hacer es introducir la URL que quiere probar. Entonces, si tiene un problema con los recursos que bloquean el renderizado, PageSpeed Insights listará cada recurso individual en la sección Eliminar recursos que bloquean el renderizado en Oportunidades:

El mensaje

El mensaje «Eliminar los recursos que bloquean la reproducción» en PageSpeed Insights

¿Cómo se eliminan los recursos que bloquean el renderizado?

No se preocupe, no tiene que hacer esto manualmente. Hablaremos de los plugins de WordPress que pueden ayudarle a eliminar los recursos de bloqueo de renderizado en la siguiente sección.

Sin embargo, es útil entender lo que estos plugins están haciendo entre bastidores para eliminar los recursos de bloqueo del renderizado.

¿Cómo eliminar los recursos de bloqueo del renderizado de JavaScript?

Hay unas cuantas estrategias diferentes para eliminar los recursos de bloqueo de renderizado de JavaScript. Cubrimos esto en detalle en nuestro artículo sobre cómo diferir el análisis de JavaScript, pero aquí están los principales métodos:

Esta ilustración de «Creciendo con la Web» hace un gran trabajo para mostrar la diferencia:

JavaScript async vs deferir

JavaScript async vs defer

El beneficio de usar el defer es que sus guiones están garantizados para ejecutarse en el orden en que aparecen en el código.

Async no utiliza este enfoque, lo que a veces puede causar problemas si se aplica a todos los recursos de JavaScript porque a menudo puede romper los recursos que dependen de los recursos que aparecen antes en el documento. El problema más común que produce async es la rotura de los recursos de jQuery que tratan de cargarse antes de que se haya añadido jquery.js al documento.

¿Cómo eliminar el bloqueador de renderizado CSS?

Eliminar el bloqueo de renderizado CSS puede ser un poco más complicado porque hay que tener cuidado de no retrasar el CSS que se necesita para renderizar el contenido por encima de la página. El arreglo ideal es:

¿Cómo eliminar los recursos CSS y JavaScript que bloquean el renderizado con los plugins de WordPress?

Para demostrar cómo eliminar los recursos que bloquean el renderizado en WordPress, hemos creado un sencillo sitio de prueba que incluye CSS y JavaScript que bloquean el renderizado y luego le explicaremos cómo utilizar dos soluciones de plugin diferentes para eliminar el CSS y el JavaScript que bloquean el renderizado:

Como referencia, aquí está el aspecto de nuestro sitio de prueba antes de optimizar la entrega de CSS y JavaScript:

El mensaje

El mensaje «Eliminar los recursos que bloquean la reproducción» en PageSpeed Insights

Si está probando la efectividad de sus cambios con Google PageSpeed Insights, tenga en cuenta que Google almacena sus resultados en caché durante varios minutos. Esencialmente, esto significa que si rápidamente…

  1. Pruebe su sitio no optimizado
  2. Activar uno de los plugins de esta sección
  3. Vuelva a probar su sitio

…entonces seguirá viendo los resultados de su sitio no optimizado hasta que Google restablezca su caché. Así que asegúrese de esperar unos minutos para que Google limpie su caché antes de que piense que el plugin no funciona.

¿Cómo eliminar los recursos de bloqueo de renderizado con el plugin JavaScript de Autoptimize + Async?

Autoptimize y Async JavaScript son dos plugins independientes y gratuitos del mismo desarrollador. Juntos, le ayudan a optimizar la entrega de su CSS y JavaScript.

Una vez que haya instalado ambos plugins, ve a Settings → Async JavaScript y:

Cómo configurar el plugin de JavaScript Async

¿Cómo configurar el plugin de JavaScript Async?

Si la opción Async causa problemas en su sitio, le recomendamos que pruebe Defer o que excluya jQuery, para lo cual el plugin le da una opción.

¿Problemas con el tiempo de inactividad y problemas con WordPress? Kinsta es la solución de hosting diseñada teniendo en cuenta el rendimiento y la seguridad! Consulte nuestros planes

Una vez que haya configurado el plugin de JavaScript Async, vaya a Settings → Autoptimize y:

Cómo configurar el plugin de Autoptimización

¿Cómo configurar el plugin de Autoptimize?

Si es un usuario avanzado, puede jugar con los ajustes adicionales de optimización de JavaScript y CSS, pero la mayoría de los sitios estarán bien con los valores predeterminados.

Después de configurar tanto Autoptimize como Async JavaScript, nuestro sitio de prueba pasó la auditoría de PageSpeed Insights «Eliminar recursos de bloqueo de renderizado»:

Resultados de PageSpeed Insights con Autoptimize y Async JavaScript

Resultados de PageSpeed Insights con Autoptimize y Async JavaScript

Si quisiera eliminar aún más de esos archivos, podría usar Autoptimize para alinear manualmente su crítico CSS. Sin embargo, esto requiere algunos conocimientos de desarrollo, por lo que no es algo que los no desarrolladores deban intentar.

También puede usar los plugins por separado si lo prefiere. Pero dado que ambos plugins provienen del mismo desarrollador y están construidos para jugar bien entre ellos, el mejor enfoque para la mayoría de los sitios es combinarlos.

¿Cómo eliminar los recursos de bloqueo de renderizado con el WP Rocket?

WP Rocket es un popular plugin de rendimiento y cacheo de WordPress.

Normalmente, no permitimos los plugins de cacheo en los sitios de WordPress alojados en Kinsta porque ya manejamos el cacheo a nivel de servidor a través del rápido cacheo Nginx FastCGI.

Sin embargo, WP Rocket tiene una integración especial con Kinsta que permite a WP Rocket jugar bien con su caché Kinsta. Eso es genial porque WP Rocket hace mucho más por el rendimiento de WordPress que sólo el almacenamiento en caché, incluyendo la ayuda para eliminar los recursos CSS y JavaScript que bloquean el renderizado en su sitio de WordPress.

Una vez que instale y active WP Rocket, vaya a la pestaña de Optimización de Archivos. Entonces, habilite estas dos opciones:

Cómo configurar el WP Rocket

¿Cómo configurar el WP Rocket?

Después de activar estas dos características, nuestro sitio de prueba también pasó la auditoría de «eliminar los recursos de bloqueo de renderizado» en PageSpeed Insights. WP Rocket también se las arregló para eliminar más recursos de bloqueo de renderizado que la configuración de JavaScript de Autoptimize/Async:

Resultados de PageSpeed Insights con el WP Rocket

Resultados de PageSpeed Insights con el WP Rocket

¡Y así es como se eliminan los recursos de bloqueo de renderizado en su sitio web de WordPress!

¿Quiere deshacerse de los recursos de bloqueo de renderizado en #WordPress? Es súper fácil con los plugins adecuados... Mire cómo ajustar sus configuraciones y hacer su sitio más rápido! ⚙️🏃‍♀️Click to Tweet

Resumen

Los recursos de bloqueo de renderización disminuyen los tiempos de carga de las páginas de su sitio WordPress, obligando a los navegadores de los visitantes a retrasar la renderización de los contenidos por encima de la página mientras el navegador descarga los archivos que no se necesitan de inmediato.

Para ayudar a los visitantes a cargar la parte visible de su página más rápidamente, debería retrasar la carga de los recursos que no se requieren inmediatamente.

Para eliminar los recursos que bloquean el renderizado en WordPress, puede usar plugins off-the-rack.

Para una solución gratuita, puede usar la combinación de Autoptimize y Async JavaScript, dos plugins del mismo desarrollador.

Si está dispuesto a pagar, puedes usar WP Rocket, que ofrece una integración especial con Kinsta y puede ayudar con muchos otros ajustes de rendimiento de WordPress.

¿Tiene alguna pregunta adicional sobre cómo eliminar los recursos de bloqueo de renderizado en WordPress? ¡Háganoslo saber en los comentarios!


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes