Connexion
Obs.js transforme votre site en un caméléon qui s'adapte à chaque visiteur
Alors rien à voir avec le logiciel de streaming, mais sachez que Harry Roberts, le consultant en performance web derrière CSS Wizardry (et accessoirement un mec qui a bossé avec Google, la BBC et l’ONU), vient de sortir Obs.js .
L’idée de ce truc, c’est de transformer votre site web en véritable caméléon. Au lieu de servir la même expérience à tout le monde, la bibliothèque va détecter en temps réel les conditions de navigation de chaque visiteur. Batterie presque vide ? Connexion 2G pourrie ? Le site s’adapte automatiquement.
Pour cela, Roberts utilise des APIs natives du navigateur qui existent depuis des années mais que presque personne n’exploite vraiment. La Battery Status API et la Network Information API sont là, dans Chrome et consorts, à attendre qu’on leur trouve une utilité. Et voilà, Obs.js débarque et les combine de façon intelligente pour créer quelque chose de vraiment utile.
Mais alors concrètement, ça donne quoi ?
Et bien ce script ajoute des classes CSS directement sur votre balise <html>, comme ça…
<html class="has-latency-low
has-bandwidth-high
has-battery-charging
has-connection-capability-strong
has-conservation-preference-neutral
has-delivery-mode-rich">
Et quand vous avez un visiteur avec 5% de batterie, hop, une classe .has-battery-critical apparaît.
.has-battery-critical * {
animation: none !important;
transition: none !important;
}
Vous pouvez alors désactiver toutes les animations et transitions avec une simple règle CSS. Plus besoin de JavaScript complexe ou de détection côté serveur. C’est propre !
Mais ça va bien plus loin que la batterie puisqu’Obs.js catégorise aussi la qualité de la connexion de vos visiteurs. Une connexion forte, modérée ou faible, et votre site peut s’adapter en conséquence. Vous pouvez ainsi servir des images haute résolution aux utilisateurs sur fibre, et des versions compressées à ceux qui galèrent en 3G Free ^^ dans le métro.
body {
background-image: url('banner-4k.jpg');
}
.has-delivery-mode-lite body {
background-image: url('banner-optimized.jpg');
}
Je trouve cette approche très progressive car si le navigateur ne supporte pas ces APIs (
Safari ne supporte ni Battery ni Network Information API
), le site peut continuer à fonctionner normalement. Roberts recommande d’ailleurs de placer le script directement en inline dans le <head> de votre page, avant tout autre script. Il précise cela pour que la détection se fasse le plus tôt possible et que les classes soient disponibles dès le premier render.
De plus, l’objet window.obs exposé par la bibliothèque vous donne accès à toutes les métriques collectées. Vous pouvez ainsi savoir si le Data Saver est activé, si l’appareil est branché sur secteur, ou même détecter les changements de réseau en temps réel. Imaginez les possibilités pour une progressive web app qui doit gérer des modes offline !
En plus, ce type d’optimisation adaptative peut réduire significativement la consommation de données et améliorer les temps de chargement. Il est possible en implémentant cela et en faisant les aménagements nécessaire, d’économiser jusqu’à 40% de bande passante pour les utilisateurs ayant des connexions lentes. C’est énorme quand on sait que chaque seconde de chargement supplémentaire peut faire perdre 20% de conversions.
La version actuelle est déjà fonctionnelle et disponible sous licence MIT et le support navigateur est principalement orienté Chromium pour l’instant, mais c’est déjà une base solide pour commencer à expérimenter.
Et connaissant le profil de Roberts (le mec a littéralement écrit le livre sur les performances CSS), j’imagine qu’on peut s’attendre à ce que le projet évolue rapidement…
Pour l’implémenter, c’est vraiment simple. Vous récupérez le script sur GitHub, vous le minifiez si nécessaire, et vous le collez dans le head de votre HTML. Pas de npm, pas de webpack, pas de configuration compliquée. C’est à l’ancienne !
Voilà, je me suis dis que pour les développeurs qui me lisent, ça peut vous permettre par exemple d’adapter votre stratégie de lazy loading, de modifier la fréquence de vos appels API, ou même de changer complètement l’architecture de votre app selon le contexte. Vous pourriez par exemple désactiver le polling temps réel des utilisateurs qui ont une petite connexion, et le passer en mode manuel.
Bref, si vous faites du développement web et que vous vous souciez un minimum de l’expérience utilisateur, Obs.js mérite un petit coup d’oeil !
