๐๐ฎ๐ฐ๐ต๐ถ๐ป๐ด ๐ฉ๐ถ๐ฑ๐ฒ๐ผ ๐ฃ๐ฎ๐ด๐ฒ๐ ๐๐ถ๐๐ต ๐ฉ๐ฎ๐ฟ๐ป๐ถ๐๐ต ๐๐ฆ๐
Our trending page used to crash during traffic spikes.
The problem was not slow rendering. The problem was the cache.
A typical page is a mix of different parts:
- Masthead and footer (change weekly)
- Navigation (changes daily)
- Trending lists (refreshes every few minutes)
- View counters (change every second)
We used full-page caching. This meant the fastest-moving part, the view counter, forced the whole page to refresh every 60 seconds. This killed our database.
The fix: Stop caching pages. Start caching fragments.
We used Varnish with Edge Side Includes (ESI). Instead of one big object, we break the page into small pieces. Each piece has its own life cycle.
How ESI works:
- Your server sends a shell document with placeholder tags.
- Varnish sees these tags and fetches the pieces separately.
- Varnish stitches the pieces together at the edge.
- The user receives a single, finished HTML document.
This approach offers huge benefits:
- Each fragment has its own TTL (Time To Live).
- You can cache the shell for 6 hours but the counters for 30 seconds.
- SEO crawlers see a complete page with no loading spinners.
- You reduce database load by over 90%.
We also use Varnish "Grace Mode." If a fragment expires, Varnish serves a slightly old version while it fetches a new one in the background. This prevents a "thundering herd" from hitting your origin at once.
If you run a read-heavy website, do not ask how long you can cache a page. Ask how long you can cache each piece of that page.