Technical
Visibility state
Also called document.visibilityState.
Visibility state is the value of `document.visibilityState`, either `visible` or `hidden`, saying whether the page is currently shown to the user. Prerendered pages report `document.prerendering` as true until activated.
How it is measured
Read it in the console or listen for the `visibilitychange` event. Switching tabs or minimising the window sets `hidden`, and coming back sets `visible`. A speculatively prerendered page counts as not yet viewed.
Use it to start and stop timers so you accumulate time only while visible. Compare the timer total with wall-clock time to see the share spent hidden.
Worked example
A long-form article averages 9 minutes 20 seconds open per view by wall clock. Counting only visible time gives 3 minutes 05 seconds, because readers leave the tab in the background. A 2,400-word post needs about 10 minutes to read, so even the visible figure points to skimming.
The same listener shows that 12% of loads are hidden before they ever become visible, mostly links opened in a background tab.
How it differs
Visibility state reports the current condition of the page. Engagement time is the accumulated visible, active time built from it. Visibility is the switch, and engagement time is the stopwatch it controls.
Common errors
Using `blur` and `focus` as a proxy. Not stopping timers on hidden. Forgetting that a hidden tab can still play audio. Counting prerendered loads as views. Not sending data when the page becomes hidden. Assuming mobile browsers fire the event identically.
In practice
Gate timers and view counts on `visible`, send the accumulated time on `visibilitychange` to hidden, and ignore prerender loads until they are activated.