In this article · 8 sections
When someone visits your website, their browser downloads the HTML, CSS, JavaScript, fonts and images. Browser caching tells the browser to keep some of these files for a period, so on the next page or visit they load instantly from the device. On Apache and LiteSpeed hosting, common on shared plans like Hostinger, you can set this in the .htaccess file.
Always back up your .htaccess file before editing. A typo can take the site down (HTTP 500). If that happens, restore the backup.
What to cache, and for how long
| File type | Typical cache time |
|---|---|
| Images (jpg, png, webp, svg, ico) | 6–12 months |
| Fonts (woff2) | 12 months |
| CSS and JavaScript | 1–12 months (with versioning) |
| HTML pages | Short or none (content changes) |
Example: cache headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/html "access plus 0 seconds"
</IfModule>
The versioning trick
If CSS is cached for a month and you update it, visitors may see the old styles. The solution is to change the file URL when the file changes:
<link rel="stylesheet" href="/css/style.css?v=3">
Increase the number (or use the file's modification time) whenever you edit the file. Browsers treat it as a new file and download it. This lets you use long cache times safely.
Compression: GZIP or Brotli
Text files (HTML, CSS, JS, SVG) compress very well, often to a fraction of their size. Many hosts enable compression by default. If not, add:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript image/svg+xml application/json
</IfModule>
LiteSpeed servers and Cloudflare can also serve Brotli, which compresses slightly better than GZIP.
Server-side caching is different
Browser caching saves files on the visitor's device. Server-side caching (page caching) saves fully generated pages on the server, so PHP and the database don't run on every request. On LiteSpeed hosting, the LiteSpeed Cache plugin (WordPress) handles this; custom PHP sites can use their own caching for heavy pages. Both types together give the best results.
CDN caching
A CDN like Cloudflare caches static files on servers around the world, closer to visitors. It respects your cache headers, so setting them correctly helps the CDN too. See Cloudflare free plan.
How to check it's working
- Open your site in Chrome, press F12, go to the Network tab
- Reload the page and click an image or CSS file
- Look for
cache-controlorexpiresheaders in the response - Reload again. Cached files show "(memory cache)" or "(disk cache)"
PageSpeed Insights also flags "Serve static assets with an efficient cache policy" when caching is missing.
Common mistakes
- Caching HTML for too long, so visitors see outdated pages
- Long CSS/JS caching without versioning
- Conflicting rules from multiple plugins and manual edits
- Editing
.htaccesswithout a backup
Caching is a quick, low-cost speed win and part of the setup for every site we host. Ask us to optimise yours.