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

En este artículo

¿Qué son el JavaScript y el CSS que bloquean la visualización?

Antes de que el navegador pueda visualizar una página web, tiene que reproducir su HTML. Durante este proceso, cada vez que el navegador encuentre un elemento que hace referencia a un script o a una hoja de estilo, tiene que detenerse, pedir el archivo, esperar que se desacargue desde el servidor, y ejecutarlo antes de poder finalmente terminar de diseccionar el HTML. Considerando que la mayoría de los temas y plugins WordPress cargan no solo uno, sino múltiples archivos CSS y/o JavaScript, este proceso puede demorar significativamente el tiempo de la primera visualización de la página.

Por esta razón, se recomienda de retrasar (diferir) la carga de los archivos no-críticos hasta que el navegador haya terminado de procesar la página. Este proceso requiere un ajuste de la fuente del código HTML de la misma página, además de un profundo conocimiento de cuál archivo es necesario en un determinado momento del proceso de análisis de la página. ¿Te suena complicaod? ¡Efectivamente lo es!

Sin embargo, herramientas como Google PageSpeed lo hacen sonar muy sencillo:

“Eliminate render-blocking JavaScript and CSS in above-the-fold content”

que en la versión en español leerías como

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

Como muchas de las sugerencias de PageSpeed Insights, esta es bastante genérica y puede ser difícil de implementar—incluso con un plugin fácil de usar como WP Rocket!

WP Rocket tiene 2 opciones para abordar esta nota de Google PageSpeed:

  • Optimizar la entrega del CSS
  • Cargar archivos JavaScript de manera diferida

Las encuentras en la pestaña Optimizar archivos, debajo de Archivo CSS y Archivos JavaScript :

Activando estas opciones, podrías ver una mejoría significativa en las notas de GTmetrix, Pingdom Tools, y Google PageSpeed Insights. Los resultados podrían variar de un sitio web a otro. Recuerda siempre de revisar el efecto en la velocidad (tiempo de carga) de tu sitio.

Optimizar la entrega del CSS

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

Optimize CSS delivery

--O--

Optimizar la entrega del CSS

¡Atención!  Nuestra herramienta de generación de la ruta crítica del CSS no genera un CSS específico para dispositivos móviles. 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 generar un CSS para ellos.

Generar la ruta crítica del CSS

WP Rocket te permite 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. Después de este proceso, el CSS será cargado en tu sitio de manera asíncrona.

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:

La ruta crítica del CSS se generará automáticamente cuando: 

  • Activas la opción Optimizar entrega del CSS
  • Cambias de tema

Nuestro generador de ruta crítica del CSS

Te dejamos unas notas sobre el funcionamiento de nuestra herramienta de generación de la ruta crítica del CSS: 

  1. Tu sitio tiene que se publicamente accesible para que la herramienta puede funcionar; es decir que no funcionará en sitios hospedados en entorno local.
  2. Hay que añadir a la lista blanca de tu servidor o de tu plugin de seguridad el siguiente IP : 167.114.226.142
  3. Las rutas relativas de las imágenes y de las fuentes será automáticamente transformadas en URLs relativas
  4. El CSS crítico será recortado y minificado con cura. Esto significa que cualquier espacio necesario (como los que se encuentran dentro de las operaciones calc()) o las barras invertidas (como '\f311' para un glifo en una fuente ícono) serán preservados.

Prevenir la generación automática del CSS Crítico

Podrías prevenir la generación automática del CSS crítico instalando el siguiente plugin de soporte.

📥  Descarga  (.zip):  WP Rocket | No Auto-generated Critical CSS
Si te ocupas del desarrollo del sitio: Puedes encontrar el código para este plugin en GitHub.

Modificar el CSS Critical generado

Si te gustaría modificar el CSS crítico generado por nuestra herramienta, sigue estos pasos:

1
Usa la herramienta para generar automáticamente el CSS crítico para tu sitio.
2
Desactiva la generación automática para el futuro, usando el plugin de soporte mencionado arriba.
3
Los archivos CSS generados serán archivados en tu servidor:  wp-content/cache/critical-css
Si te ocupas de desarrollo y entiendes de CSS, puedes modificar directamente esos archivos. 
4
Borra la caché WP Rocket.

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

Cargar los archivos JavaScript de manera diferida

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

Remove render-blocking JavaScript

--O--

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 asincró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;sin embargo se trata de falsas alarmas.Si tu sitio requiere el jQuery de bloqueo de la visualización para funcionar correctamente, desactivar el Modo Seguro podría solucionar la nota PageSpeed rompiendo pero la funcionalidad de tu sitio.

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"