Bonne pratique
La plupart des pages partagent une structure commune encadrant le "contenu utile".
À l'exception du <title> et quelques métadonnées de l'entête,
il serait donc assez facile de les reconstituer par concaténation de trois ressources :
une entête et un pied de page commun à toutes les pages,
et le contenu propre à chacune.
Cette concaténation peut être effectuée dans le navigateur directement via un Service Worker,
avec l'entête et le pied de page profitant de la mise en cache HTTP,
chaque page étant alors réduite au téléchargement du "contenu utile" seul.
Le serveur devra être capable de servir à la fois la page complète,
pour l'accès initial au site et pour les navigateurs ne supportant pas les Service Workers,
et le fragment de la page sans son entête et pied de page,
pour pouvoir faire la concaténation dans le Service Worker.
Certains <meta> et <link> propres au référencement ou aux partages sur les réseaux sociaux, et donc inutiles dans le navigateur,
pourront être complètement omises de ce fragment pour en réduire encore le poids.
Les autres, ainsi que le <title>, peuvent en général être positionnées dans le <body> sans impact sur l'utilisabilité de la page.
Alternativement, ils peuvent être recréés par JavaScript,
ou injectés directement dans le <head> par le Service Worker en concaténant non pas 3 parties, mais 4 ou 5
(ces éléments pourraient être synthétisés à partir des entêtes de réponse HTTP du contenu de la page, pour conserver le même nombre de requêtes).
On concède ici un peu de temps processeur dans le terminal, une requête initiale supplémentaire pour le Service Worker, puis deux requêtes supplémentaires pour l'entête et le pied de page, contre de grosses économies dans les quantités de données échangées pour chaque page. Ces coûts concédés sont amortis lors de navigations dans le site (comme pour une SPA), mais également lors de prochaines visites du site, tant que le navigateur n'aura pas évincé le Service Worker.
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.
En utilisant Next.js, nous pouvons optimiser le chargement des méta-données cruciales pour l'expérience utilisateur et le référencement. Grâce à ce framework, il est facile de configurer des entêtes dynamiques et des balises meta spécifiques à chaque page, conservant ainsi une structure cohérente et performante.
Next.js facilite également le serveur-side rendering et la mise en cache de composants critiques via un ServiceWorker. Cela permet de réduire la quantité de données transférées en ne téléchargeant que le "contenu utile" et en utilisant des fragments de pages pour des transitions de page plus rapides sans recharger les éléments communs.
Règle de validation
Le nombre de pages chargées dans leur version complète doit être inférieur ou égal à 1
Ressources économisées