Verantwortungsvolles, bedingtes Laden

Im Polypane-Blog (es gibt keinen Autor, aber vermutlich ist es Kilian Valkhof (das ist er)) gibt es einen großartigen Artikel, Websites mit prefers-reduced-data erstellen, über die Media-Query prefers-reduced-data. Noch keine Browserunterstützung, aber letztendlich kannst du sie in CSS verwenden, um Entscheidungen zu treffen, die den Datenverbrauch reduzieren. Aus dem Artikel, hier ist ein Beispiel, bei dem Web-Schriftarten nur geladen werden, wenn der Benutzer keine Präferenz für geringen Datenverbrauch angegeben hat.

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

Das ist ein schönes Muster. Es hat den gleichen Geist wie Barrierefreiheit und die Media-Query prefers-reduced-motion. Man könnte auch beide über JavaScript verwenden.

Ebenfalls dieselbe Energie: Umar Hansas kürzlicher Blogbeitrag JavaScript: Bedingtes JavaScript, nur herunterladen, wenn es angebracht ist. Dort gibt es viele Beispiele, aber im Wesentlichen enthält das navigator-Objekt Informationen über das Gerät, die Internetverbindung und Benutzereinstellungen, sodass du dies mit ES-Modulen kombinieren kannst, um Ressourcen bedingt und mit wenig Code zu laden.

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

Wenn dich die Idee davon anspricht, könntest du dich mit Jeremy Wagners Serie beginnend hier über verantwortungsvolles JavaScript beschäftigen.

Kommentare