Limiter le nombre de domaines servant les ressources

Ce que dit le référentiel

Lorsqu’un site web ou un service en ligne héberge les composants d’une page web sur plusieurs domaines, le navigateur doit établir une connexion HTTP avec chacun de ces domaines. Une fois la page HTML récupérée, le navigateur appelle les ressources au fur et à mesure qu’il parcourt le DOM (Document Object Model). Certaines ressources sont indispensables au fonctionnement de la page. Si elles sont hébergées sur un autre domaine peu réactif, cela peut rallonger le délai d’attente avant que la page soit opérationnelle. Dans la mesure du possible, il faut donc regrouper toutes les ressources sur un seul domaine.

Seule exception à cette règle, le fait d’héberger les ressources statiques (feuilles de styles, images, etc.) sur un domaine séparé, pour éviter d’avoir à transporter un ou plusieurs cookies à chaque GET HTTP du navigateur. On réduit le temps de réponse ainsi que la bande passante consommée inutilement.

Notre avis

Next.js permet de servir les images depuis le même serveur que le reste de l'application. En utilisant son composant Image, nous consolidons les ressources sur un seul domaine, éliminant ainsi le besoin de connexions HTTP multiples. Cela réduit la latence et améliore la vitesse de chargement des pages.

De plus, cette fonctionnalité offre des options intégrées pour optimiser les images automatiquement. Des opérations comme le redimensionnement et la conversion de format se font en temps réel, assurant une utilisation efficace de la bande passante et rendant le site plus écoresponsable sans compromis sur la performance.