1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
slug: media-shrinkage
title: "Media Shrinkage"
date: "2022-01-28T08:54:25-04:00"
tables:
shrinkage:
cols:
- id: "text"
name: "Description"
- id: "size"
name: "Total Size (kB)"
tip: "Total size, in kilobytes."
align: "right"
- id: "percent"
name: "Reduction (%)"
tip: "Size reduction relative to baseline."
align: "right"
rows:
- text: "Baseline uncached front page load"
size: "596 kB"
percent: "0%"
- text: "WebP and minified SVGs"
size: "324 kB"
percent: "45%"
- text: "WebP, minified SVGs, and `mod_deflate` update"
size: "**185 kB**"
percent: "**68%**"
---
Recently I made the following site improvements:
1. Minified [SVGs][svg] with [minify][].
2. Created lossless [WebPs][webp] of [PNGs][png] in recent content.
3. Created a [Hugo shortcode][shortcode] for the [`<picture>`][picture]
element wrapped in a [`<figure>`][figure].
5. Updated bitmap images in recent content to default to [WebP][] with a
fallback to [PNG][] ([progressive enhancement][]).
6. Configured [`mod_deflate`][mod_deflate] to compress [SVGs][svg] (see
note about [BREACH][] below).
**Note:** Using [HTTP compression][] ([`mod_deflate`][mod_deflate],
[`mod_brotli`][mod_brotli], etc) with [dynamic web pages][] can expose
you to a [BREACH][] attack. This site is [statically generated][] (via
[Hugo][]) so [BREACH][] is not an issue.
### Results
68% cumulative reduction the total size of an uncached front page load
in [Chrome][]:
{{< table "shrinkage" >}}
### Notes
* The [minify][] command is a thin wrapper around the excellent
[tdewolff/minify library][tdewolff-minify] for [Go][].
* I also investigated [AVIF][]. Better compression than [WebP][], worse
tool and browser support. Will investigate again later.
* Convert [PNG][] to lossless [WebP][] with [Imagemagick][]:
`convert -quality 100 -define webp:lossless=true src.png dst.png`
* [Apache][] [`mod_deflate`][mod_deflate] config:
`AddOutputFilterByType image/svg+xml`
* [Debian][]: Add `image/webp webp` to `/etc/mime.types`.
**Update (2022-01-29):** Added warning about [BREACH][] and link to
[tdewolff/minify][tdewolff-minify].
[svg]: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
"Scalable Vector Graphics"
[minify]: https://github.com/tdewolff/minify/tree/master/cmd/minify
"Command-line SVG, JavaScript, HTML, and CSS minifier."
[webp]: https://en.wikipedia.org/wiki/WebP
"WebP image format."
[png]: https://en.wikipedia.org/wiki/Portable_Network_Graphics
"Portable Network Graphics"
[shortcode]: https://gohugo.io/content-management/shortcodes/
"Simple snippets in content files calling built-in or custom templates"
[figure]: https://gohugo.io/content-management/shortcodes/#figure
"Hugo figure shortcode"
[progressive enhancement]: https://en.wikipedia.org/wiki/Progressive_enhancement
"Progressive enhancement"
[picture]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
"picture HTML element"
[figure]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
"figure HTML element"
[mod_deflate]: https://httpd.apache.org/docs/current/mod/mod_deflate.html
"Apache DEFLATE compression output filter."
[chrome]: https://www.google.com/chrome
"Google Chrome web browser."
[avif]: https://en.wikipedia.org/wiki/AVIF
"AV1 Image Format"
[debian]: https://www.debian.org/
"Debian Linux distribution."
[imagemagick]: https://imagemagick.org/
"Command-line image conversion tools."
[apache]: https://httpd.apache.org/
"Apache web server."
[breach]: https://en.wikipedia.org/wiki/BREACH
"HTTP compression security vulnerability that leaks information over TLS connections."
[http compression]: https://en.wikipedia.org/wiki/HTTP_compression
"HTTP compression"
[statically generated]: https://en.wikipedia.org/wiki/Static_web_page
"Statically generated web page"
[hugo]: https://gohugo.io/
"Hugo static site generator"
[mod_brotli]: https://httpd.apache.org/docs/trunk/mod/mod_brotli.html
"Apache brotli compression output filter."
[dynamic web pages]: https://en.wikipedia.org/wiki/Dynamic_web_page
"Dynamically generated web page"
[tdewolff-minify]: https://github.com/tdewolff/minify
"SVG, JavaScript, JSON, HTML, and CSS minification library for Go."
[go]: https://golang.org/
"Go programming language"
|
