Speed up your site with perfect caching
A typical static site is usually made of 2 distinct things: HTML files and static files. HTMLs define the URLs, and they are indexed by search engines and shared by visitors. Therefore, you should not move them around too much.
Static files (images, CSSs, Javascripts) on the other hand are just referenced from the HTMLs. Except for some rare cases, you are free to move and modify them. As long as they are properly referenced from the HTMLs, your site will work.
Let's see how to utilize browser caching to speed up your site!
Caching HTMLs
When you edit a page, you usually modify the HTMLs. You can change their contents, but you can't change the names.
Because of this, you should disable or at least severely restrict browser caching for HTMLs.
You can use the Last-Modified
and the ETag
headers, but especially for small HTMLs it's easier to disable caching entirely:
Cache-Control: no-cache, no-store, must-revalidate
Caching static files
For static files that you can rename freely, you can utilize a trick to make browser caching "perfect": rename the files so that their names include a hash of their contents. Instead of app.js
, name it (automatically) app.106aa34f12.js
. This way, a changed file equals a changed name, you can instruct the browser to cache the files forever, and they don't even need to validate.
Cache-Control: public, max-age=31536000
This seriously speeds up your site, as return visitors only need to download the HTML (which is small) and the changed static files.