Optimiza la prioridad de las secuencias de comandos

Los navegadores asignan prioridades predeterminadas a las secuencias de comandos según dónde aparecen en el documento y si tienen atributos como async o defer. El uso de fetchpriority les brinda a los desarrolladores un control explícito para garantizar que las secuencias de comandos críticas se carguen primero, mientras que las no esenciales se mantienen fuera del camino.

Cómo implementarlo

1. Identifica las secuencias de comandos fundamentales: Determina qué secuencias de comandos son esenciales para la funcionalidad principal de la página o la interacción inicial del usuario.
2. Eleva las secuencias de comandos asíncronas críticas: Para las secuencias de comandos críticas cargadas con async o defer, agrega el atributo fetchpriority="high" para asegurarte de que se prioricen durante la fase de descubrimiento.
3. Quita la prioridad de las secuencias de comandos no esenciales: Para las secuencias de comandos que no se necesitan de inmediato (p.ej., estadísticas, anuncios o widgets en la mitad inferior de la página), agrega fetchpriority="low" y asegúrate de que tengan un atributo async, defer o module para evitar el bloqueo.
4. Secuencia de comandos que bloquean el analizador: Usa fetchpriority="low" en las secuencias de comandos que bloquean el analizador al final del cuerpo para evitar que compitan por el ancho de banda con recursos más críticos.

Ejemplo de código

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

Prácticas recomendadas

• OBLIGATORIO: Solo usa fetchpriority="high" en 1 o 2 secuencias de comandos críticas como máximo para evitar la contención de la red y diluir el aumento de prioridad.
• SÍ uses fetchpriority="high" específicamente para las secuencias de comandos async que se sabe que son fundamentales para Interaction to Next Paint (INP).
• SÍ quita la prioridad de las secuencias de comandos que no son necesarias para la experiencia inicial del usuario con fetchpriority="low".
• NO uses fetchpriority en todas las etiquetas de secuencia de comandos. Solo se debe usar para cambiar la heurística predeterminada del navegador cuando se sabe que no es óptima.
• NO uses el atributo importance obsoleto. Se reemplazó por fetchpriority.

Estrategia de resguardo

El atributo fetchpriority es una mejora progresiva. Los navegadores que no lo admitan ignorarán el atributo y usarán su lógica de programación interna sin errores. No se requiere una detección de funciones explícita ni una lógica de resguardo para el uso básico.