Christos Paloukas - Cache me if you can, a journey through caching layers in WordPress

Transcript

1. PressidiumⓇ Certified Partner Program
2. I’m Christos I’m Christos I’m going to help you understand caching of all sorts for WordPress sites Are you ready? Happy to be here
3. What is caching? What is caching? A smart way to avoid doing the same expensive work over and over again. 📖 A bookmark saving your place 🍕 Leftovers instead of cooking from scratch 🚀 A shortcut instead of taking the long route
4. How does it work? How does it work? Wait… Let’s quickly go over how a web page is requested
5. Request journey – In short Request journey – In short 1. Browser – User Requests the Site 2. Internet – DNS & Routing 3. Web Server – Receives the Request 4. PHP – WordPress Processing 5. Database Query (If Needed) 6. Response is Generated & Sent Back 7. The page loads 🥳
6. Where Does Caching Fit In? Where Does Caching Fit In? 1. Browser Caching 2. CDN Caching – Edge Cache 3. Page Caching – Server-Level 4. Opcode Caching – PHP OPcache 5. Database Query Caching So everywhere… (+Fragment Caching) (+DNS Caching)
7. Why do we cache? Why do we cache? Speed …but also scalability, cost-saving, and better user experience!
8. Speed Why do we cache? – Speed • Faster load times – Nobody likes a slow website! • Cached pages load in milliseconds instead of running WordPress & database queries every time. Image baking a cake from scratch every time you want a slice
9. Scalability Why do we cache? – Scalability • Caching reduces the number of requests hitting the server. • With caching: ◦ More visitors = Same fast response, lower server strain • Without caching: ◦ More visitors = More DB & PHP processing = Server overload Image a single cashier at the grocery store during the holiday season with no express of self-checkout lanes.
10. Cost Efficiency Why do we cache? – Cost Efficiency • Less server processing = Lower hosting costs • Caching offloads work from higher server or hosting layers, CDN, Web server, PHP, DB) thus reducing resource usage. Image pre-cooking meals for the week instead of using fresh groceries daily.
11. Better User Experience & SEO Why do we cache? – Better User Experience & SEO • Fast websites = Happy users, lower bounce rates • Google ranks faster sites higher in search results. • E-commerce: Faster checkout = More sales 💸 • E-learning: Snappy lessons = Better engaged students 🎓 Image finding a saved playlist instead of manually searching for individual songs
12. Cache Invalidation Cache Invalidation • Outdated cached content must be removed. • Ensures users see new updates instead of old, stale versions.
13. How does it work again? How does it work again? Now we’re ready! We know what caching is and why it may be important.
14. Request journey – In short (Reminder) Request journey – In short (Reminder) 1. Browser – User Requests the Site 2. Internet – DNS & Routing 3. Web Server – Receives the Request 4. PHP – WordPress Processing 5. Database Query (If Needed) 6. Response is Generated & Sent Back 7. The page loads 🥳
15. Let’s dive in! Let’s dive in! Caching Layers Caching happens at multiple layers, and each type plays a different role.
16. Caching layers Caching layers 1. Browser Caching 2. CDN Caching – Edge Cache 3. Page Caching – Server-Level 4. Opcode Caching – PHP OPcache 5. Database Query Caching (+Fragment Caching) (+DNS Caching)
17. Browser Caching Browser Caching Browser caching stores static assets (CSS, JS, images, fonts) on the user’s device so they don’t have to be reloaded every time.
18. Browser Caching Browser Caching • Static assets – CSS, JS, images, fonts. • Favicons – Your site’s little icon in the browser tab. • HTML (if configured) What Gets Cached? • Dynamic content – Things like cart pages, personalized data, or live updates. What does not? DNS caching • stores recently resolved domain-to-IP mappings
19. Browser Caching Browser Caching Beware! 🪦 Too Long TTL (Time-To-Live): • If assets are cached for too long, users may not see updates unless the browser cache is cleared. 🔄 Cached Redirects Can Cause Problems: • If a redirect is cached, users may keep getting sent to an old URL, even after it’s changed. ◦ Solution: HTTP Headers: Cache-Control: no-store for temporary redirects.
20. Browser Caching Browser Caching Beware! 🔒 Sensitive Data Should NOT Be Cached: • Login, account dashboards, and checkout pages should never be stored in the browser cache. ◦ Solution: HTTP headers: Cache-Control: private, no-cache, no-store, must-revalidate. 📱 Mobile Browsers Cache Differently: • Some mobile browsers may cache more aggressively than desktop browsers. ◦ Solution: Test across devices/browsers to ensure proper caching behavior.
21. CDN Caching CDN Caching A CDN (Content Delivery Network) caches and delivers your site’s static (sometimes dynamic) content from servers closer to the user, reducing latency.
22. CDN Caching CDN Caching • Static assets: CSS, JS, images, videos, fonts • HTML pages (if configured) • API responses (sometimes) What Gets Cached? • Personalized or dynamic content (e.g., shopping carts, logged-in dashboards). • Secure pages (e.g., payment pages). What does not?
23. CDN Caching CDN Caching Beware! ⚠ CDN Cache Invalidation • If content updates but the CDN keeps serving an old version, users may see outdated pages. ◦ Solution: Cache purge process – automated is best* 🌎 Geographic Differences • A CDNs may cache more aggressively than others in certain regions. ◦ Solution: Set proper TTL and cache rules.
24. Page Caching Page Caching Page caching stores the fully generated HTML of a webpage, so WordPress doesn’t need to build it from scratch on every visit.
25. Page Caching Page Caching Edge Caching (CDN-Level Page Caching) • Cached at a CDN’s edge servers for global fast delivery • Example: Cloudflare, Fastly. Server-Level Page Caching • Handled directly by the hosting environment before WordPress runs • Example: Nginx FastCGI, Varnish Plugin-Level Page Caching • Caching done within WordPress using plugins • Example: WP Rocket, Perfmatters, W3 Total Cache Types of Page Caching
26. Page Caching Page Caching • Fully generated HTML pages • Static assets • API responses (sometimes) What Gets Cached? • Personalized or dynamic content – Logged-in user dashboards, shopping carts, user-specific pages. • Forms and interactive elements ◦ Feeds, search results • Checkout & payment pages • Admin pages What does not?
27. Page Caching Page Caching Beware! ⚠ CDN Cache Invalidation • If content updates but the CDN keeps serving an old version, users may see outdated pages. ◦ Solution: Cache purge process – automated is best* ⚠ Dynamic Pages Need Exclusions – Login pages, carts, and personalized content should not be cached …unless fragment caching is configured…but what’s that??
28. Page Caching Page Caching • Instead of caching the entire page, only certain sections are cached. ◦ Cached fragments stay fast (menus, footers). ◦ Dynamic sections stay fresh and don’t get cached. Fragment Caching • Menus & navigation bars • Footers & static widgets • Product listings • Popular blog post lists What May be Cached? ⚠ Requires proper meticulous implementation ⚠ Not as simple as full page caching. ⚠ Service dependent. Beware!
29. Opcode Caching – PHP OPcache Opcode Caching – PHP OPcache Opcode caching stores precompiled PHP scripts in memory, skipping the need to reprocess them on every request.
30. Opcode Caching – PHP OPcache Opcode Caching – PHP OPcache 1. Reads the PHP file 2. Compiles it into machine code 3. Executes the code Without OPCache • The compiled PHP code is stored in memory and reused. • No need to recompile the same script on every request. With OPCache
31. Opcode Caching – PHP OPcache Object Caching Beware! ⚠ Stale PHP Code Issues – If the code changes, OPcache may still serve the old version until cleared. ⚠ Requires Sufficient Memory – More caching means more RAM usage. ⚠ Not a Full-Page Cache – Only improves PHP execution, doesn’t replace page/object caching.
32. Database Query Caching Database Query Caching Database query caching stores the results of expensive queries so they don’t have to be reprocessed every time.
33. Database Query Caching Database Query Caching MySQL/MariaDB Query Cache (depreciated) • Stores query results directly in MySQL’s memory. • No longer recommended due to efficiency issues. Redis/Memcached for Query Caching – Persistent Object Caching • Queries are stored in RAM, significantly improving performance. • Used by managed hosts & advanced setups. WordPress Transients (Soft Query Caching) • WordPress stores temporary query results in the database. • Works well for caching API responses or dynamic content. Types of Database Query Caching
34. Database Query Caching Database Query Caching • Expensive SQL queries ◦ fetching product data, user lists, reports • Repeated queries across multiple users • API responses stored as transients What Gets Cached? • Constantly changing data ◦ live order processing, stock levels • Per-user queries (unless configured) What does not?
35. Database Query Caching Database Query Caching Beware! ⚠ Not all database queries benefit from caching – Some are too small to make a difference. ⚠ Can cause stale data issues – Cached queries must be invalidated when data updates.
36. The Full Cache Stack Experience - Takeaways The Full Cache Stack Experience - Takeaways • Each caching layer plays a role in reducing load, improving speed, and scaling efficiently. • Together, they form a complete caching strategy. Too many cache layers can cause conflicts so balance is key. • Invalidation matters! A stale cache can be worse than no cache! • Caching makes WordPress faster, more scalable, and efficient.
37. I’m Christos THANK YOU! It was a pleasure.