GoogleChrome / GoogleChrome/webdev-infra

Reuse icons via `<svg use>`

Open
#44 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
39
Forks
29
PR merge metrics
No merged PRs in 30d

Description

The way we embed SVGs on the sites is not ideal. They are usually inlined, causing duplicate code to be shipped across the network. For example:

https://developer.chrome.com/en/docs/devtools/javascript/reference/ - which uses the Gotcha aside seven times, we inline the same 372 byte SVG seven times, which sums up to 2,54KB of which 2,17KB could be saved.

Not much, but there are other shortcodes which use more heavy icons, like the `BrowserCompat` shortcode made available for both sites with https://github.com/GoogleChrome/webdev-infra/pull/41. This is used 17x on https://web.dev/learn/css/pseudo-classes/#hover, adding 18,4KB of SVG code to the site for each instance, totalling in 312,8KB.

Other pages on web.dev that use BrowserCompat more than 2x:

- web.dev/adaptive-loading-cds-2019/
- web.dev/async-clipboard/
- web.dev/building-a-dialog-component/
- web.dev/camera-pan-tilt-zoom/
- web.dev/constraintvalidation/
- web.dev/css-size-adjust/
- web.dev/fetch-metadata/
- web.dev/interop-2022-wrapup/
- web.dev/min-max-clamp/
- web.dev/push-notifications-common-notification-patterns/
- web.dev/state-of-css-2022/
- web.dev/web-platform-02-2022/
- web.dev/web-platform-03-2022/
- web.dev/web-platform-04-2022/
- web.dev/web-platform-05-2022/
- web.dev/web-platform-06-2022/
- web.dev/web-platform-07-2022/
- web.dev/web-platform-08-2022/
- web.dev/web-platform-09-2022/
- web.dev/web-platform-12-2022/
- web.dev/learn/css/animations/
- web.dev/learn/css/backgrounds/
- web.dev/learn/css/blend-modes/
- web.dev/learn/css/filters/
- web.dev/learn/css/functions/
- web.dev/learn/css/gradients/
- web.dev/learn/css/grid/
- web.dev/learn/css/overflow/
- web.dev/learn/css/pseudo-classes/
- web.dev/learn/css/selectors/
- web.dev/learn/css/shadows/
- web.dev/learn/css/typography/
- web.dev/learn/design/responsive-images/
- web.dev/metrics/custom-metrics/
- web.dev/patterns/media/screen-record/
- web.dev/reliable/two-way-communication-guide/
- web.dev/secure/security-headers/

By introducing a helper that keeps track of the used icons per page, we could avoid shipping duplicate bytes and also improve DOM size. This would work by giving each SVG an ID and then reuse it like this:

```

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.