Frontend caching

  • 4,857 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,857
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
1
Likes
19

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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