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:
- Ve aĀ RendimientoĀ ->Ā Ajustes generales.
- DesplÔzate hacia Minimizar. Veras algunas opciones debajo de este encabezado.
- Marca la casilla Activar en Minimizar. Luego, en Método de minimización, selecciona Manual.
- Haz clic enĀ Guardar todos los ajustes.
- Obtén todos los scripts CSS y los JavaScript que bloquean la renderización, que puedes encontrar a través de Google PageSpeed Insights.
- Una vez que hayas encontrado al causante del problema, navega aĀ RendimientoĀ ā >Ā MinimizarĀ en tu panel de WordPress.
- Encuentra la sección JS. En Operaciones en las Ôreas, selecciona el tipo de incrustado No bloqueo usando «defer» para Antes de <head>.
- 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.
- 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.
- 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:
- Ve aĀ Ajustes -> Autoptimize.
- Marca las casillas ¿Optimizar el código JavaScript? y ¿Optimizar el código CSS?
- Haz clic enĀ Guardar cambios y vaciar la cache.
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:
- Regresa aĀ Ajustes ā > Autoptimize.
- Selecciona las opcionesĀ ĀæIncluir JS incrustados?Ā eĀ ĀæIncluir CSS incrustados?
- Guarda los cambios.
