Loading Sequence

Optimiser la Loading Sequence (séquence de chargement) est crucial pour garantir une expérience utilisateur fluide et réduire l'impact énergétique des devices utilisateurs.

Pourquoi c'est compliqué ?

Souvent, il existe un écart entre ce que nous pensons prioriser et ce que le navigateur fait réellement.

Problèmes courants

1. Séquençage sous-optimal : Les ressources nécessaires au FCP ou LCP sont bloquées par des scripts non critiques.
2. Utilisation inefficace du Réseau/CPU : Téléchargement de scripts volumineux qui saturent la bande passante ou le thread principal au mauvais moment.
3. Scripts Tiers (3rd Party) : Analytics, publicités, widgets sociaux qui s'insèrent de manière désordonnée et bloquent le rendu.

---

La Loading Sequence Idéale

L'objectif est d'ordonner le chargement pour satisfaire les métriques dans l'ordre logique : FCP → LCP → Interactivité.

Séquence Recommandée

1. Ressources Critiques (FCP) :

   • HTML initial.
   • Critical CSS (idéalement inliné ou via preload).

     Le Critical CSS est la partie minimale du CSS nécessaire pour afficher le début de la page (Above the Fold). Tout le reste peut être chargé plus tard pour ne pas bloquer le rendu.

   • Polices de caractères (Fonts) critiques.

2. Contenu Principal (LCP) :

   • Images visibles Above the Fold (ATF).
   • Note : Ne pas utiliser le lazy-loading sur l'image LCP !

3. Interactivité & Reste de la page :

   • Téléchargement et exécution du JavaScript applicatif.
   • Ressources "Below the Fold" (BTF) chargées en lazy-loading.
   • Scripts tiers non-essentiels (différés).

Stratégies d'Optimisation

Preload vs Preconnect

Une confusion fréquente existe entre ces deux instructions :

• Preload (<link rel="preload">) : Ordonne au navigateur de télécharger une ressource immédiatement (haute priorité) car elle sera utilisée dans la page courante (ex: Hero Image, Font critique).
• Preconnect (<link rel="preconnect">) : Demande au navigateur d'établir à l'avance la connexion réseau (DNS, TCP, TLS) vers un domaine tiers (ex: Google Fonts, API). Cela ne télécharge pas le fichier, mais accélère la récupération future.

Fonts

Tout comme le Critical CSS, le CSS pour les critical fonts devrait aussi être inlined. Si l'inlining n'est pas possible, le script doit être chargé avec un preconnect. Le délai de récupération des fonts (ex: Google Fonts) peut affecter le FCP. preconnect indique au navigateur d'établir les connexions vers ces ressources plus tôt.

Inliner les fonts peut alourdir (bloat) le HTML significativement et retarder le fetch d'autres ressources critiques. Le Font fallback peut être utilisé pour débloquer le FCP et rendre le texte disponible. Cependant, utiliser un font fallback peut affecter le CLS à cause des jumping fonts. Cela peut aussi affecter l'INP à cause d'une style and layout task potentiellement lourde sur le main thread quand la vraie font arrive.

Images (LCP)

Préchargez (<link rel="preload">) la Hero Image si elle est arrive plus bas dans le DOM ou assurez-vous simplement qu'elle est dans le HTML initial sans loading="lazy".

Scripts Tiers

Utilisez des stratégies de chargement différé (ex: lazyOnload, afterInteractive en Next.js) pour ne pas bloquer le thread principal pendant le rendu initial.