Velocidad Impacto alto Fácil 5 a 15 minutos

Aplazar / asíncrono en scripts

Una renderización de bloques <script> sincrónica: posponerla.

Qué es

Cuando el navegador encuentra un <script> simple, deja de mostrar la página, descarga y ejecuta el script, y sólo entonces continúa. Esto se denomina script de "bloqueo de renderizado". Los atributos diferidos y asíncronos cambian este comportamiento.

Por qué importa

Cada script de bloqueo en la cabeza retrasa el momento en que el usuario ve el contenido (empeorando LCP y First Paint). Con múltiples guiones los retrasos se acumulan. En dispositivos móviles y conexiones lentas, esto significa segundos de una página en blanco vacía y una tasa de rebote más alta.

Cómo hacerlo

1Marque los scripts que no son necesarios para el primer renderizado con el atributo defer: se descargan en segundo plano y se ejecutan solo después de crear la página, en el orden en que aparecen.
2Para scripts independientes (análisis, chat), utilice async: se ejecutan tan pronto como se descargan, independientemente del orden.
3Mantenga los guiones críticos al mínimo; cargar el resto al final de <body> o con diferimiento.
4Regla: aplazar = depende del DOM o del orden; async = independiente, nada depende de ello.

Ejemplo

Incorrecto

<head>
  <script src="/js/app.js"></script>   <!-- blocks rendering -->
</head>

Correcto

<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

Conclusión

Defer/async es una de las optimizaciones de velocidad más económicas y efectivas; a menudo es suficiente agregar una sola palabra a la etiqueta. Para la mayoría de los guiones, diferir es la opción correcta. Después de la implementación, verifique que nada haya dejado de funcionar (especialmente los scripts que dependen del pedido) y mida la mejora de LCP.

Temas relacionados