Obs.js is a small inline JavaScript library that reads browser signals—network latency, bandwidth, Data Saver mode, battery level, CPU, and memory—and exposes them as CSS classes on the <html> element and a window.obs object. This lets developers adapt their sites to real user conditions rather than assuming ideal circumstances. The author demonstrates practical uses like serving lower-resolution images or disabling animations for users with low battery or poor connections. Beyond UI adaptation, Obs.js also serves as an analytics segmentation layer, enabling developers to understand what proportion of their audience is on weak devices or high-latency connections. The library distinguishes between raw Statuses (factual signals) and Stances (derived opinions like deliveryMode or canShowRichMedia), giving developers flexibility to react at whatever level of abstraction suits them. Browser support is Chromium-heavy, with Safari providing limited signals, so it should be treated as progressive enhancement rather than a baseline.
Table of contents
A Real ExampleYour Site Is Only Half the StoryStatuses and StancesConsiderate, Not CleverUnderstanding Your AudienceBrowser Support and LimitationsA Very Practical IdeaSort: