prefers-reduced-data to Prioritize Performance

Shared by
Published

Learn how to use the prefers-reduced-data media query to prioritize performance over visual fidelity to give your site a big boost.

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.

Join the conversation.

Your email address will not be published. Required fields are marked *

All comments posted on 'prefers-reduced-data to Prioritize Performance' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.