Économiser de la bande passante grace à un ServiceWorker
Identifiants
Catégories
| Cycle de vie | Tiers | Responsable |
|---|
| 3. Réalisation (fabrication / développement) | Réseau | Architecte Logiciel/Développeur |
Indications
| Degré de priorité | Mise en oeuvre | Impact écologique |
|---|
| 4 | 3 | 4 |
| Ressources Economisées |
|---|
| Réseau |
Description
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.
Exemple
Début 2020, Philip Walton a pu mesurer sur son blog une réduction des échanges réseau de près de 48%
et une amélioration des performances (First Contentful Paint) de plus de 52%
avec cette technique.
Source: https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/
Principe de validation
| Le nombre … | est inférieur ou égal à |
|---|
| de pages chargées dans leur version complète | 1 |