Your SlideShare is downloading. ×
0
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Frontend Caching, PHPTek 2011, Chicago
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Frontend Caching, PHPTek 2011, Chicago

1,649

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 …

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, Self Improvement
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,649
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
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 Tek, Chicago, 26th May 2011Thursday, 26 May 2011
  2. Who am I?Thursday, 26 May 2011
  3. Who am I? VP of Engineering at Orchestra.ioThursday, 26 May 2011
  4. Who am I? VP of Engineering at Orchestra.io Developer at PEARThursday, 26 May 2011
  5. Who am I? VP of Engineering at Orchestra.io Developer at PEAR From IcelandThursday, 26 May 2011
  6. Who am I? VP of Engineering at Orchestra.io Developer at PEAR From Iceland @h on TwitterThursday, 26 May 2011
  7. Pareto Principle 20% 80%Thursday, 26 May 2011
  8. 80 / 20 Rule 20% 80% 20% of the population receives 80% of the incomeThursday, 26 May 2011
  9. 80 / 20 Rule 20% 80% 20% of causes produce 80% of the effectsThursday, 26 May 2011
  10. 80% of response time is spent downloading resourcesThursday, 26 May 2011
  11. 4 Rules of Web PerformanceThursday, 26 May 2011
  12. Weight Time Processing PerceptionThursday, 26 May 2011
  13. PerceptionThursday, 26 May 2011
  14. Make people think your site is fastThursday, 26 May 2011
  15. When people can interact with the siteThursday, 26 May 2011
  16. Thursday, 26 May 2011
  17. “It all depends on how we look at things, and not how they are in themselves.” - Carl G. JungThursday, 26 May 2011
  18. Perception 50% of users arrive on an empty cacheThursday, 26 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 TimeThursday, 26 May 2011
  20. WeightThursday, 26 May 2011
  21. HTTP RequestsThursday, 26 May 2011
  22. HTTP Requests Less is moreThursday, 26 May 2011
  23. HTTP Requests Less is more Fewer HTTP RequestsThursday, 26 May 2011
  24. HTTP Requests Less is more Fewer HTTP Requests Easy to improve onThursday, 26 May 2011
  25. CookiesThursday, 26 May 2011
  26. Cookies Sent with static contentThursday, 26 May 2011
  27. Cookies Sent with static content Slow upstream speedThursday, 26 May 2011
  28. Cookies Sent with static content Slow upstream speed Big cookiesThursday, 26 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)Thursday, 26 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)Thursday, 26 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)Thursday, 26 May 2011
  32. CookiesThursday, 26 May 2011
  33. CookiesThursday, 26 May 2011
  34. Cookies Remove unnecessary cookiesThursday, 26 May 2011
  35. Cookies Remove unnecessary cookies Appropriate domain levelThursday, 26 May 2011
  36. Cookies Remove unnecessary cookies Appropriate domain level Keep size lowThursday, 26 May 2011
  37. Cookies Remove unnecessary cookies Appropriate domain level Keep size low Set ExpiresThursday, 26 May 2011
  38. Parallel DownloadsThursday, 26 May 2011
  39. Parallel Downloads Be aware of max connection limitsThursday, 26 May 2011
  40. Parallel Downloads Borrowed from BrowserScope.orgThursday, 26 May 2011
  41. Parallel Downloads Borrowed from BrowserScope.orgThursday, 26 May 2011
  42. Parallel Downloads One domain = 2 Parallel connectionsThursday, 26 May 2011
  43. 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 SecsThursday, 26 May 2011
  44. 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 SecsThursday, 26 May 2011
  45. Parallel Downloads Too many hostnames can cause complicationsThursday, 26 May 2011
  46. Parallel Downloads Too many hostnames can cause complications 2 – 4 sub domains is a good averageThursday, 26 May 2011
  47. Combine Files Combining 6 scripts into 1 eliminates 5 requestsThursday, 26 May 2011
  48. Combine Files Combining 6 scripts into 1 eliminates 5 requests Challenges: develop as separate modules combinations vs. loading more than neededThursday, 26 May 2011
  49. Javascript Doesn’t comply with parallel download rulesThursday, 26 May 2011
  50. 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 SecsThursday, 26 May 2011
  51. Javascript script defer attribute is not a solutionThursday, 26 May 2011
  52. Javascript script defer attribute is not a solution Solution - move them as low in the page as possibleThursday, 26 May 2011
  53. ProcessingThursday, 26 May 2011
  54. ProcessingThursday, 26 May 2011
  55. Processing Fake the deliveryThursday, 26 May 2011
  56. Processing Fake the delivery Lazy LoadingThursday, 26 May 2011
  57. Processing Fake the delivery Lazy Loading Above the fold LoadingThursday, 26 May 2011
  58. Processing Fake the delivery Lazy Loading Above the fold Loading Delay Javascript LoadingThursday, 26 May 2011
  59. ProcessingThursday, 26 May 2011
  60. Processing Bonus - async attributeThursday, 26 May 2011
  61. Processing Bonus - async attribute http://www.appelsiini.net/projects/lazyloadThursday, 26 May 2011
  62. JS MinificationThursday, 26 May 2011
  63. JS Minification Crushes the file Strips out all cruft Voodoo Magic!Thursday, 26 May 2011
  64. JS Minfication UglifyJS Google Closure YUI CompressorThursday, 26 May 2011
  65. JS Minfication UglifyJS Google Closure YUI Compressor http://bit.ly/compression-ratesThursday, 26 May 2011
  66. CSS Minification YUI Compressor minifycss.com OOCSSThursday, 26 May 2011
  67. GZip GZip can be used onThursday, 26 May 2011
  68. GZip GZip can be used on JSThursday, 26 May 2011
  69. GZip GZip can be used on JS CSSThursday, 26 May 2011
  70. GZip GZip can be used on JS CSS XMLThursday, 26 May 2011
  71. GZip GZip can be used on JS CSS XML JSONThursday, 26 May 2011
  72. GZip GZip should not be used onThursday, 26 May 2011
  73. GZip GZip should not be used on ImagesThursday, 26 May 2011
  74. GZip GZip should not be used on Images Document formatsThursday, 26 May 2011
  75. GZip GZip should not be used on Images Document formats Already compressedThursday, 26 May 2011
  76. 404 robots.txt faviconThursday, 26 May 2011
  77. ImagesThursday, 26 May 2011
  78. Images faviconThursday, 26 May 2011
  79. Images favicon CSS SpritesThursday, 26 May 2011
  80. Images favicon CSS Sprites inline base64Thursday, 26 May 2011
  81. Images favicon CSS Sprites inline base64Thursday, 26 May 2011
  82. ImagesThursday, 26 May 2011
  83. Images Badly optimisedThursday, 26 May 2011
  84. Images Badly optimised ThumbnailsThursday, 26 May 2011
  85. Images Badly optimised Thumbnails PNGs compressed up to 50%Thursday, 26 May 2011
  86. PNG Optimise OptiPNG pngwolf pngcrush jpegtranThursday, 26 May 2011
  87. TimeThursday, 26 May 2011
  88. SSLThursday, 26 May 2011
  89. SSL Extra roundtripsThursday, 26 May 2011
  90. SSL Extra roundtrips More resources for serversThursday, 26 May 2011
  91. SSL Extra roundtrips More resources for servers Worth it, tho!Thursday, 26 May 2011
  92. Tread the users’ pathThursday, 26 May 2011
  93. Tread the users’ path Test on slower connectionsThursday, 26 May 2011
  94. Tread the users’ path Test on slower connections Slow proxiesThursday, 26 May 2011
  95. Tread the users’ pathThursday, 26 May 2011
  96. Tread the users’ path Tables / PhonesThursday, 26 May 2011
  97. Tread the users’ path Tables / Phones Airline connectionsThursday, 26 May 2011
  98. Tread the users’ path Tables / Phones Airline connections Public placesThursday, 26 May 2011
  99. CDNThursday, 26 May 2011
  100. CDN Single domainThursday, 26 May 2011
  101. CDN Single domain Smart routingThursday, 26 May 2011
  102. CDN Single domain Smart routing Data is closer to end userThursday, 26 May 2011
  103. CDNThursday, 26 May 2011
  104. CDNThursday, 26 May 2011
  105. CDN on a BudgetThursday, 26 May 2011
  106. CDN on a Budget S3Thursday, 26 May 2011
  107. Query vs. Filename revisionsThursday, 26 May 2011
  108. Query vs. Filename revisions Cache far in futureThursday, 26 May 2011
  109. Query vs. Filename revisions Cache far in future Revisioning forces downloadsThursday, 26 May 2011
  110. Query vs. Filename revisions Cache far in future Revisioning forces downloadsThursday, 26 May 2011
  111. Query revisionsThursday, 26 May 2011
  112. Query revisions Easy and convenientThursday, 26 May 2011
  113. Query revisions Easy and convenient Usually not recommendedThursday, 26 May 2011
  114. Query revisions Easy and convenient Usually not recommended Bad proxies are a problemThursday, 26 May 2011
  115. Filename revisionsThursday, 26 May 2011
  116. Filename revisions Requires more workThursday, 26 May 2011
  117. Filename revisions Requires more work RecommendedThursday, 26 May 2011
  118. Filename revisions Requires more work Recommended During build, using md5 hashThursday, 26 May 2011
  119. CompromiseThursday, 26 May 2011
  120. Compromise Create a version functionThursday, 26 May 2011
  121. Compromise Create a version function Put on all resourcesThursday, 26 May 2011
  122. Compromise Create a version function Put on all resources mod_rewrite magicThursday, 26 May 2011
  123. Compromise Create a version function Put on all resources mod_rewrite magic http://bit.ly/query_rev_compThursday, 26 May 2011
  124. Browser ToolsThursday, 26 May 2011
  125. Browser Tools FirebugThursday, 26 May 2011
  126. Browser Tools Firebug YSlowThursday, 26 May 2011
  127. Browser Tools Firebug YSlow PageSpeedThursday, 26 May 2011
  128. Browser Tools Firebug YSlow PageSpeed Chrome InspectorThursday, 26 May 2011
  129. Other ToolsThursday, 26 May 2011
  130. Other Tools HTTPWatch.comThursday, 26 May 2011
  131. Other Tools HTTPWatch.com WebPageTest.orgThursday, 26 May 2011
  132. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.orgThursday, 26 May 2011
  133. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.org chartbeat.comThursday, 26 May 2011
  134. Other ToolsThursday, 26 May 2011
  135. Other Tools WonderProxy.comThursday, 26 May 2011
  136. Other Tools WonderProxy.com BrowserScope.comThursday, 26 May 2011
  137. Other Tools WonderProxy.com BrowserScope.com html5boilerplate.comThursday, 26 May 2011
  138. “Knowledge rests not upon truth alone, but upon error also” - Carl G. JungThursday, 26 May 2011
  139. Questions? @h helgi@orchestra.io Joind.in: http://joind.in/3401Thursday, 26 May 2011

×