prefers-reduced-data to Prioritize Performance

Here’s a neat post from the Polyplane blog about this upcoming media query and how to use it to detect when a user asks for the smallest website possible to be sent across the wire (or at least when it becomes available in browsers). prefers-reduced-data would let us figure out if users care more about performance than they do about visual fidelity.

Here’s a great example of what this will be able to do when it comes to loading fonts in CSS:

@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url('Inter-roman.var.woff2') format('woff2');
  }
}
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

That media query above effectively says “when the user has not stated a preference, load the Inter font.” Otherwise, if the user has set data saving mode to be on, it’ll use whatever system font UI is applicable instead.

This is great because if our users are explicitly telling us that they only care about performance then we’ll soon be able to deliver an experience just catered for them, and from right here with CSS.

As the Polyplane blog points out, this could be used in a ton of other ways too. From removing background images that aren’t necessary to loading smaller inline images and preventing videos to automatically play.