Au cœur de la tempête Helene, je ne voulais qu’un simple site web textuel

• En raison des coupures de courant et de l’instabilité des communications causées par l’ouragan Helene, le besoin d’un accès web léger est apparu clairement
• Les sites web complexes centrés sur les images et les scripts ne fonctionnaient pratiquement pas sur mobile
• De simples pages basées sur du texte étaient les plus efficaces pour transmettre l’information et garantir l’accessibilité
• La dégradation des performances web peut se transformer en fracture informationnelle en situation de catastrophe
• L’importance d’une conception web légère accessible même en temps de crise est mise en avant

---

La tempête Helene et l’accessibilité du web mobile

• Pendant la tempête Helene, avec une alimentation électrique et des réseaux instables, le chargement des sites web devenait presque impossible
  • Les sites riches en éléments complexes comme les images, les publicités et le JavaScript échouaient à se charger
  • Les pages ne proposant qu’un simple texte HTML restaient relativement accessibles
• Cette expérience a permis de confirmer à nouveau que la fonction première du web est de transmettre de l’information
  • L’accessibilité du contenu doit primer sur le design visuel

La valeur d’un web simple

• Les sites web centrés sur le texte fonctionnent rapidement même sur des réseaux lents
  • En supprimant les ressources inutiles, on peut fortement réduire la consommation de données et le temps de chargement
• Ils sont utiles non seulement en situation de crise, mais aussi pour améliorer l’expérience mobile des utilisateurs
  • Une structure simple contribue aussi à la maintenance et à l’amélioration de l’accessibilité

Performances web et responsabilité sociale

• Les structures web complexes peuvent aggraver les inégalités d’accès à l’information
  • Dans les régions où l’infrastructure réseau est faible, l’accès à l’information se retrouve limité
• Les développeurs doivent envisager un web capable de fonctionner avec un minimum de ressources
  • C’est une exigence essentielle du point de vue de la réponse aux crises, de l’accessibilité et de la durabilité

Conclusion

• L’expérience de la tempête Helene illustre la nécessité d’une conception web légère
• Un web textuel simple constitue une solution permettant d’assurer à la fois la résilience en situation de crise et l’accessibilité universelle

[GN⁺]

Avis Hacker News

• Plusieurs sites d’actualité proposent une version texte uniquement
  Par exemple lite.cnn.com, text.npr.org, wttr.in
  On peut trouver une liste plus complète sur la liste de Greycoder
  Ce serait bien d’avoir une méthode standardisée pour trouver facilement ces sites et permettre aussi aux médias locaux d’en proposer

  • La version allégée de CNN est bien, mais elle affiche quand même une énorme bannière de cookies
    En pratique, le seul cookie posé semble être le fait d’avoir cliqué sur la bannière, et pourtant l’essentiel du poids de la page paraît venir de là
  • En ouvrant un article de CNN Lite, le corps de l’article faisait 11 KB, mais il y avait 560 KB de déclarations CSS
  • Pour standardiser ces sites en texte seul, il serait sans doute préférable que le mode lecteur (reader mode) du navigateur demande au site une mise en forme minimale
  • Aux Pays-Bas, le service public continue toujours à diffuser les infos via Teletekst
    Article lié : Hoe werkt het vernieuwde Teletekst
  • Avec le sous-domaine « lite », on peut aussi lire des articles réservés aux abonnés
    Je me suis souvenu de ce site quand CNN faisait il y a quelques mois des tests A/B agressifs

• L’image d’en-tête de l’article était un PNG 2400x1600 de 500 KB, qui se compressait mal à cause d’un léger dithering
  En convertissant la même image en .avif (qualité 90, 12 bits), elle est tombée à 15 KB

  • Mais cette image était en fait une hero image sans rapport avec le contenu
    Ce genre d’image ralentit le chargement, oblige à scroller et s’oublie aussitôt
  • En pratique, le site envoyait 1,18 MB (compressé) pour livrer 6,7 KB de texte. C’est ironique
  • En SVG, ce serait peut-être encore plus léger, mais il faudrait sans doute simplifier les effets de dégradé

• Pendant l’ouragan Helene, l’équipe Newspack dont je fais partie a collaboré avec Blue Ridge Public Radio et d’autres
  pour créer des sites d’actualité en version texte destinés aux utilisateurs à faible bande passante
  Via text.bpr.org, nous avons diffusé des informations à des dizaines de milliers de personnes,
  et grâce à ce résultat nous avons obtenu le soutien d’OpenNews
  pour lancer un projet visant à déployer auprès des médias de tout le pays une solution web en texte brut pour l’actualité d’urgence

  • Je consulte souvent l’actualité moi aussi, mais je ne savais pas que CNN avait une version allégée

• Le HTML pur et les interactions basées sur des formulaires peuvent déjà être très efficaces
  Les anciens forums web fonctionnaient pour la plupart entièrement sans JS
  GitHub permettait autrefois de consulter les issues et de poster des commentaires sans JS,
  mais aujourd’hui presque plus rien ne s’affiche. Sans doute pour pousser les scripts de suivi

• Voici un retour d’expérience sur l’ouragan Helene

  • AT&T était complètement hors service, mais Verizon et les MVNO fonctionnaient
  • Une eSIM secondaire incluse dans mon abonnement Internet domestique m’a beaucoup aidé
  • Mais dès l’arrivée du camion d’intervention d’urgence de Verizon, l’accès Internet de mon MVNO a été coupé
  • Leçon à retenir : avant une tempête, il faut faire le plein de carburant ou recharger toutes les batteries
    À cause des coupures de courant, il était difficile de trouver une station-service, et nous avons dû partager le carburant entre voisins
  • J’avais déjà vécu quelque chose de similaire il y a quelques années pendant la tempête du Pineapple Express
    Il ne faut pas compter uniquement sur le solaire ; il faut prévoir une alimentation de secours (voiture, générateur au propane, etc.)
    Et les sites web des services d’urgence devraient pouvoir fonctionner avec des formulaires simples et des images niveau Web 1.0
    Un site qui met 5 minutes à charger son JS est inutile en situation de catastrophe
  • Selon les zones, la situation variait. Là où j’étais, tous les réseaux étaient coupés,
    et les bulletins radio de NPR étaient notre seule source d’information
    Au final, nous nous sommes organisés entre voisins pour dégager les routes, puis nous avons pu partir une fois du carburant trouvé
  • En cas de panne de courant, il faut absolument avoir du liquide sur soi
    car les terminaux de paiement ne fonctionnent plus quand le réseau de cartes est HS
  • Je vis dans une zone boisée et j’ai souvent des problèmes avec mon ISP,
    et l’appli Xfinity est beaucoup trop lourde : dès que la connexion devient instable, elle échoue
    C’est précisément dans ce genre de situation qu’il faudrait un portail d’assistance léger, mais on a l’inverse
  • J’utilise un double SIM (AT&T + T-Mobile),
    et s’il existait des téléphones triple SIM, j’aimerais aussi ajouter Verizon
    On peut enregistrer plusieurs eSIM, mais une seule peut être active à la fois

• J’ai vécu quelque chose de similaire lors de glissements de terrain au Népal, où je suis resté isolé plusieurs jours
  Faute d’informations, les nouvelles circulaient uniquement par téléphone,
  et dès la réouverture de la route, un afflux de véhicules a créé embouteillages et dangers
  Pendant le Covid, j’avais mis en ligne une page texte résumant simplement les règles locales,
  bien plus utile que des briefings compliqués
  Lors de l’invasion de l’Ukraine, des réfugiés ont mis en place en 24 heures un réseau d’information spontané via Telegram, Notion et Google Docs
  En fin de compte, la simplification de la diffusion de l’information est au cœur de la réponse aux crises

  • Un collègue ukrainien en fuite posait en temps réel à ses amis des questions du type : « Le pont X est-il encore praticable ? »
    pour vérifier son itinéraire d’évacuation
    Heureusement, il recevait le plus souvent des réponses exactes, ce qui lui a permis de rejoindre une zone sûre
  • En revanche, je me demande pourquoi l’Ukraine fait autant confiance à Telegram
    On dirait que même des informations sensibles y sont partagées

• Ceux qui travaillent dans le web depuis longtemps se souviennent sans doute des pannes massives du web au moment du 11-Septembre
  Presque tous les sites d’actualité étaient tombés, et seul Slashdot tenait encore à peu près pour diffuser des informations
  L’infrastructure a beaucoup changé depuis, mais on se demande encore : « et si cela se reproduisait ? »

  • À l’époque, Yahoo News ne répondait pas, alors j’ai lancé un traceroute,
    et le dernier saut pointait vers un serveur à l’intérieur des tours à New York
    Il a fallu un certain temps avant que le trafic soit redirigé vers l’ouest

• Dans un article lu récemment, il était expliqué qu’il est désormais difficile de faire tourner un navigateur avec 1 GB de RAM
  Le JS est devenu plus rapide, mais en contrepartie la taille du code des sites web a grossi inutilement
  Les réseaux rapides ont finalement encouragé l’inefficacité
  Voir aussi cet article

• Il serait bon de repartir d’un HTML pur quasiment niveau 1994
  <html> et <body> suffisent, avec un peu de CSS si nécessaire
  Si l’on utilise une feuille CSS externe comme Pico.css, mieux vaut l’héberger soi-même plutôt que via un CDN

  • Ce type de HTML devrait être la première page de tout développeur web
    Des outils compliqués comme npx create-react-app peuvent venir ensuite
  • Pour référence, on peut regarder le modèle de base de HTML5 Boilerplate
  • J’exploite moi aussi un site centré sur le texte, et je vérifie toujours qu’il fonctionne sans CSS
    Je maintiens la CSS autour de 20 KB gzipés
  • Il vaut toujours mieux inclure <meta charset="utf-8">

• Le standard web GDS du gouvernement britannique repose sur du HTML simple
  au point qu’il aurait même fonctionné sur une PSP
  Voir le billet de blog de Terence Eden