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!

Archivos sobre los cuales no se aplica el defer

La carga diferida no se aplicará a los archivos que usan uno o ambos de los siguientes atributos:

  • async 
  • data-cfasync="false"

Opciones obsoletas: 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

Nuestra herramienta de generación de la ruta crítica del CSS no genera un CSS específico para el CSS. Si usas un tema responsive, el CSS crítico debería ser más o menos lo mismo; sin embargo, si usas un tema distinto para los dispositivos móviles, todavía no es posible genera un CSS para ellos.

Generar la ruta crítica del CSS

WP Rocket te permite de gestionar muy facilmente optimizaciones de rendimiento avanzadas como la carga asíncrona del CSS y la ruta crítica del CSS.

Cuando activas la opción Optimizar la entrega del CSS, el CSS se cargará de manera asíncrona en tu sitio web. Además, WP Rocket creará una ruta crítica de CSS y la añadirá al momento de la siguiente carga de la página.

Nuestra herramienta externa irá a buscar el primer acceso de cada post type público (entradas, páginas, productos etc.), así como las páginas públicas del archivo taxonomías (categorías, etiquetas, categorías de producto etc.). Por cada uno de esos tipos de página, nuestra herramienta extraerá la ruta crítica del CSS y enviará el código a WP Rocket, para que él lo añada a las respectivas páginas, en el orden requerido por los visitantes o por la función de precarga de la caché.

De esta manera, la ruta crítica del CSS generada por WP Rocket se conforma a las distintas características de front-end disponibles en los diferentes tipos de página de tu sitio web.

Por ejemplo, si tu página principal presenta un slide, la ruta crítca del CSS para esa página reflejará esa característica, mientras que la ruta crítica del CSS para una entrada del blog podría ser considerablemente distinta.

Cuándo hay que regenerar la ruta crítica del CSS

Cuando haces cualquier modificación a tus hojas de estilo, o añades/modificas el CSS personalizado a través del Personalizador WordPress (o de un plugin), deberpias regenerar la ruta crítica del CSS usando la barra de herramienta en el menu WP Rocket: 

Nuestro generador de ruta crítica del CSS

Te dejamos un par de notas sobre el funcionamiento de nuestro generador de ruta crítica:

  1. Tu sitio debe ser publicamente accesible para que el generador funcione correctamente; esto significa que no funcionará para los sitios instalados localmente.
  2. Las rutas relativas de imágenes y fonts se convertirán automáticamente en URLs absolutas.
  3. La ruta crítica del CSS será refinada y minificada con cura. Esto significa que cualquier espacio necesario (como lo de la función calc() ) o las barras diagonales inversas (como '\f311' para un glifo en un fuente ícono) serán preservados.

Ruta crítica CSS alternativa

En caso de que nuestra herramienta no pueda generar la ruta crítica del CSS, puedes usar este campo alternativo para específicar tu propia ruta. Esta se aplicará cada vez que el CSS no haya sido creado todavía. Para generar el CSS necesario, puedes usar esta herramienta: Critical Path CSS Generator

1
Desactiva WP Rocket antes de empezar a usar el Critical Path CSS Generator !
2
Ingresa tu URL y copia el CSS que le herramienta creará en el campo de WP Rocket Fallback critical path CSS :

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);

Excluir archivos de la carga asíncrona

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