1566544 - Sass files have hardcoded data URIs

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: General, defect, P3)

Description

[Peter Bengtsson [:peterbe]]

Data URIs instead of external files is a web performance anti-pattern and should be eradicated.

For example; https://github.com/mozilla/kuma/blob/601ffa3987a808381d2636689e4b7fb951d7231c/kuma/static/styles/includes/_svg_data_uri_icons.scss isn't necessarily getting into the CSS bundles but all of this should be replaced with external .svg files.

Using data URIs to save on the number of requests used to be a performance best practice but now the counter-arguments are many.

• Having large blocks of data URI strings in .css files makes the CSS files unnecessarily large.
• If you have .some-selector-that-isnt-needed { background-color: url(/file.svg) } that /file.svg will never ben downloaded if the selector doesn't match anything in the DOM.
• For lower-CPU user agents, parsing base64 strings is much slower than downloading the raw binary form. For decent-CPU devices this adds up when there's lots of them.
• CSS is a render blocking resource so you want to make sure the CSS files are minimal in size.
• In https://bugzilla.mozilla.org/show_bug.cgi?id=1566426 we discovered that for a certain bundle we could save 50KB on the uncompressed data URI strings.
• base64 doesn't compress well. PNGs don't need compression and SVG can potentially be compressed on-the-fly.
• External URLs e.g. /file.svg can be browser cached. One tiny change anywhere in the CSS bundle forces the complete download of everything all over again.

This bug is about eradicating those strings and replacing them with paths to .svg files. We might also need to rename the file too since it'll no longer contain data URI strings.

Comment 1

[Schalk Neethling [:espressive]]

Found another instance of hardcoded data-uris:
https://github.com/mozilla/kuma/blob/master/kuma/static/styles/components/compat-tables/_vars.scss

Comment 2

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.