Frontend caching - PHP Day, Italy, 2011
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Frontend caching - PHP Day, Italy, 2011

on

  • 2,917 views

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.

Statistics

Views

Total Views
2,917
Views on SlideShare
2,917
Embed Views
0

Actions

Likes
6
Downloads
41
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Frontend caching - PHP Day, Italy, 2011 Presentation Transcript

  • 1. Frontend Caching Helgi Þormar Þorbjörnsson PhpDay, Italy, Verona, 14th May 2011Saturday, 14 May 2011
  • 2. Who am I?Saturday, 14 May 2011
  • 3. Who am I? VP of Engineering at Orchestra.ioSaturday, 14 May 2011
  • 4. Who am I? VP of Engineering at Orchestra.io Developer at PEARSaturday, 14 May 2011
  • 5. Who am I? VP of Engineering at Orchestra.io Developer at PEAR From IcelandSaturday, 14 May 2011
  • 6. Who am I? VP of Engineering at Orchestra.io Developer at PEAR From Iceland @h on TwitterSaturday, 14 May 2011
  • 7. Pareto Principle 20% 80%Saturday, 14 May 2011
  • 8. 80 / 20 Rule 20% 80% 20% of the population receives 80% of the incomeSaturday, 14 May 2011
  • 9. 80 / 20 Rule 20% 80% 20% of causes produce 80% of the effectsSaturday, 14 May 2011
  • 10. 80% of response time is spent downloading resourcesSaturday, 14 May 2011
  • 11. 4 Rules of Web PerformanceSaturday, 14 May 2011
  • 12. Weight Time Processing PerceptionSaturday, 14 May 2011
  • 13. PerceptionSaturday, 14 May 2011
  • 14. Make people think your site is fastSaturday, 14 May 2011
  • 15. When people can interact with the siteSaturday, 14 May 2011
  • 16. Saturday, 14 May 2011
  • 17. “It all depends on how we look at things, and not how they are in themselves.” - Carl G. JungSaturday, 14 May 2011
  • 18. Perception 50% of users arrive on an empty cacheSaturday, 14 May 2011
  • 19. 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 TimeSaturday, 14 May 2011
  • 20. WeightSaturday, 14 May 2011
  • 21. HTTP RequestsSaturday, 14 May 2011
  • 22. HTTP Requests Less is moreSaturday, 14 May 2011
  • 23. HTTP Requests Less is more Fewer HTTP RequestsSaturday, 14 May 2011
  • 24. HTTP Requests Less is more Fewer HTTP Requests Easy to improve onSaturday, 14 May 2011
  • 25. CookiesSaturday, 14 May 2011
  • 26. Cookies Sent with static contentSaturday, 14 May 2011
  • 27. Cookies Sent with static content Slow upstream speedSaturday, 14 May 2011
  • 28. Cookies Sent with static content Slow upstream speed Big cookiesSaturday, 14 May 2011
  • 29. 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)Saturday, 14 May 2011
  • 30. 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)Saturday, 14 May 2011
  • 31. 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)Saturday, 14 May 2011
  • 32. CookiesSaturday, 14 May 2011
  • 33. CookiesSaturday, 14 May 2011
  • 34. Cookies Remove unnecessary cookiesSaturday, 14 May 2011
  • 35. Cookies Remove unnecessary cookies Appropriate domain levelSaturday, 14 May 2011
  • 36. Cookies Remove unnecessary cookies Appropriate domain level Keep size lowSaturday, 14 May 2011
  • 37. Cookies Remove unnecessary cookies Appropriate domain level Keep size low Set ExpiresSaturday, 14 May 2011
  • 38. Parallel DownloadsSaturday, 14 May 2011
  • 39. Parallel Downloads Be aware of max connection limitsSaturday, 14 May 2011
  • 40. Parallel Downloads Be aware of max connection limits CNAME to point multiple sub domains to the same IPSaturday, 14 May 2011
  • 41. Parallel Downloads Be aware of max connection limits CNAME to point multiple sub domains to the same IPSaturday, 14 May 2011
  • 42. Parallel Downloads Borrowed from BrowserScope.orgSaturday, 14 May 2011
  • 43. Parallel Downloads Borrowed from BrowserScope.orgSaturday, 14 May 2011
  • 44. Parallel Downloads One domain = 2 Parallel connectionsSaturday, 14 May 2011
  • 45. 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 SecsSaturday, 14 May 2011
  • 46. 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 SecsSaturday, 14 May 2011
  • 47. Parallel Downloads Too many hostnames can cause complicationsSaturday, 14 May 2011
  • 48. Parallel Downloads Too many hostnames can cause complications 2 – 4 sub domains is a good averageSaturday, 14 May 2011
  • 49. Combine Files Combining 6 scripts into 1 eliminates 5 requestsSaturday, 14 May 2011
  • 50. Combine Files Combining 6 scripts into 1 eliminates 5 requests Challenges: develop as separate modules combinations vs. loading more than neededSaturday, 14 May 2011
  • 51. Javascript Doesn’t comply with parallel download rulesSaturday, 14 May 2011
  • 52. 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 SecsSaturday, 14 May 2011
  • 53. Javascript script defer attribute is not a solutionSaturday, 14 May 2011
  • 54. Javascript script defer attribute is not a solution Solution - move them as low in the page as possibleSaturday, 14 May 2011
  • 55. ProcessingSaturday, 14 May 2011
  • 56. ProcessingSaturday, 14 May 2011
  • 57. Processing Fake the deliverySaturday, 14 May 2011
  • 58. Processing Fake the delivery Lazy LoadingSaturday, 14 May 2011
  • 59. Processing Fake the delivery Lazy Loading Above the fold LoadingSaturday, 14 May 2011
  • 60. Processing Fake the delivery Lazy Loading Above the fold Loading Delay Javascript LoadingSaturday, 14 May 2011
  • 61. ProcessingSaturday, 14 May 2011
  • 62. Processing Bonus - async attributeSaturday, 14 May 2011
  • 63. Processing Bonus - async attribute http://www.appelsiini.net/projects/lazyloadSaturday, 14 May 2011
  • 64. JS MinificationSaturday, 14 May 2011
  • 65. JS Minification Crushes the file Strips out all cruft Voodoo Magic!Saturday, 14 May 2011
  • 66. JS Minfication UglifyJS Google Closure YUI CompressorSaturday, 14 May 2011
  • 67. JS Minfication UglifyJS Google Closure YUI Compressor http://bit.ly/compression-ratesSaturday, 14 May 2011
  • 68. CSS Minification YUI Compressor minifycss.com OOCSSSaturday, 14 May 2011
  • 69. GZip GZip can be used onSaturday, 14 May 2011
  • 70. GZip GZip can be used on JSSaturday, 14 May 2011
  • 71. GZip GZip can be used on JS CSSSaturday, 14 May 2011
  • 72. GZip GZip can be used on JS CSS XMLSaturday, 14 May 2011
  • 73. GZip GZip can be used on JS CSS XML JSONSaturday, 14 May 2011
  • 74. GZip GZip should not be used onSaturday, 14 May 2011
  • 75. GZip GZip should not be used on ImagesSaturday, 14 May 2011
  • 76. GZip GZip should not be used on Images Document formatsSaturday, 14 May 2011
  • 77. GZip GZip should not be used on Images Document formats Already compressedSaturday, 14 May 2011
  • 78. 404 robots.txt faviconSaturday, 14 May 2011
  • 79. ImagesSaturday, 14 May 2011
  • 80. Images faviconSaturday, 14 May 2011
  • 81. Images favicon CSS SpritesSaturday, 14 May 2011
  • 82. Images favicon CSS SpritesSaturday, 14 May 2011
  • 83. ImagesSaturday, 14 May 2011
  • 84. Images Badly optimisedSaturday, 14 May 2011
  • 85. Images Badly optimised ThumbnailsSaturday, 14 May 2011
  • 86. Images Badly optimised Thumbnails PNGs compressed up to 50%Saturday, 14 May 2011
  • 87. PNG Optimise OptiPNG pngwolf pngcrush jpegtranSaturday, 14 May 2011
  • 88. TimeSaturday, 14 May 2011
  • 89. SSLSaturday, 14 May 2011
  • 90. SSL Extra roundtripsSaturday, 14 May 2011
  • 91. SSL Extra roundtrips More resources for serversSaturday, 14 May 2011
  • 92. SSL Extra roundtrips More resources for servers Worth it, tho!Saturday, 14 May 2011
  • 93. Tread the users’ pathSaturday, 14 May 2011
  • 94. Tread the users’ path Test on slower connectionsSaturday, 14 May 2011
  • 95. Tread the users’ path Test on slower connections Slow proxiesSaturday, 14 May 2011
  • 96. Tread the users’ pathSaturday, 14 May 2011
  • 97. Tread the users’ path Tables / PhonesSaturday, 14 May 2011
  • 98. Tread the users’ path Tables / Phones Airline connectionsSaturday, 14 May 2011
  • 99. Tread the users’ path Tables / Phones Airline connections Public placesSaturday, 14 May 2011
  • 100. CDNSaturday, 14 May 2011
  • 101. CDN Single domainSaturday, 14 May 2011
  • 102. CDN Single domain Smart routingSaturday, 14 May 2011
  • 103. CDN Single domain Smart routing Data is closer to end userSaturday, 14 May 2011
  • 104. CDNSaturday, 14 May 2011
  • 105. CDNSaturday, 14 May 2011
  • 106. CDN on a BudgetSaturday, 14 May 2011
  • 107. CDN on a Budget S3Saturday, 14 May 2011
  • 108. Query vs. Filename revisionsSaturday, 14 May 2011
  • 109. Query vs. Filename revisions Cache far in futureSaturday, 14 May 2011
  • 110. Query vs. Filename revisions Cache far in future Revisioning forces downloadsSaturday, 14 May 2011
  • 111. Query vs. Filename revisions Cache far in future Revisioning forces downloadsSaturday, 14 May 2011
  • 112. Query revisionsSaturday, 14 May 2011
  • 113. Query revisions Easy and convenientSaturday, 14 May 2011
  • 114. Query revisions Easy and convenient Usually not recommendedSaturday, 14 May 2011
  • 115. Query revisions Easy and convenient Usually not recommended Bad proxies are a problemSaturday, 14 May 2011
  • 116. Filename revisionsSaturday, 14 May 2011
  • 117. Filename revisions Requires more workSaturday, 14 May 2011
  • 118. Filename revisions Requires more work RecommendedSaturday, 14 May 2011
  • 119. Filename revisions Requires more work Recommended During build, using md5 hashSaturday, 14 May 2011
  • 120. CompromiseSaturday, 14 May 2011
  • 121. Compromise Create a version functionSaturday, 14 May 2011
  • 122. Compromise Create a version function Put on all resourcesSaturday, 14 May 2011
  • 123. Compromise Create a version function Put on all resources mod_rewrite magicSaturday, 14 May 2011
  • 124. Compromise Create a version function Put on all resources mod_rewrite magic http://bit.ly/query_rev_compSaturday, 14 May 2011
  • 125. Browser ToolsSaturday, 14 May 2011
  • 126. Browser Tools FirebugSaturday, 14 May 2011
  • 127. Browser Tools Firebug YSlowSaturday, 14 May 2011
  • 128. Browser Tools Firebug YSlow PageSpeedSaturday, 14 May 2011
  • 129. Browser Tools Firebug YSlow PageSpeed Chrome InspectorSaturday, 14 May 2011
  • 130. Other ToolsSaturday, 14 May 2011
  • 131. Other Tools HTTPWatch.comSaturday, 14 May 2011
  • 132. Other Tools HTTPWatch.com WebPageTest.orgSaturday, 14 May 2011
  • 133. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.orgSaturday, 14 May 2011
  • 134. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.org Yottaa.comSaturday, 14 May 2011
  • 135. Other ToolsSaturday, 14 May 2011
  • 136. Other Tools WonderProxy.comSaturday, 14 May 2011
  • 137. Other Tools WonderProxy.com pagespeed.googlelabs.comSaturday, 14 May 2011
  • 138. Other Tools WonderProxy.com pagespeed.googlelabs.com BrowserScope.comSaturday, 14 May 2011
  • 139. Other Tools WonderProxy.com pagespeed.googlelabs.com BrowserScope.com html5boilerplate.comSaturday, 14 May 2011
  • 140. “Knowledge rests not upon truth alone, but upon error also” - Carl G. JungSaturday, 14 May 2011
  • 141. Questions? helgi@orchestra.io Twitter: @h Joind.in: http://joind.in/2987Saturday, 14 May 2011