Share
Embed
Christos Paloukas - Cache me if you can, a journey through caching layers in WordPress
WordPress Greek Community PRO
February 21, 2025
Transcript
37 slides
-
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 -
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 -
How does it work? How does it work? Wait… Let’s
quickly go over how a web page is requested -
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 🥳 -
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) -
Why do we cache? Why do we cache? Speed …but
also scalability, cost-saving, and better user experience! -
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 -
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. -
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. -
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 -
Cache Invalidation Cache Invalidation • Outdated cached content must be
removed. • Ensures users see new updates instead of old, stale versions. -
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. -
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 🥳 -
Let’s dive in! Let’s dive in! Caching Layers Caching happens
at multiple layers, and each type plays a different role. -
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) -
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. -
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 -
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. -
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. -
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. -
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? -
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. -
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. -
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 -
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? -
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?? -
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! -
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. -
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 -
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. -
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. -
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 -
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? -
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. -
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.