Bonne pratique
Le temps de chargement d’une page côté navigateur est directement corrélé au nombre de fichiers que le navigateur doit télécharger, et au poids unitaire de chaque fichier.
Pour chaque fichier, le navigateur émet un GET HTTP vers le serveur.
Il attend sa réponse, puis télécharge la ressource dès qu’elle est disponible. Selon le type de serveur web que vous utilisez, plus le nombre de requêtes par page est important, moins vous pourrez servir de pages par serveur. Diminuer le nombre de requêtes par page est crucial pour réduire le nombre de serveurs HTTP (voire des serveurs d'application et de base de données) nécessaires au fonctionnement du site, et donc les impacts environnementaux associés.
Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.
L'utilisation de Next.js facilite le regroupement et la minification des fichiers JavaScript et CSS grâce à son bundler intégré, réduisant ainsi le nombre de requêtes HTTP nécessaires. En consolidant plusieurs fichiers en un seul, nous optimisons le temps de chargement des pages et la performance globale.
Les React Server Components, en générant les pages côté serveur, permettent de ne pas exposer les librairies tierces ni d'effectuer de requêtes inutiles côté client. Enfin, l'approche cache-first de react-query diminue significativement les appels API en réutilisant les données en cache, limitant davantage les requêtes HTTP.
Règle de validation
Le nombre de requêtes HTTP doit être inférieur ou égal à 40
Ressources économisées