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<figure>. - 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.
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:
| 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% |
Notes
- I will post later about the progressive enhancement friendly
<figure>shortcode. - 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.webp - Apache mod_deflate config:
AddOutputFilterByType image/svg+xml - 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
image/webp webpto/etc/mime.types.
Update (2022-01-29): Small formatting, grammar, and spelling fixes. Added HTTP/2 note, Cache-Control note, BREACH warning, and tdewolff/minify link.
Update (2022-08-18): Fixed typo in convert command.