Responsible, Conditional Loading

There is an excellent article on the Polypane blog (although not attribution, but most likely written by Kilian Valkhof) called Create a Website with prefers-reduced-data, which discusses prefers-reduced-data media queries. Currently, the browser does not support it, but it can eventually be used in CSS to reduce data usage. An example is provided in the article to load web fonts only if the user does not specify a low data usage preference:

 @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';
}

This is a good model. It is the same spirit as the accessibility and prefers-reduced-motion media query. Both can also be used from JavaScript.

The same idea is Umar Hansa's recent blog post "JavaScript: Conditional JavaScript, download only when appropriate." There are many examples in the article, but the point is that navigator object contains information about the device, internet connection, and user preferences, so it can be used in conjunction with the ES module to conditionally load the resource without excessive code:

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

If you are interested in all of these ideas, you can dive into Jeremy Wagner’s series of articles on responsible JavaScript starting here.

The above is the detailed content of Responsible, Conditional Loading. For more information, please follow other related articles on the PHP Chinese website!