Cómo corregir el bloqueo de renderizado Javascript en WordPress

Tener un sitio web significa mantenerlo en plena forma y asegurarse de que sea lo más agradable posible para sus visitantes, clientes e incluso para los rastreadores que Google emplea para comprobar su sitio.

Dicho esto, en un esfuerzo por optimizar su sitio web WordPress, es posible que se haya encontrado con "Render Blocking JavaScript" y haya pensado, woah... ¿qué es eso?

En pocas palabras, JavaScript es una pieza de código que puede estar presente en su sitio web para habilitar algunas funciones de su tema o plugins. Y "Render Blocking" significa que estos códigos JavaScript están bloqueando o ralentizando la forma en que su sitio web se muestra, o renderiza, por su navegador.

Pero no te preocupes, en este artículo hablaremos de cómo podemos solucionar estos problemas y te daremos las mejores opciones para solucionarlos.

Empecemos.

Render Blocking JavaScript - una visión general

Antes de empezar a repasar cómo resolver este problema de Render Blocking JavaScript, primero vamos a tener una comprensión más profunda de lo que es en primer lugar.

¿Qué es el bloqueo de renderizado JavaScript?

En la mayoría de los casos, los temas y plugins que utilice en su sitio web WordPress añadirán archivos JavaScript (JS) y hojas de estilo en cascada (CSS) al frontend. Ahora, cuando un usuario intenta acceder a tu sitio web desde su navegador, todas estas secuencias de comandos se cargarán primero antes de que tu sitio sea visible.

En términos generales, el navegador necesita cargar una cola de archivos JS, CSS y HTML antes de que el usuario pueda ver el contenido principal. Ahora bien, si usted tiene demasiados de estos scripts JS que retrasará el contenido HTML principal de carga. Esto, a su vez, ralentiza su sitio web y obliga a los usuarios a esperar.

Ahora bien, si la velocidad de carga de su sitio se ve afectada por JavaScript, entonces estos fragmentos de código se denominan Render Blocking JavaScript.

¿Por qué debe eliminarlo?

Render Blocking JavaScript hace que su sitio se cargue lentamente, lo que no sólo afecta a la experiencia del usuario (UX), sino que también afecta a su rendimiento SEO.

A la gente no le gusta esperar. Si un sitio tarda más de 3 segundos en cargarse por completo, puede sufrir una 11% tasa de rebote. La cifra sube a 38% si el tiempo de carga de su sitio es superior a 5 segundos.

Con más gente rebotando en su sitio web, los motores de búsqueda como Google moverán su sitio más abajo en sus resultados de búsqueda, lo que conducirá a menos tráfico y menos gente en su sitio.

Ahora bien, el simple hecho de solucionar tu problema de bloqueo de renderización de JavaScript no te llevará a la primera página de Google. Tampoco le ayudará a mejorar drásticamente su velocidad de carga. De hecho, hay un montón de factores que pueden tener un impacto en el tiempo de carga de su sitio. Sin embargo, le ayudará a dar un paso adelante.

La regla general es mantener el código del sitio lo más reducido y limpio posible. Además, asegúrese de que el contenido de la parte superior de la página (la parte de su sitio web que los visitantes ven de inmediato) se carga sin problemas.

Por lo tanto, para disfrutar de un tiempo de carga óptimo y ofrecer una mejor experiencia de usuario, se recomienda que resuelva sus problemas de Render Blocking JavaScript lo antes posible.

¿Cómo eliminar el JavaScript que bloquea la renderización?

Hay un montón de maneras diferentes que usted puede resolver el Render Blocking JavaScript de plagar su sitio web. Algunas implican ponerse manos a la obra con un poco de codificación. Sin embargo, como sucede con WordPress, también puedes utilizar plugins para ayudarte.

Pero primero, vamos a ver las cosas que podemos hacer manualmente, es decir, si y sólo si usted ya sabe lo que está haciendo. Dado que el cambio de estos archivos, especialmente en WordPress puede innegablemente romper su sitio, le recomendamos precaución.

Utilizar JavaScript en línea

A veces, el tema y los plugins pueden incluir JavaScript externo que obliga al navegador a buscar y descargar el JS de otra fuente. Como puedes imaginar, esto aumenta el tiempo de carga.

Ahora, si los scripts externos son pequeños, puede utilizarlos directamente en su documento HTML. Esto elimina por completo la latencia de la solicitud de red.

He aquí un ejemplo de cómo hacerlo.

Digamos que su documento HTML contiene un archivo JS externo -

<script type="text/JavaScript" src=”anotherSource.js"></script>

Y supongamos que otraFuente.js contiene el siguiente código JS:

  /* contents of a small JavaScript file */ 

Todo lo que tienes que hacer es copiar el código JS de la segunda fuente y pegarlo en tu documento original así:

<script type="text/JavaScript">
      /* contents of a small JavaScript file */
</script>

Es una técnica sencilla que elimina la necesidad de enviar una solicitud externa de otraFuente.js mejorando así el tiempo de carga.

Sin embargo, tenga en cuenta que la incrustación de JS aumentará el tamaño del archivo, lo que a su vez incrementará el tiempo de carga. Así que sólo inline pequeños archivos JS.

Si ve un archivo grande con varias páginas de JS, consulte una de las otras soluciones.

Aplazar la carga de JavaScript

El principal problema del bloqueo de la renderización de JavaScript es que retrasa la renderización del contenido importante que el usuario ha venido a ver, en concreto, el contenido de la mitad superior de la página.

Por lo tanto, una forma de resolver el problema es aplazar la carga de JS para que se cargue después de que las partes críticas de su sitio web hayan terminado de cargarse. Esto puede ayudar a evitar la contención de recursos y mejorar el rendimiento.

Ahora, una de las formas de aplazar la carga de JS es moverla al pie de página. Esto se puede hacer manualmente, o puede utilizar uno de los plugins que se enumeran a continuación.

Los 3 mejores plugins para eliminar el JavaScript que bloquea la renderización

Aquí tienes algunos plugins de WordPress que pueden ayudarte a resolver problemas de Render Blocking JavaScript.

1. Limpieza de activos

Limpieza de activos es un plugin gratuito para WordPress que escanea todas tus entradas y páginas de WordPress y detecta todos los archivos JS y CSS que se cargan. A continuación, te da la opción de desactivar los archivos JS y CSS que no son necesarios, eliminando así la carga adicional.

No sólo eso, sino que el plugin también puede ayudar a minificar y combinar los archivos JS/CSS para hacerlos más cortos y fáciles (más rápidos) de cargar.

Aquí tienes una guía paso a paso sobre el uso del plugin:

Primer paso: Acceda a su panel de WordPress. A continuación, desde la barra lateral izquierda, vaya a Plugins > Añadir nuevo. Busque el plugin Asset CleanUp y pulse el botón Instalar ahora seguido de Activar.

Paso 2: Ahora, de nuevo desde la barra lateral izquierda, navegue hasta Limpieza de activos > Gestor de carga CSS/JS. Aquí encontrará todo el contenido de su sitio web, desde la página de inicio hasta las entradas, las páginas y los tipos de entradas personalizados. Seleccione el que desea optimizar.

Paso 3: Al seleccionar una de las opciones, se mostrarán todos los archivos CSS/JS activos que se ejecutan en la página web. Ahora puedes desactivar selectivamente los archivos que no necesites para reducir la carga durante el renderizado de la página web.

Paso 4: Una vez hecho esto, haga clic en Actualizar y vaya a la siguiente página, entrada o tipo de entrada personalizada y repita el paso 3.

Y ¡voilá! Usted ha desactivado con éxito todos los no deseados o Render Blocking JavaScript de su sitio web.

Nota: El plugin también viene con un built-in Modo de prueba. En primer lugar, desactive los archivos JS en el modo de prueba para asegurarse de que no rompe su sitio web.

2. Cohete WP

Cohete WP es un conocido plugin de optimización de sitios que viene con toneladas de características avanzadas, incluyendo minificación CSS/JS, lazy loading de imágenes, aplazamiento de peticiones JavaScript, y mucho más. Sin embargo, todas estas características tienen un precio, y a diferencia de Asset CleanUp, WP Rocket es un plugin premium (de pago).

Ahora, dicho esto, aquí está un resumen paso a paso sobre cómo utilizar el plugin para eliminar Render Blocking JavaScript.

Primer paso: Instala y activa WP Rocket en tu sitio web WordPress. Como es un plugin premium, no puedes instalarlo desde el repositorio de plugins de WordPress. Después de comprar el plugin, podrás descargarlo en un archivo .zip.

Ahora, inicie sesión en su panel de WordPress, Plugins > Añadir nuevo y haga clic en el botón Subir Plugin opción. Ahora sólo tiene que elegir y cargar el plugin en su sitio web y activarlo.

Paso 2: Una vez hecho esto, vaya a Configuración > WP Rocket. Aquí encontrará todas las opciones disponibles con WP Rocket.

Localice el Optimización de archivos en la que debería ver Archivos JavaScript Ajustes.

Paso 3: Encender Cargar JavaScript en diferido - una opción dedicada a ayudar a eliminar el Render Blocking JavaScript. También debería ver la opción Modo seguro para JQuery. Se recomienda mantener esta opción activada. Si lo desactiva, podría romper su sitio web.

También puede activar la función Reducción de archivos JavaScript ya que reducirá el tamaño del archivo JS haciéndolo más ligero y fácil de cargar.

3. Colibrí

Otro impresionante plugin de optimización de velocidad que nos gustaría que probaras es Colibrí. Es un plugin gratuito repleto de funciones con opciones que te ayudarán con el almacenamiento en caché, la minificación, el aplazamiento de archivos JS y CSS críticos, la carga diferida y mucho más.

Ofrece una solución de un solo clic para escanear, detectar y solucionar automáticamente los problemas de rendimiento más comunes para mejorar la velocidad de carga. Pero si usted está buscando para solucionar su problema de JavaScript de bloqueo de renderizado, a continuación, siga los pasos que se indican a continuación:

Primer paso: Instale y active el plugin Hummingbird en su sitio web WordPress.

Paso 2: Después de activar el plugin, debería notar que se ha añadido una nueva opción "Colibrí" en la barra lateral izquierda de su panel de control de WordPress. Deberá ir a Hummingbird > Optimización de activos.

Paso 3: Ahora, como se muestra en la imagen de abajo, Activar el modo avanzado para mover los archivos JS al pie de página.

Paso 4: Ahora simplemente seleccione los archivos JS que están causando los problemas de bloqueo de renderizado y muévalos al pie de página.

Esto debería retrasar su tiempo de carga y permitir que el contenido por encima de la página se cargue sin obstáculos.

Conclusión

Esperamos que haya comprendido claramente qué es el bloqueo de renderizado JavaScript y cómo solucionarlo. Hemos incluido tanto ajustes basados en código como recomendaciones de plugins para ayudarte a solucionar el problema.

Sin embargo, si sigues teniendo problemas, no dudes en mencionarlos en los comentarios. Nuestro equipo o alguno de nuestros lectores te ayudará.