JavaScript y CSS que bloquean la visualización - PageSpeed

Nota: Para aprender más sobre PageSpeed Insights y porqué no deberías importarte demasiado conseguir una buena "nota", lee este artículo: Mi nota Google PageSpeed no mejora

Uno de los problemas de Google PageSpeed Insights es que algunas de sus sugerencias muy genéricas o difícil de implementar. Una de las más típicas es:

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

WP Rocket prevé dos opciones para abordar esta recomendación: las encontrarás dentro de la pestaña Archivos Estáticos:

Cuando activas estas opciones podrías ver una mejoría en las notas de PageSpeed, GT Metrix o Pingdom. Los resultados varían según el sitio web: recuerda que lo más importante es siempre medir la velocidad real de tu sitio, no las notas.


Cargar archivos JS de manera diferida

Esta opción se refiere a la recomendación PageSpeed:

Eliminar el JavaScript que bloquea la visualización

A nivel de rendimiento, es preferible que el JavaScript se cargue en pié de página o de manera ansincrónica: de esta manera no bloquea la descarga de otros elementos del sitio web y no lo ralentizan. 

Cuando activas esta opción, todos tus archivos JS, incluyendo los minificados por WP Rocket se cargarán con el atributo defer :

Si ves algún problema justo tras la activación de esta opción, deberías activar también el Modo Seguro, que - por razones de compatibilidad - excluye los jQuery del proceso de carga diferida:

Dependiendo de la configuración de tu sitio web, podría ser necesario excluir unos ficheros del proceso de carga diferida:
Excluir archivos JS del proceso de carga diferida

Recuerda que Google no tiene en consideración que a veces no es posible cargar el JavaScript de manera diferida – por lo menos no sin romper tu sitio web. Cualquier archivo que excluyas de la carga diferida hará que PageSpeed se queje; no hay nada que puedas hacer para evitarlo!

Opciones deprecadas: Si estabas usando las viejas opciones avanzadas "Archivos JS con carga diferida" o "que tienen que estar en el pié de página durante el proceso de minificación", seguirás viéndolas cuando actualices WP Rocket a la versión 2.10.x
Sin embargo, estas opciones serán deprecadas en la futuras versiones de WP Rocket, entonces te recomendamos de usar esta nueva opción de carga diferida en su lugar, ya que substituye las precedentes.

Cargar archivos CSS de manera asíncrona

La opción de WP Rocket para cargar los archivos CSS de manera asíncrona, aborda la recomendación PageSpeed:

Optimizar la entrega del CSS

¡Atención! Esta se considera una opción muy avanzada. Podría ser necesario editar el código manualmente para hacerla funcionar.

Cargar los archivos CSS de manera asíncrona, significa que tu página empezará a cargara y será visible sin todo su estilo CSS. Podría entonces pasar que, mientras se carga, se visualice de manera un poco rara durante unos instantes. Ejemplo:

Este fenómeno se llama FOUC: Flash of un-styled content (Flash de contenido sin estilo). Para evitarlo, tienes que usar la que se llama ruta crítica del CSS. Esto significa que el CSS del contenido encima a tu página tiene que posicionarse directamente dentro del HTML, para evitar el FOUC durante la carga de la página.

Generar la ruta crítica del CSS

Para generar el CSS necesario, puedes usar esta herramienta: Critical Path CSS Generator
y seguir estos pasos:

1
Desactiva WP Rocket antes de usar la herramiental!
2
Añade tu URL como indicado en la página del generador y copia el CSS que obtendrás dentro del campo Ruta crítica del CSS de los ajustes WP Rocket:
Nota: No necesitas el código JavaScript producido por el generador de CSS. Copia exclusivamente el CSS dentro de los ajustes WP Rocket, la parte relativa JS se actualizará automáticamente.

Atención! Es posible que tengas que editar los URLs relativos presentes en tu código (ej. lo que usas para las imágenes de fondo, los fonts etc.) y convertirlos manualmente en URL absolutos.

Por ejemplo, si el CSS generado contiene una referencia relativa a un font, como en este caso:

@font-face{font-family:droid_serifregular;src:url(../DroidSerif-webfont.eot);

la ruta relativa (indicada por ../ en el URL) no será correjida automáticamente cuando la quitarás de su contexto original. Tendrás que remplazarla con su contenido correcto y absoluto, por ejemplo:

@font-face{font-family:droid_serifregular;src:url(http://example.com/wp-content/themes/neutro/font/droid_serif_regular/DroidSerif-webfont.eot);

Si necesitas excluir un archivo CSS específico del proceso de carga asíncrona, sigue esta guía:
 Excluir archivos CSS del proceso de carga asíncrona