Eleventy Edge: Save-Data

Opt-out of web fonts when the Save-Data header is present. You can use a web extension to enable this on your development machine.

Zero client-side JavaScript required. Disable JavaScript and watch the nice heading web fonts disappear.
Sample benchmarks (at time of writing):
- 9.1 kB with Save-Data on
- 18.1 kB for a full page load with web fonts (yes I’ve optimized this quite a bit already, but you can apply it to anything)

Learn more on 11ty.dev: Eleventy Edge Plugin documentation

Source Code

Template

<head>
	<!-- … -->
	{% edge "liquid" %}
	{% if eleventy.edge.saveData == false %}
		<link rel="preload" href="/static/BenchNine-Bold-subset.woff2" as="font" type="font/woff2" crossorigin>
		<style>
		@font-face {
			font-family: BenchNine;
			src: url("/static/BenchNine-Bold-subset.woff2") format("woff2");
			font-weight: 700;
			font-display: swap;
			unicode-range: U+21,U+28,U+29,U+2D-3A,U+3F,U+41-5A,U+5F,U+61-7A;
		}
		</style>
	{% endif %}
	{% endedge %}
	<!-- … -->
</head>

Check out the unicode-range value on Uniclode.

Edge Function

No extra edge functions necessary here! eleventy.edge.saveData is a bundled Eleventy Edge feature.