Recently I made the following site improvements:
- Minified SVGs with minify.
- Created lossless WebPs of PNGs in recent content.
- Created a Hugo shortcode for the
<picture>element wrapped in a
- Updated bitmap images in recent content to default to WebP with a fallback to PNG (progressive enhancement).
- Configured mod_deflate to compress SVGs (see note about BREACH below).
- Enabled HTTP/2 (how did miss I this before?).
- Added a Cache-Control header for static style, script, and image assets.
68% cumulative reduction in the total size of an uncached front page load in Chrome:
|Description||Total Size (kB)||Reduction (%)|
|Baseline uncached front page load||596 kB||0%|
|WebP and minified SVGs||324 kB||45%|
|WebP, minified SVGs, and mod_deflate update||185 kB||68%|
- I will post later about the progressive enhancement friendly
- The minify command is a thin wrapper around the excellent tdewolff/minify library 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 config:
- HTTP/2 in Apache: Install mod_http2 and add
Protocols h2 http/1.1to the Apache config. You should also switch from mpm_prefork to mpm_event or mpm_worker, but if you’re using a non-threadsafe module like mod_php then this will give you some grief.
- Debian: Add