Carga responsable y condicional

En el blog de Polypane (no hay firma, pero presumiblemente es Kilian Valkhof ( lo es )), hay un excelente artículo, Creación de sitios web con datos reducidos de preferencias , sobre la prefers-reduced-dataconsulta de medios. Aún no es compatible con el navegador, pero eventualmente podrá usarlo en CSS para tomar decisiones que reduzcan el uso de datos. Del artículo, aquí hay un ejemplo en el que solo carga fuentes web si el usuario no ha indicado una preferencia por un uso bajo de datos:

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

Ese es un bonito patrón. Lo mismo ocurre con la accesibilidad y la prefers-reduced-motionconsulta de los medios. También puedes usar ambos desde JavaScript .

También la misma energía: publicación reciente del blog de Umar Hansa JavaScript: JavaScript condicional, descárguelo solo cuando sea apropiado hacerlo . Hay muchos ejemplos aquí, pero lo esencial es que el navigatorobjeto contiene información sobre el dispositivo, la conexión a Internet y las preferencias del usuario, por lo que puede combinar eso con los módulos ES para cargar recursos condicionalmente sin demasiado código:

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

Si le gusta la idea de todo esto, puede profundizar en la serie de Jeremy Wagner que comienza aquí sobre JavaScript responsable.