Quitar el JavaScript que bloquea la visualización de contenido en WordPress

Quitar el javascript que bloquea la visualización de contenido

Con WordPress, reducir los JavaScript y recursos CSS que bloquean la renderización en tu sitio web es fácil. Puedes utilizar los tres plugins que enumeramos a continuación:

W3 Total Cache

Uno de nuestros favoritos es el plugin W3 Total Cache. Una vez instalado y activado, sigue estos pasos en tu panel de administración de WordPress:

  1. Ve a Rendimiento -> Ajustes generales.
  2. Desplázate hacia Minimizar. Veras algunas opciones debajo de este encabezado.
  3. Marca la casilla Activar en Minimizar. Luego, en Método de minimización, selecciona Manual.
  4. Haz clic en Guardar todos los ajustes.
    Minimizar recursos CSS y JavaScript con el plugin W3 Total Cache
  5. Obtén todos los scripts CSS y los JavaScript que bloquean la renderización, que puedes encontrar a través de Google PageSpeed Insights.
  6. Una vez que hayas encontrado al causante del problema, navega a Rendimiento – > Minimizar en tu panel de WordPress.
  7. Encuentra la sección JS. En Operaciones en las áreas, selecciona el tipo de incrustado No bloqueo usando «defer» para Antes de <head>.
  8. En Gestión de archivos JS, selecciona tu tema activo y haz clic en Agregar un script. Copia y pega las URLs de JavaScript de Google PageSpeed Insights en los campos provistos, como se muestra a continuación.
    Eliminar los recursos JS que bloquean el renderizado con el plugin W3 Total Cache
  9. Desplázate hacia abajo a la sección CSS. En Gestión de archivos CSS, elige tu tema activo y haz clic en Agregar una hoja de estilo. Al igual que en el paso anterior, copia las URLs de las hojas de estilo CSS de PageSpeed Insights y pégalas en los campos correspondientes.
    Eliminar los recursos CSS que bloquean el renderizado con el plugin W3 Total Cache
  10. Para terminar, haz clic en el botón Save Settings & Purge Caches.

Autoptimize

También puedes usar el plugin Autoptimize para resolver el error de bloqueo de renderización de JavaScript y CSS. Sigue estos pasos en tu panel de control una vez que el plugin esté instalado y activado:

  1. Ve a Ajustes -> Autoptimize.
  2. Marca las casillas ¿Optimizar el código JavaScript? y ¿Optimizar el código CSS?
  3. Haz clic en Guardar cambios y vaciar la cache.
    Optimizar JavaScript y CSS con el plugin Autoptomize

En la mayoría de los casos, esto es suficiente para solucionar el problema. Sin embargo, el resultado puede variar dependiendo de tu tema y de los plugins activos.

Para asegurarte de que tu problema se ha resuelto, vuelve a pasar tu sitio por PageSpeed Insights. Si quedan recursos JS y CSS que bloquean, lleva la optimización aún más lejos siguiendo estos pasos:

  1. Regresa a Ajustes – > Autoptimize.
  2. Selecciona las opciones ¿Incluir JS incrustados? e ¿Incluir CSS incrustados?
    Opciones avanzadas para optimizar incluyendo CSS y JS incrustados
  3. Guarda los cambios.

Leave a comment