Media Shrinkage

January 28, 2022

Recently I made the following site improvements:

  1. Minified SVGs with minify.
  2. Created lossless WebPs of PNGs in recent content.
  3. Created a Hugo shortcode for the <picture> element wrapped in a <figure>.
  4. Updated bitmap images in recent content to default to WebP with a fallback to PNG (progressive enhancement).
  5. Configured mod_deflate to compress SVGs (see note about BREACH below).
  6. Enabled HTTP/2 (how did miss I this before?).
  7. Added a Cache-Control header for static style, script, and image assets.

Note: Using HTTP compression (mod_deflate, 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 in the total size of an uncached front page load in Chrome:

DescriptionTotal Size (kB)Reduction (%)
Baseline uncached front page load596 kB0%
WebP and minified SVGs324 kB45%
WebP, minified SVGs, and mod_deflate update185 kB68%

Notes

Update (2022-01-29): Small formatting, grammar, and spelling fixes. Added HTTP/2 note, Cache-Control note, BREACH warning, and tdewolff/minify link.