Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Frontend Caching Helgi Þormar Þorbjörnsson PHP Community Con, Na...
Who am I? VP of Engineering at Orchestra.io Developer at PEAR ...
Pareto Principle 20% 80%Friday, 22 April 2011
80 / 20 Rule 20% 80% 20% of sales people produce 80% of salesFriday, 22...
80 / 20 Rule 20% 80% 20% of the population receives 80% of the incomeFriday, 22 April 2011
80 / 20 Rule 20% 80% 20% of causes produce 80% of the effectsFriday, 22...
80% of response time is spent downloading resourcesFriday, 22 April 2011
4 Rules of Web PerformanceFriday, 22 April 2011
Weight Time Processing PerceptionFriday, 22 April 2...
PerceptionFriday, 22 April 2011
Make people think your site is fastFriday, 22 April 2011
When people can interact with the siteFriday, 22 April 2011
Friday, 22 April 2011
“It all depends on how we look at things, and not how they are in themselv...
Perception 50% of users arrive on an empty cacheFriday, 22 April 2011
Perception Empty Cache Full Cache 28.0K 1 HTML Docume...
WeightFriday, 22 April 2011
HTTP RequestsFriday, 22 April 2011
HTTP Requests Less is moreFriday, 22 April 2011
HTTP Requests Less is more Fewer HTTP RequestsFriday, 22 April 2011
HTTP Requests Less is more Fewer HTTP Requests Easy t...
CookiesFriday, 22 April 2011
Cookies Sent with static contentFriday, 22 April 2011
Cookies Sent with static content Slow upstream speedFriday, 22 April 2011
Cookies Sent with static content Slow upstream speed ...
Experiment Time! Cookie Size Response Time (Delta) 0 bytes...
CookiesFriday, 22 April 2011
CookiesFriday, 22 April 2011
Cookies Remove unnecessary cookiesFriday, 22 April 2011
Cookies Remove unnecessary cookies Appropriate domain levelFriday, 22 April ...
Cookies Remove unnecessary cookies Appropriate domain level ...
Cookies Remove unnecessary cookies Appropriate domain level ...
Parallel DownloadsFriday, 22 April 2011
Parallel Downloads Be aware of max connection limitsFriday, 22 April 2011
Parallel Downloads Be aware of max connection limits CNAME to point multiple ...
Parallel Downloads Be aware of max connection limits CNAME to point multiple ...
Parallel Downloads Borrowed from BrowserScope.orgFriday, 22 April 2011
Parallel Downloads Borrowed from BrowserScope.orgFriday, 22 April 2011
Parallel Downloads One domain = 2 Parallel connectionsFriday, 22 April 2011
Parallel Downloads One domain = 2 Parallel connections HTML ...
Parallel Downloads Two domains = 4 Parallel connections HTML ...
Parallel Downloads Too many hostnames can cause complicationsFriday, 22 April 2011
Parallel Downloads Too many hostnames can cause complications 2 – 4 sub do...
Combine Files Combining 6 scripts into 1 eliminates 5 requestsFriday, 22 April 2011
Combine Files Combining 6 scripts into 1 eliminates 5 requests Challenges: ...
Javascript Doesn’t comply with parallel download rulesFriday, 22 April 2011
Javascript Doesn’t comply with parallel download rules ...
Javascript script defer attribute is not a solutionFriday, 22 April 2011
Javascript script defer attribute is not a solution Solution - move them as ...
ProcessingFriday, 22 April 2011
ProcessingFriday, 22 April 2011
Processing Fake the deliveryFriday, 22 April 2011
Processing Fake the delivery Lazy LoadingFriday, 22 April 2011
Processing Fake the delivery Lazy Loading Above the f...
Processing Fake the delivery Lazy Loading Above the f...
Processing http://www.appelsiini.net/projects/lazyloadFriday, 22 April 2011
Processing Bonus - async attribute http://www.appelsiini.net/projects/lazyloadFriday...
JS MinificationFriday, 22 April 2011
JS Minification Crushes the file Strips out all cruft ...
JS Minfication UglifyJS Google Closure YUI Compres...
JS Minfication UglifyJS Google Closure YUI C...
CSS Minification YUI Compressor minifycss.com ...
GZip GZip can be used on JS CSS ...
GZip GZip should not be used on Images Docume...
404 robots.txt faviconFriday, 22 April 2011
ImagesFriday, 22 April 2011
Images faviconFriday, 22 April 2011
Images favicon CSS SpritesFriday, 22 April 2011
Images favicon CSS SpritesFriday, 22 April 2011
SpritesFriday, 22 April 2011
Sprites Reduces HTTP RequestsFriday, 22 April 2011
Sprites Reduces HTTP Requests Uses CSS Position magicFriday, 22 April 2011
Sprites Reduces HTTP Requests Uses CSS Position magic ...
Sprites Reduces HTTP Requests Uses CSS Position magic ...
Sprites Reduces HTTP Requests Uses CSS Position magic ...
Resource PackagesFriday, 22 April 2011
Resource Packages JAR file that contains everythingFriday, 22 April 2011
Resource Packages JAR file that contains everything CompressesFriday, 22 Apri...
Resource Packages JAR file that contains everything Compresses ...
Resource Packages JAR file that contains everything Compresses ...
Resource Packages JAR file that contains everything Compresses ...
Images Badly optimised Thumbnails PNGs compressed up ...
PNG Optimise OptiPNG pngwolf pngcrush ...
TimeFriday, 22 April 2011
SSLFriday, 22 April 2011
SSL Extra roundtripsFriday, 22 April 2011
SSL Extra roundtrips More resources for serversFriday, 22 April 2011
SSL Extra roundtrips More resources for servers Worth...
Tread the users’ path Test on slower connections Slow proxiesFriday, 22 Apri...
Tread the users’ path Tables / Phones Airline connections ...
CDN Single domain Smart routing Data is closer to end...
CDNFriday, 22 April 2011
CDNFriday, 22 April 2011
CDN on a Budget S3Friday, 22 April 2011
Expires Headers Last-Modified Appropriate Dates Cac...
ETags Hash Tag Cache vs Server More flexible than date...
ProblemsFriday, 22 April 2011
Problems Typically unique per serverFriday, 22 April 2011
Problems Typically unique per server Disable if not usedFriday, 22 April 2011
Farms Use options that are not unique per serverFriday, 22 April 2011
Reverse ProxiesFriday, 22 April 2011
Reverse Proxies Varnish Nginx SquidFriday...
Query vs. Filename revisionsFriday, 22 April 2011
Query vs. Filename revisions Cache far in futureFriday, 22 April 2011
Query vs. Filename revisions Cache far in future Revi...
Query vs. Filename revisions Cache far in future Revi...
Query revisionsFriday, 22 April 2011
Query revisions Easy and convenientFriday, 22 April 2011
Query revisions Easy and convenient Usually not recommendedFriday, 22 April ...
Query revisions Easy and convenient Usually not recommended ...
Filename revisionsFriday, 22 April 2011
Filename revisions Requires more workFriday, 22 April 2011
Filename revisions Requires more work RecommendedFriday, 22 April 2011
Filename revisions Requires more work Recommended ...
CompromiseFriday, 22 April 2011
Compromise Create a version functionFriday, 22 April 2011
Compromise Create a version function Put on all resourcesFriday, 22 April 2011
Compromise Create a version function Put on all resources ...
Compromise Create a version function Put on all resources ...
Compromise Create a version function Put on all resources ...
Browser ToolsFriday, 22 April 2011
Browser Tools FirebugFriday, 22 April 2011
Browser Tools Firebug YSlowFriday, 22 April 2011
Browser Tools Firebug YSlow PageSpeedFriday, 22 Ap...
Browser Tools Firebug YSlow PageSpeed ...
Other ToolsFriday, 22 April 2011
Other Tools HTTPWatch.comFriday, 22 April 2011
Other Tools HTTPWatch.com WebPageTest.orgFriday, 22 April 2011
Other Tools HTTPWatch.com WebPageTest.org HTTPArchive...
Other Tools HTTPWatch.com WebPageTest.org HTTPArchive...
Other Tools HTTPWatch.com WebPageTest.org HTTPArchive...
Other Tools HTTPWatch.com WebPageTest.org HTTPArchive...
Other ToolsFriday, 22 April 2011
Other Tools WonderProxy.comFriday, 22 April 2011
Other Tools WonderProxy.com pagespeed.googlelabs.comFriday, 22 April 2011
Other Tools WonderProxy.com pagespeed.googlelabs.com ...
Other Tools WonderProxy.com pagespeed.googlelabs.com ...
Interesting ProjectFriday, 22 April 2011
Interesting Project DiffableFriday, 22 April 2011
Interesting Project Diffable Uses deltasFriday, 22 April 2011
Interesting Project Diffable Uses deltas ...
Interesting Project Diffable Uses deltas ...
Interesting Project Diffable Uses deltas ...
“Knowledge rests not upon truth alone, but upon error also” ...
Demo Time!Friday, 22 April 2011
Questions? helgi@orchestra.io Twitter: @h Joind.in: http://joind....
Upcoming SlideShare
Loading in …5
×

Frontend caching

8,609 views

Published on

You’ve used all the server-side caching tricks in the book: memcache, APC, database cache and so on to squeeze every millisecond out, and now your site is as fast as it will ever get. Well guess again! These technologies are caching and creating the HTML which, if they done correctly, is only 10 – 20% of the user response time, so there is a lot of room for improvement. Learn how to optimize your JavaScript, CSS, Images, Cookies and a whole slew of other things that make frontend caching a magical place.

Published in: Technology
no profile picture user
  • nice job, you should maybe mentioning the advantages of keep-alive in general and especially for https: you can save the ssl handshake between the requests.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More

Frontend caching

  1. 1. Frontend Caching Helgi Þormar Þorbjörnsson PHP Community Con, Nashville, 21st April 2011Friday, 22 April 2011
  2. 2. Who am I? VP of Engineering at Orchestra.io Developer at PEAR From Iceland @h on TwitterFriday, 22 April 2011
  3. 3. Pareto Principle 20% 80%Friday, 22 April 2011
  4. 4. 80 / 20 Rule 20% 80% 20% of sales people produce 80% of salesFriday, 22 April 2011
  5. 5. 80 / 20 Rule 20% 80% 20% of the population receives 80% of the incomeFriday, 22 April 2011
  6. 6. 80 / 20 Rule 20% 80% 20% of causes produce 80% of the effectsFriday, 22 April 2011
  7. 7. 80% of response time is spent downloading resourcesFriday, 22 April 2011
  8. 8. 4 Rules of Web PerformanceFriday, 22 April 2011
  9. 9. Weight Time Processing PerceptionFriday, 22 April 2011
  10. 10. PerceptionFriday, 22 April 2011
  11. 11. Make people think your site is fastFriday, 22 April 2011
  12. 12. When people can interact with the siteFriday, 22 April 2011
  13. 13. Friday, 22 April 2011
  14. 14. “It all depends on how we look at things, and not how they are in themselves.” - Carl G. JungFriday, 22 April 2011
  15. 15. Perception 50% of users arrive on an empty cacheFriday, 22 April 2011
  16. 16. Perception Empty Cache Full Cache 28.0K 1 HTML Document 1.9K 1 Style Sheet File 59.5K 4 Javascript Files 28.0K 1 HTML Document 78.7K 24 Images 0.1K 2 Images 168.1K Total Size 28.1K Total Size 30 HTTP Requests 3 HTTP Requests 2.4s Response Time 0.9s Response TimeFriday, 22 April 2011
  17. 17. WeightFriday, 22 April 2011
  18. 18. HTTP RequestsFriday, 22 April 2011
  19. 19. HTTP Requests Less is moreFriday, 22 April 2011
  20. 20. HTTP Requests Less is more Fewer HTTP RequestsFriday, 22 April 2011
  21. 21. HTTP Requests Less is more Fewer HTTP Requests Easy to improve onFriday, 22 April 2011
  22. 22. CookiesFriday, 22 April 2011
  23. 23. Cookies Sent with static contentFriday, 22 April 2011
  24. 24. Cookies Sent with static content Slow upstream speedFriday, 22 April 2011
  25. 25. Cookies Sent with static content Slow upstream speed Big cookiesFriday, 22 April 2011
  26. 26. Experiment Time! Cookie Size Response Time (Delta) 0 bytes 78 ms ( 0 ms) 500 bytes 79 ms ( +1 ms) 1000 bytes 94 ms (+16 ms) 1500 bytes 109 ms (+31 ms) 2000 bytes 125 ms (+47 ms) 2500 bytes 141 ms (+63 ms) 3000 bytes 156 ms (+78 ms)Friday, 22 April 2011
  27. 27. CookiesFriday, 22 April 2011
  28. 28. CookiesFriday, 22 April 2011
  29. 29. Cookies Remove unnecessary cookiesFriday, 22 April 2011
  30. 30. Cookies Remove unnecessary cookies Appropriate domain levelFriday, 22 April 2011
  31. 31. Cookies Remove unnecessary cookies Appropriate domain level Keep size lowFriday, 22 April 2011
  32. 32. Cookies Remove unnecessary cookies Appropriate domain level Keep size low Set ExpiresFriday, 22 April 2011
  33. 33. Parallel DownloadsFriday, 22 April 2011
  34. 34. Parallel Downloads Be aware of max connection limitsFriday, 22 April 2011
  35. 35. Parallel Downloads Be aware of max connection limits CNAME to point multiple sub domains to the same IPFriday, 22 April 2011
  36. 36. Parallel Downloads Be aware of max connection limits CNAME to point multiple sub domains to the same IPFriday, 22 April 2011
  37. 37. Parallel Downloads Borrowed from BrowserScope.orgFriday, 22 April 2011
  38. 38. Parallel Downloads Borrowed from BrowserScope.orgFriday, 22 April 2011
  39. 39. Parallel Downloads One domain = 2 Parallel connectionsFriday, 22 April 2011
  40. 40. Parallel Downloads One domain = 2 Parallel connections HTML Image Image Image Image Image Image Image Image 0.4 0.8 1.2 1.6 2 2.4 SecsFriday, 22 April 2011
  41. 41. Parallel Downloads Two domains = 4 Parallel connections HTML Image Image Image Image Image Image Image Image 0.4 0.8 1.2 1.6 2 2.4 SecsFriday, 22 April 2011
  42. 42. Parallel Downloads Too many hostnames can cause complicationsFriday, 22 April 2011
  43. 43. Parallel Downloads Too many hostnames can cause complications 2 – 4 sub domains is a good averageFriday, 22 April 2011
  44. 44. Combine Files Combining 6 scripts into 1 eliminates 5 requestsFriday, 22 April 2011
  45. 45. Combine Files Combining 6 scripts into 1 eliminates 5 requests Challenges: develop as separate modules combinations vs. loading more than neededFriday, 22 April 2011
  46. 46. Javascript Doesn’t comply with parallel download rulesFriday, 22 April 2011
  47. 47. Javascript Doesn’t comply with parallel download rules HTML JS Image Image Image Image Image Image Image 0.4 0.8 1.2 1.6 2 2.4 SecsFriday, 22 April 2011
  48. 48. Javascript script defer attribute is not a solutionFriday, 22 April 2011
  49. 49. Javascript script defer attribute is not a solution Solution - move them as low in the page as possibleFriday, 22 April 2011
  50. 50. ProcessingFriday, 22 April 2011
  51. 51. ProcessingFriday, 22 April 2011
  52. 52. Processing Fake the deliveryFriday, 22 April 2011
  53. 53. Processing Fake the delivery Lazy LoadingFriday, 22 April 2011
  54. 54. Processing Fake the delivery Lazy Loading Above the fold LoadingFriday, 22 April 2011
  55. 55. Processing Fake the delivery Lazy Loading Above the fold Loading Delay Javascript LoadingFriday, 22 April 2011
  56. 56. Processing http://www.appelsiini.net/projects/lazyloadFriday, 22 April 2011
  57. 57. Processing Bonus - async attribute http://www.appelsiini.net/projects/lazyloadFriday, 22 April 2011
  58. 58. JS MinificationFriday, 22 April 2011
  59. 59. JS Minification Crushes the file Strips out all cruft Voodoo Magic!Friday, 22 April 2011
  60. 60. JS Minfication UglifyJS Google Closure YUI Compressor Dojo Shrinksafe JSMinFriday, 22 April 2011
  61. 61. JS Minfication UglifyJS Google Closure YUI Compressor Dojo Shrinksafe JSMin http://bit.ly/compression-ratesFriday, 22 April 2011
  62. 62. CSS Minification YUI Compressor minifycss.com OOCSSFriday, 22 April 2011
  63. 63. GZip GZip can be used on JS CSS XML JSONFriday, 22 April 2011
  64. 64. GZip GZip should not be used on Images Document formats Already compressedFriday, 22 April 2011
  65. 65. 404 robots.txt faviconFriday, 22 April 2011
  66. 66. ImagesFriday, 22 April 2011
  67. 67. Images faviconFriday, 22 April 2011
  68. 68. Images favicon CSS SpritesFriday, 22 April 2011
  69. 69. Images favicon CSS SpritesFriday, 22 April 2011
  70. 70. SpritesFriday, 22 April 2011
  71. 71. Sprites Reduces HTTP RequestsFriday, 22 April 2011
  72. 72. Sprites Reduces HTTP Requests Uses CSS Position magicFriday, 22 April 2011
  73. 73. Sprites Reduces HTTP Requests Uses CSS Position magic Hard to maintain long termFriday, 22 April 2011
  74. 74. Sprites Reduces HTTP Requests Uses CSS Position magic Hard to maintain long term Time sinkFriday, 22 April 2011
  75. 75. Sprites Reduces HTTP Requests Uses CSS Position magic Hard to maintain long term Time sink Too much magicFriday, 22 April 2011
  76. 76. Resource PackagesFriday, 22 April 2011
  77. 77. Resource Packages JAR file that contains everythingFriday, 22 April 2011
  78. 78. Resource Packages JAR file that contains everything CompressesFriday, 22 April 2011
  79. 79. Resource Packages JAR file that contains everything Compresses Accesses individual resourcesFriday, 22 April 2011
  80. 80. Resource Packages JAR file that contains everything Compresses Accesses individual resources Easy to maintainFriday, 22 April 2011
  81. 81. Resource Packages JAR file that contains everything Compresses Accesses individual resources Easy to maintain New Proposal in the worksFriday, 22 April 2011
  82. 82. Images Badly optimised Thumbnails PNGs compressed up to 50%Friday, 22 April 2011
  83. 83. PNG Optimise OptiPNG pngwolf pngcrush jpegtranFriday, 22 April 2011
  84. 84. TimeFriday, 22 April 2011
  85. 85. SSLFriday, 22 April 2011
  86. 86. SSL Extra roundtripsFriday, 22 April 2011
  87. 87. SSL Extra roundtrips More resources for serversFriday, 22 April 2011
  88. 88. SSL Extra roundtrips More resources for servers Worth it, tho!Friday, 22 April 2011
  89. 89. Tread the users’ path Test on slower connections Slow proxiesFriday, 22 April 2011
  90. 90. Tread the users’ path Tables / Phones Airline connections Public placesFriday, 22 April 2011
  91. 91. CDN Single domain Smart routing Data is closer to end userFriday, 22 April 2011
  92. 92. CDNFriday, 22 April 2011
  93. 93. CDNFriday, 22 April 2011
  94. 94. CDN on a Budget S3Friday, 22 April 2011
  95. 95. Expires Headers Last-Modified Appropriate Dates Cache far in the future Change file namesFriday, 22 April 2011
  96. 96. ETags Hash Tag Cache vs Server More flexible than dates Good for Single ServerFriday, 22 April 2011
  97. 97. ProblemsFriday, 22 April 2011
  98. 98. Problems Typically unique per serverFriday, 22 April 2011
  99. 99. Problems Typically unique per server Disable if not usedFriday, 22 April 2011
  100. 100. Farms Use options that are not unique per serverFriday, 22 April 2011
  101. 101. Reverse ProxiesFriday, 22 April 2011
  102. 102. Reverse Proxies Varnish Nginx SquidFriday, 22 April 2011
  103. 103. Query vs. Filename revisionsFriday, 22 April 2011
  104. 104. Query vs. Filename revisions Cache far in futureFriday, 22 April 2011
  105. 105. Query vs. Filename revisions Cache far in future Revisioning forces downloadsFriday, 22 April 2011
  106. 106. Query vs. Filename revisions Cache far in future Revisioning forces downloadsFriday, 22 April 2011
  107. 107. Query revisionsFriday, 22 April 2011
  108. 108. Query revisions Easy and convenientFriday, 22 April 2011
  109. 109. Query revisions Easy and convenient Usually not recommendedFriday, 22 April 2011
  110. 110. Query revisions Easy and convenient Usually not recommended Bad proxies are a problemFriday, 22 April 2011
  111. 111. Filename revisionsFriday, 22 April 2011
  112. 112. Filename revisions Requires more workFriday, 22 April 2011
  113. 113. Filename revisions Requires more work RecommendedFriday, 22 April 2011
  114. 114. Filename revisions Requires more work Recommended During build, using md5 hashFriday, 22 April 2011
  115. 115. CompromiseFriday, 22 April 2011
  116. 116. Compromise Create a version functionFriday, 22 April 2011
  117. 117. Compromise Create a version function Put on all resourcesFriday, 22 April 2011
  118. 118. Compromise Create a version function Put on all resources mod_rewrite magicFriday, 22 April 2011
  119. 119. Compromise Create a version function Put on all resources mod_rewrite magic http://bit.ly/query_rev_compFriday, 22 April 2011
  120. 120. Compromise Create a version function Put on all resources mod_rewrite magic http://bit.ly/query_rev_compFriday, 22 April 2011
  121. 121. Browser ToolsFriday, 22 April 2011
  122. 122. Browser Tools FirebugFriday, 22 April 2011
  123. 123. Browser Tools Firebug YSlowFriday, 22 April 2011
  124. 124. Browser Tools Firebug YSlow PageSpeedFriday, 22 April 2011
  125. 125. Browser Tools Firebug YSlow PageSpeed Chrome InspectorFriday, 22 April 2011
  126. 126. Other ToolsFriday, 22 April 2011
  127. 127. Other Tools HTTPWatch.comFriday, 22 April 2011
  128. 128. Other Tools HTTPWatch.com WebPageTest.orgFriday, 22 April 2011
  129. 129. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.orgFriday, 22 April 2011
  130. 130. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.org Yottaa.comFriday, 22 April 2011
  131. 131. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.org Yottaa.com WonderProxy.comFriday, 22 April 2011
  132. 132. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.org Yottaa.com WonderProxy.com pagespeed.googlelabs.comFriday, 22 April 2011
  133. 133. Other ToolsFriday, 22 April 2011
  134. 134. Other Tools WonderProxy.comFriday, 22 April 2011
  135. 135. Other Tools WonderProxy.com pagespeed.googlelabs.comFriday, 22 April 2011
  136. 136. Other Tools WonderProxy.com pagespeed.googlelabs.com BrowserScope.comFriday, 22 April 2011
  137. 137. Other Tools WonderProxy.com pagespeed.googlelabs.com BrowserScope.com html5boilerplate.comFriday, 22 April 2011
  138. 138. Interesting ProjectFriday, 22 April 2011
  139. 139. Interesting Project DiffableFriday, 22 April 2011
  140. 140. Interesting Project Diffable Uses deltasFriday, 22 April 2011
  141. 141. Interesting Project Diffable Uses deltas Transfer only the diffFriday, 22 April 2011
  142. 142. Interesting Project Diffable Uses deltas Transfer only the diff Can be used on JS and CSSFriday, 22 April 2011
  143. 143. Interesting Project Diffable Uses deltas Transfer only the diff Can be used on JS and CSS http://code.google.com/p/diffable/Friday, 22 April 2011
  144. 144. “Knowledge rests not upon truth alone, but upon error also” - Carl G. JungFriday, 22 April 2011
  145. 145. Demo Time!Friday, 22 April 2011
  146. 146. Questions? helgi@orchestra.io Twitter: @h Joind.in: http://joind.in/3340Friday, 22 April 2011

×