Responsible, Conditional Loading

Over on the Polypane blog (there’s no byline but presumably it’s Kilian Valkhof (it is)), there is a great article, Creating websites with prefers-reduced-data, about the prefers-reduced-data media query. No browser support yet, but eventually you can use it in CSS to make choices that reduce data usage. From the article, perhaps you only load web fonts if the user hasn’t indicated a prefernce for low data usage:

@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’s a nice pattern. It’s the same spirit with accessibility and the prefers-reduced-motion media query. You could use both from JavaScript as well.

Also the same energy: Umar Hansa’s recent blog post JavaScript: Conditional JavaScript, only download when it is appropriate to do so. There are lots of examples in here, but the gist is that the navigator object has information in it about the device, internet connection, and user preferences, so you can combine that with ES Modules to conditionally load resources without too much code:

if (navigator.connection.saveData === false) {
    await import('./costly-module.js');
}

If you’re into the idea of all this, you might dig into Jeremy Wagner’s series starting here about Responsible JavaScript.

---

The post Responsible, Conditional Loading appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

source https://css-tricks.com/responsible-conditional-loading/