Eliminar JS y CSS que bloquean visualización en mitad superior de página

Si has utilizado Google Pagespeed, en la mayoría de los casos verás la sugerencia de que debería «Eliminar el bloqueo de renderizado de JavaScript y CSS en el contenido superior».

¿Qué significa Eliminar JavaScript y CSS de bloqueo de render?

Esto es lo que Google dice para Javascript:

Antes de que un navegador pueda renderizar una página al usuario, tiene que analizar la página.

Si encuentras un script externo que bloquea durante el análisis, tiene que parar y descargar ese Javascript.

Cada vez que lo haces, está añadiendo un viaje de ida y vuelta a la red, lo que retrasará el tiempo para la primera renderización de la página.

Esto es lo que Google dice para CSS:

Esta regla se activa cuando PageSpeed Insights detecta que una página incluye el bloqueo de las hojas de estilo externas, lo que retrasa la pintura del contenido en la pantalla.

Los medios según el contenido de google por encima del pliegue deben ser mostrados al usuario tan pronto como un usuario aterrice en una página sin esperar a que estos archivos sean descargados en el sistema del usuario y para esto Google recomienda que debe Inline necesario Javascript y archivos CSS, lo que no es práctico en la mayoría de los casos como la mayoría de los usuarios de WordPress no son codificador y es como la codificación de un nuevo tema casi y también mata la importancia de la hoja de estilos.

(Esto es lo que hacen con la página de búsqueda de google).

Entonces, ¿cuál es la solución?

• 1.Haz lo que Google dice, en línea las secciones importantes (No es posible aquí).
• 2.Cargar los archivos asincrónicamente.

¿Cuál es el objetivo y es posible alcanzarlo?

Antes de mudarnos, debemos saber cuál es nuestro objetivo y qué dice google.

Como he dicho antes, Google quiere que el contenido por encima del doblez se muestre al usuario sin esperar a que estos archivos se descarguen, lo que significa que el objetivo es reducir el tiempo de espera.

Recuerda que el objetivo es reducir el tiempo de espera, no conseguir una mejor puntuación de Velocidad de página.

Recuerda siempre se trata de mejorar la experiencia del usuario.

¿Es posible?

Sí, lo es si desea reducir el tiempo de espera, pero en caso de que desee mejorar la velocidad de página de la partitura puede ser o no, depende de algunos factores.

Eliminar el JavaScript que bloquea el render usando W3 Total Cache

Arreglando los problemas usando w3 Total Cache (hemos escrito la configuración para W3 Total Cache)

Ya no es posible obtener el resultado exacto deseado usando W3, por lo tanto usaremos otras formas posibles, pero aún así puedes cargar Javascript asincrónicamente usando la caché total de W3, que es la mitad de nuestro objetivo.

1. Navega a Rendimiento (es decir, caché total W3) > minify tab

Ahora aquí bajo los ajustes «JS», es decir, javascript habilitar «JS minify settings» y elegir «Non-blocking using async» como se muestra en la imagen de abajo, ahora los archivos javascript se cargarán asincrónicamente.

Elimine el bloqueo de renderizado de JavaScript y CSS en el contenido superior con Speed Booster Pack

Con la ayuda de la caché total W3 sólo se pueden cargar archivos Javascript de forma asíncrona, pero con «Speed Booster pack» se podrán cargar tanto archivos CSS como Javascript de forma asíncrona, lo que eliminará completamente el error.

• Instala el plugin «Speed Booster Pack» del directorio de plugins de WordPress.
• Ahora ve a Ajustes > Speed Booster Pack
• En la parte superior de la «Opción General», habilita las opciones «Mover scripts al pie de página» y «Diferir el análisis de archivos javascript» y esto eliminará el bloqueo de los archivos javascript, ya que ahora se cargarán de forma asíncrona.
• Ahora ve al final de la página, expanda la opción «Aún necesita más velocidad» y habilita la opción «cargar CSS asincrónicamente», esto eliminará el error de la parte CSS.

Listo

Elimine el bloqueo de renderizado de JavaScript y CSS en el contenido superior con Async JS and CSS settings

Hay otro plugin más que puedes usar, por ejemplo, «Async JS and CSS settings» Descárgalo desde aquí.

Pero recuerda que no se ha actualizado desde hace un año, pero puedes intentarlo.

Cómo configurar Async JS and CSS

1. Cargar Javascript de forma asíncrona: Habilitar
2. Detectar <script> tags en wp_head: Desactivar
3. Detectar <script> tags en wp_footer: Desactivar
4. Cargar CSS asincrónicamente: Habilitar
5. Método de carga de CSS: Déjalo como está
6. Minify CSS: Habilitar
7. Quitar la parte «?ver=XXX» de las URLs: Habilitar

Con estos pasos, ya habrás conseguido eliminar el JavaScript y CSS que elimina la parte superior de la página.