This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
CO₂ & EmpCo
Why should images, scripts and style sheets be cached?
When a visitor opens a website a second time or moves to a subpage, they get the logo, fonts, style sheets and scripts from the browser cache, if the server allows it. The check looks at what share of the static files allows this. If it is below 50 %, the finding is raised.
What counts as cacheable
The files the document includes are counted: scripts, style sheets, images, fonts and media files. A file counts as cacheable if the server sends an ETag or states a lifetime (max-age), immutable or public in Cache-Control; no-store or no-cache cancel that.
How the share enters the score
The cache share counts for 15 % of the CO₂ score, proportionally: if 80 % of the static files are cacheable, 80 % of these 15 points count.
Why this saves electricity
The browser takes a file that is still valid in the cache straight from the device; transfer and work on the server are saved. With only an ETag, it asks the server briefly and gets a short confirmation if the file has stayed the same. For visitors who view several pages or come back, a large part of the data volume is saved this way. The CO₂ value per page view is based on the first view; the cache reduces what comes after.
Examples
Apache (.htaccess)
Header set Cache-Control "no-store"
# jede Datei kommt bei jedem Besuch neu vom Server<IfModule mod_headers.c>
# Bilder, Schriften, Stylesheets, Skripte: ein Tag, danach fragt der Browser per ETag nach
<FilesMatch "\.(avif|webp|jpg|png|svg|woff2|css|js)$">
Header set Cache-Control "public, max-age=86400"
</FilesMatch>
# Dateien mit Versionskennung im Namen (seite.4f2a9c.css): ein Jahr
<FilesMatch "\.[0-9a-f]{6,}\.(avif|webp|jpg|png|svg|woff2|css|js)$">
Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>
</IfModule>nginx
location /assets/ {
add_header Cache-Control "no-store";
}location /assets/ {
# hier liegen Dateien mit Versionskennung im Namen
add_header Cache-Control "public, max-age=31536000, immutable";
}- Look at the response headers of an image file in the browser’s developer tools (Network tab, Headers): is there a Cache-Control with max-age?
- For images, fonts, scripts and style sheets set Cache-Control: public, max-age=31536000, immutable if the file names carry a version tag.
- Add a version tag to the file names (page.4f2a9c.css), so that a changed file gets a new name.
- For files with a fixed name, such as logo.png, a shorter lifetime with an ETag is enough; the browser then asks whether the file has changed.
