My presentation about WordPress and caching from WordCamp Baltimore 2013. See it with funny animated GIFs at http://kingkool68.com/wp-cream/ Fork my slides on GitHub https://github.com/kingkool68/WP-Cache-Rules-Everything-Around-Me

4. CACHE RULES
EVERYTHING
AROUND MEpresented at
WordCamp Baltimore
September 21 2013

5. HI, I'M RUSSELL HEIMLICH
(Heimlich, like the maneuver)
Head Cache Invalidator at the Pew Research Center

6. FOLLOW ALONG
v.gd/wpcream

7. BUT FIRST A
STORY…

8. 2006 - 2009 I worked at USNews & World Report

10. MONTHS OF WORK GO IN TO THE
RELEASE OF NEW RANKINGS.

11. ON LAUNCH DAY WE
ALWAYS SEE A HUGE
TRAFFIC SPIKE
But one year we got lucky…

12. The marketing/biz dev team managed to get us featured on
the homepage of a major web portal!
(And by featured I mean the featured story on their homepage)

13. WE WERE GOING TO BE
FEATURED ON…
(Before their CEO discovered Adobe Illustrator)

14. WE WERE EXCITED!

15. Ok maybe we looked more like this…

16. The story went live on Yahoo.com and we watched…

17. The servers started getting slower…

18. Editors were calling us saying they couldn't get in to the
admin area…

19. Our servers were completely down…

20. We had to call Yahoo! and have them remove the story
because we couldn't handle the traffic…

21. WE LASTED 15 MINUTES.

22. PERFORMANCE AND UPTIME
ARE IMPORTANT!
And caching can help.

23. P.S. Don't feel bad for USNews

24. WHAT IS
CACHING?

25. CACHE
“a component that transparently stores data
so that future requests for that data can be
served faster.”
— via Wikipedia, Cache (Computing)

26. A cache may contain values computed earlier or duplicate
values stored elsewhere.

27. A cache hit can complete the request by reading the value
from the cache.

28. A cache miss has to be recomputed or fetched from
another location which is much slower.

29. The more requests that can be served from a cache, the
faster the system performs.
The faster the system, the more requests it can handle.

30. A REAL-WORLD EXAMPLE
You're taking 5 classes and need to write 5 essays…

31. You could write 5 separate essays
OR
You could write one essay and use it for all of your classes

32. THAT'S CACHING!

33. There are many (potential) layers of caching involved in a
single web request.

34. HOW DOES A
REQUEST
WORK?

35. A BASIC REQUEST

36. A BASIC REQUEST

37. PHP PAGES
TAKE LONGER
TO SERVE

38. A PHP PAGE REQUEST

39. A PHP PAGE REQUEST

40. A PHP PAGE
WITH MYSQL
DATA TAKES
EVEN MORE
WORK

41. A PHP/MYSQL PAGE
REQUEST

42. A PHP/MYSQL PAGE
REQUEST

43. WE WANT TO MINIMIZE THE
AMOUNT OF WORK DONE
BY OUR SERVER, PHP AND
MYSQL

44. HTTP HEADERS

45. “The easiest request to serve is the one never
sent at all.”
I just made this quote up.

46. Your logo image isn't going to change when going from your
homepage to a single blog post…
So why make the browser even request it?

47. FAR FUTURE EXPIRES
HEADER
Tell the browser how long the copy of the file is valid
Cached files that are valid are not re-downloaded from
the server

48. WHAT DOES THAT LOOK
LIKE?
Add this to your file:.htaccess
<ifmodulemod_expires.c="">
ExpiresActiveon
ExpiresDefault "accessplus1month"
ExpiresByTypeimage/gif "accessplus1month"
ExpiresByTypeimage/jpeg "accessplus1month"
ExpiresByTypeimage/png "accessplus1month"
</ifmodule>

49. The HTML5 Boiler Plate project's .htaccess file
Read the docs
View the source

50. BUT WHAT IF THE
IMAGE/JS/CSS FILE
CHANGES?
The browser will keep loading the resource from it's local
cache

51. >
And then you have to clear the browser cache or hard
refresh the page (Shift + Refresh).

52. WE NEED CACHE-BUSTING
FILENAMES!
WordPress' and
supports this
wp_enqeue_script() wp_enqueue_style()
wp_enqueue_script($handle,$src,$deps,$ver,$in_footer);
wp_enqueue_style($handle,$src,$deps,$ver,$media);
which outputs a script like this
my-super-neato-script.js?ver=3.6.1
my-trendy-styles.css?ver=3.6.1

53. But then every time you update your JavaScript or CSS you
need to change the $vervariable to bust the cache…

54. SO I WROTE A PLUGIN
CDN Friendly CSS and JS URLs in WordPress
/theme/css/2013-09-12_5:21/my-style.css
maps to
/theme/css/my-style.css

55. CDNS

56. CONTENT DELIVERY
NETWORKS (CDNS)
Set of servers in multiple data centers around the world to
serve content with high availability and performance.

57. CDNs serve their copy of a file, if available, sparing your
server from the traffic.

58. If the CDN doesn't have a copy of the file, it passes the
request back to the origin.

59. TWO TYPES OF CDNS
1. Push - assets get uploaded to the CDN manually, you link
directly to it
2. Pull - The CDN is a proxy saving requests that are passed
through it
See Push vs. Pull CDNs

60. DNS CHANGES NEEDED FOR
PULL CDNS
cdn.example.com masks ugly CDN URL (CNAME)

61. DNS CHANGES NEEDED FOR
PULL CDNS
example.com points to origin IP Address (A Record)

62. The CDN uses the Expires header to determine if cached
asset is stale or not.
Stale requests get passed to the origin server

63. Some CDNs and proxies
. So avoid it if you can.
don't cache URLs with a query
string
BAD
http://www.example.com/js/file.js?2013-09-12
GOOD
http://www.example.com/js/2013-09-12/file.js
http://www.example.com/js/file.2013-09-12.js

64. If you cache your HTML via a CDN then if your origin server
goes down your site will still be served. Visitors won't even
know.

65. Distributing content across the world, visitors will download
from a server closer to them.

66. CDN PROVIDERS
Akamai
EdgeCast
Amazon Cloudfront
MaxCDN
CloudFlare

67. FULL PAGE
CACHING

68. Full page caching takes the result of a page request from
WordPress and saves it as a static HTML file that will be
served up the next time.

69. This reduces the load on PHP and MySQL

70. CACHING PLUGINS
(Advandced, lots of options)
(Easier set-up)
(Multi-server environment)
(For low-resource hosts)
W3 Total Cache
WP Super Cache
Batcache
Hyper Cache

71. CACHING PLUGIN TIPS
Don't cache pages for logged in users
Don't cache POST requests
Do serve cached files from mod_rewrite(not PHP)
Don't serve a separate mobile version (use responsive
design)
Make sure it is working!

72. PHP CACHING

73. WORDPRESS' CACHING APIS
Transients API
WP Object Cache

74. TRANSIENTS API
Used to store data that can expire at any time
Has an expiration to invalidate the data
Uses the wp_options table or an object cache
See http://codex.wordpress.org/Transients_API

75. TRANSIENTS API
FUNCTIONS
set_transient()
get_transient()
delete_transient()

76. MULTISITE TRANSIENTS API
FUNCTIONS
set_site_transient()
get_site_transient()
delete_site_transient()

77. TRANSIENTS EXAMPLE
$my_transient=get_transient('my_transient');
if($my_transient==false){
//Dosomecomplicatedtaskworthcaching
$my_transient='Somethingcomplicated';
set_transient('my_transient',$my_transient,12*HOUR_IN_SECONDS);
}

78. TIME CONSTANTS
As of WordPress 3.5 several constants were introduced to
easily express time
MINUTE_IN_SECONDS =60(seconds)
HOUR_IN_SECONDS =60*MINUTE_IN_SECONDS
DAY_IN_SECONDS =24*HOUR_IN_SECONDS
WEEK_IN_SECONDS =7*DAY_IN_SECONDS
YEAR_IN_SECONDS =365*DAY_IN_SECONDS

79. TRANSIENTS API IS IDEAL
FOR…
Fetching RSS feeds
Storing an external API call
Caching a complex query
ANYTHING that needs to expire at some time

80. WP OBJECT CACHE
WordPress' internal class for caching data.
See http://codex.wordpress.org/Class_Reference/WP_Object_Cache

81. CACHING PERSISTANCE
WP_Object_Cache data isn't saved between page requests
by default.
If an object cache is available, WP_Object_Cache will use that
instead

82. WP_CACHE FUNCTIONS
Don't call WP_Object_Cache Class directly!
wp_cache_add($key,$data,$group,$expire);
wp_cache_set($key,$data,$group,$expire);
wp_cache_get($key,$group='',$force=false,$found=null);
wp_cache_delete($key,$group);
wp_cache_replace($key,$data,$group,$expire)

83. WHEN SHOULD WE USE
THIS?

84. OBJECT
CACHING

85. WHAT IS OBJECT CACHING?
Distributed, in-memory key-value store for
small chunks of data.
(not distributed)
Memcached
Redis
APC

86. UH… IN ENGLISH?
Store Transients API and WP Object Cache items in
memory between requests
Make it available to multiple servers
RAM is way faster than disk!

87. HOW DO I ENABLE OBJET
CACHING?
1. Download and install or or on
your server
2. Add the appropriate object-cache.phpfile to your wp-
content folder
Memcached Redis APC
See:
or
or
Memcached Object Cache Plugin
WordPress Redis Backend
APC Object Cache Backend

88. OPCODE
CACHING

89. WHAT DOES OPCODE
CACHING DO?
PHP is written in a human-readable syntax
When run, PHP is compiled to opcode that a computer
understands
An opcode cache speeds up the execution of PHP

90. See Scaling WordPress

91. See Scaling WordPress

92. OPCODE CACHES
Alternative PHP Cache (APC)
eAccelerator
XCache
Zend Optimizer+

93. WHICH OPCODE CACHE TO
USE?
Zend Optimizer+ will be bundled with PHP 5.5
See http://halfelf.org/2013/trading-apc-for-zend/

94. BENCHMARKS
PHP (No Opcode Cache) ~40
APC ~260
Zend Optimizer + ~307
Number of Requests per second
See http://www.ricardclau.com/2013/03/apc-vs-zend-optimizer-benchmarks-
with-symfony2/

95. MYSQL
CACHING

96. MYSQL'S QUERY CACHE
Cache's result for frequently used SELECTstatements
Any INSERT, UPDATE, or DELETEstatement flushes the
query cache
See MySQL Query Cache Documentation

97. TO SUMMARIZE

98. Leverage browser caching via HTTP headers
Use a CDN if you can or a full-page caching plugin
WordPress' caching APIs are helpful
Set-up object caching on your server
Utilize an opcode cache to speed up PHP
Make sure MySQL's query_cacheis turned on

99. MORE READING
1. by Zack Tollman
2. by Joseph Scott
3. by Ryan
Burnette
4. by WordPress.com VIP
5.
by Erick Hitter
6. by Scott Taylor
Core Caching Concepts in WordPress
Scaling WordPress
WordPress Fragment Caching Revisited
Caching
Caching, Scaling, and What I've Learned Programming
for WordPress.com VIP
WordPress + Memcached

100. IN
CONCLUSION

103. THANK YOU!
@kingkool68