Caddy Compression and Caching#
This blog is built with Sphinx and served by Caddy.
Unfortunately https://pagespeed.web.dev/ says that https://blag.felixhummel.de/ is slow on mobile. Let’s do something about that.
This is its current Caddy config:
(log_and_errors) {
log {
output file /var/log/caddy/{args.0}.log
}
handle_errors {
header Content-Type text/plain
respond "{http.error.status_code} {http.error.status_text}"
}
}
https://blag.felixhummel.de {
import log_and_errors blag.felixhummel.de
root * /var/www/blag/latest
file_server
}
Compression#
Add gzip compression for static files.
Add the following directive to encode all assets with gzip:
encode gzip
Caching#
Serve static assets with an efficient cache policy [1]
The PyData Sphinx
Theme is kind enough to
render asset links with ?digest=8d27b9dea8ad943066ae, e.g.
https://blag.felixhummel.de/_static/styles/bootstrap.css?digest=8d27b9dea8ad943066ae
https://blag.felixhummel.de/_static/styles/pydata-sphinx-theme.css?digest=8d27b9dea8ad943066ae
The TTL can be high, because the
index.html page references new URLs when the old ones get invalidated.
To use aggressive caching,
set the
Cache-Control
header for any asset that has a digest query argument using Caddy’s query matcher
# Cache for 24 hours = 86400 seconds
@has_checksum {
query digest=* v=*
}
header @has_checksum Cache-Control max-age=86400
Note
The file_server directive supports precompressed sidecar
files.
Notes#
I will not try to fix the “Largest Contentful Paint element” warning, because I like the XKCD picture a lot. ;)