Successfully reported this slideshow.
Your SlideShare is downloading. ×

Frontend caching

•
Apr. 22, 2011
• 28 likes • 5,910 views
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Drupal as a winning Web Platform
Drupal as a winning Web Platform
Loading in …3
×

Check these out next

Gradle - The hackable build-tool
Leonard Axelsson
Jono mozilla-talk
Campus Party Brasil
the role of the future academic library...
Penny Hagen
Public days swedisch broadcasting presentation Vincent
Vincent Everts
Form project why is the sky blue and other questions
aakashm
20110721 pankaku us
01Booster
The Productive Researcher's Technology Toolbox
Stratepedia Presentations
Vrom presentatie slim bouwen & sociale media
Vincent Everts
1 of 146 Ad

Frontend caching

Apr. 22, 2011
• 28 likes • 5,910 views
Technology

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.

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.

Technology
Advertisement

Recommended

Drupal as a winning Web Platform
Chapter Three
533 views
55 slides
Presentation Orange ftgroup the future of mobile
Vincent Everts
1.2k views
276 slides
Zend_Cache: how to improve the performance of PHP applications
Enrico Zimuel
6.4k views
29 slides
Performance tuning with zend framework
Alan Seiden
7.7k views
26 slides
Bonnes pratiques de conception d'application pour iPhone : retour d'expérience
Jacinthe Busson
2.8k views
29 slides
Caching Strategies
Michal Špaček
11.7k views
56 slides
Ruby can haz Everyone
RubyX
597 views
64 slides
Frontend Caching, PHPTek 2011, Chicago
Helgi Þormar Þorbjörnsson
1k views
139 slides
Advertisement

More Related Content

Similar to Frontend caching (18)

Gradle - The hackable build-tool
Leonard Axelsson
736 views
Jono mozilla-talk
Campus Party Brasil
494 views
the role of the future academic library...
Penny Hagen
2.5k views
Public days swedisch broadcasting presentation Vincent
Vincent Everts
1.3k views
Form project why is the sky blue and other questions
aakashm
243 views
20110721 pankaku us
01Booster
614 views
The Productive Researcher's Technology Toolbox
Stratepedia Presentations
704 views
Vrom presentatie slim bouwen & sociale media
Vincent Everts
790 views
Mozilla: Continuous Deploment on SUMO
Matt Brandt
1.3k views
PyconUA - How to build ERP application having fun?
Andrew Mleczko
1.6k views
clrh58
Maehana Tsuyoshi
1k views
Distributed Backups for friends and communities
Ade Oshineye
1.6k views
ExpOn 2011 - Diego Monteiro - Níveis de Maturidade nas Mídias Sociais
DOGSCAMP Summit
934 views
clipperz @ JSE2011
gcsolaroli
280 views
Donating a mature project to Eclipse
glynnormington
674 views
Frontend caching - PHP Day, Italy, 2011
Helgi Þormar Þorbjörnsson
1.8k views
Sony benelux & social media
Vincent Everts
1.1k views
Distribute the workload, PHPTek, Amsterdam, 2011
Helgi Þormar Þorbjörnsson
2.3k views
Gradle - The hackable build-tool
Leonard Axelsson
736 views
8 slides
Jono mozilla-talk
Campus Party Brasil
494 views
57 slides
the role of the future academic library...
Penny Hagen
2.5k views
28 slides
Public days swedisch broadcasting presentation Vincent
Vincent Everts
1.3k views
259 slides
Form project why is the sky blue and other questions
aakashm
243 views
52 slides
20110721 pankaku us
01Booster
614 views
67 slides

More from Helgi Þormar Þorbjörnsson (14)

Phar, The PHP .exe Format
Helgi Þormar Þorbjörnsson
7.9k views
Distribute the workload, PHP Barcelona 2011
Helgi Þormar Þorbjörnsson
2.7k views
Scale like an ant, distribute the workload - DPC, Amsterdam, 2011
Helgi Þormar Þorbjörnsson
2.1k views
Think like an ant, distribute the workload - PhpDay, Italy, 2011
Helgi Þormar Þorbjörnsson
1.4k views
Plant Pyrus in your system - A guide to a plugin system.
Helgi Þormar Þorbjörnsson
1k views
PEAR2 & Pyrus - The look ahead
Helgi Þormar Þorbjörnsson
2.2k views
Frontend Caching - The "new" frontier
Helgi Þormar Þorbjörnsson
1k views
Caching for Cash, part 4 DPC 2009
Helgi Þormar Þorbjörnsson
680 views
Cashing For Cash, part 1 DPC 2009
Helgi Þormar Þorbjörnsson
896 views
Website releases made easy with the PEAR installer, OSCON 2009
Helgi Þormar Þorbjörnsson
1.4k views
Caching for Cash - Part 4
Helgi Þormar Þorbjörnsson
536 views
Caching for Cash - Part 1
Helgi Þormar Þorbjörnsson
534 views
Coping with Cyber Monday
Helgi Þormar Þorbjörnsson
505 views
Website releases made easy with the PEAR installer - Barcelona 2008
Helgi Þormar Þorbjörnsson
1k views
Phar, The PHP .exe Format
Helgi Þormar Þorbjörnsson
7.9k views
73 slides
Distribute the workload, PHP Barcelona 2011
Helgi Þormar Þorbjörnsson
2.7k views
100 slides
Scale like an ant, distribute the workload - DPC, Amsterdam, 2011
Helgi Þormar Þorbjörnsson
2.1k views
250 slides
Think like an ant, distribute the workload - PhpDay, Italy, 2011
Helgi Þormar Þorbjörnsson
1.4k views
126 slides
Plant Pyrus in your system - A guide to a plugin system.
Helgi Þormar Þorbjörnsson
1k views
60 slides
PEAR2 & Pyrus - The look ahead
Helgi Þormar Þorbjörnsson
2.2k views
29 slides
Advertisement

Recently uploaded (20)

Integrating ScyllaDB with Quarkus
ScyllaDB
0 views
Use ScyllaDB Alternator to Use Amazon DynamoDB API, Everywhere, Better, More ...
ScyllaDB
0 views
Strategies For Migrating From SQL to NoSQL — The Apache Kafka Way
ScyllaDB
0 views
Olivepower-Logo.pdf
Olivepower
0 views
CI/CD for Data - Building Data Development Environment with lakeFS
ScyllaDB
0 views
Sink Your Teeth into Streaming at Any Scale
ScyllaDB
0 views
16119 - Get to Know Your Data Sets (1).pdf
3operatordcslipiPeng
0 views
Mini cube salt bath furnace 1000°C
Borel Swiss
0 views
ScyllaDB Cloud Goes Serverless
ScyllaDB
0 views
Build Low Latency, Windowless Event Processing Pipelines with Quine and ScyllaDB
ScyllaDB
0 views
NUMBER SYSTEM.pptx
SheriNagender
0 views
Optimizing ScyllaDB Performance via Observability
ScyllaDB
0 views
Scaling ScyllaDB Storage Engine with State-of-Art Compaction
ScyllaDB
0 views
Worldwide Local Latency With ScyllaDB
ScyllaDB
0 views
The Database Trends that are Transforming Your Database Infrastructure Forever
ScyllaDB
0 views
Using ScyllaDB for Distribution of Game Assets in Unreal Engine
ScyllaDB
0 views
From Postgres to ScyllaDB: Migration Strategies and Performance Gains
ScyllaDB
0 views
Dev_Java.pdf
CarlosSilva389091
0 views
Scalable and Resilient Security Ratings Platform with ScyllaDB
ScyllaDB
0 views
Synopsys_site.pptx
Arthur528009
0 views
Integrating ScyllaDB with Quarkus
ScyllaDB
0 views
13 slides
Use ScyllaDB Alternator to Use Amazon DynamoDB API, Everywhere, Better, More ...
ScyllaDB
0 views
43 slides
Strategies For Migrating From SQL to NoSQL — The Apache Kafka Way
ScyllaDB
0 views
31 slides
Olivepower-Logo.pdf
Olivepower
0 views
1 slide
CI/CD for Data - Building Data Development Environment with lakeFS
ScyllaDB
0 views
24 slides
Sink Your Teeth into Streaming at Any Scale
ScyllaDB
0 views
30 slides

Frontend caching

  1. 1. Frontend Caching Helgi Þormar Þorbjörnsson PHP Community Con, Nashville, 21st April 2011 Friday, 22 April 2011
  2. 2. Who am I? VP of Engineering at Orchestra.io Developer at PEAR From Iceland @h on Twitter Friday, 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 sales Friday, 22 April 2011
  5. 5. 80 / 20 Rule 20% 80% 20% of the population receives 80% of the income Friday, 22 April 2011
  6. 6. 80 / 20 Rule 20% 80% 20% of causes produce 80% of the effects Friday, 22 April 2011
  7. 7. 80% of response time is spent downloading resources Friday, 22 April 2011
  8. 8. 4 Rules of Web Performance Friday, 22 April 2011
  9. 9. Weight Time Processing Perception Friday, 22 April 2011
  10. 10. Perception Friday, 22 April 2011
  11. 11. Make people think your site is fast Friday, 22 April 2011
  12. 12. When people can interact with the site Friday, 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. Jung Friday, 22 April 2011
  15. 15. Perception 50% of users arrive on an empty cache Friday, 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 Time Friday, 22 April 2011
  17. 17. Weight Friday, 22 April 2011
  18. 18. HTTP Requests Friday, 22 April 2011
  19. 19. HTTP Requests Less is more Friday, 22 April 2011
  20. 20. HTTP Requests Less is more Fewer HTTP Requests Friday, 22 April 2011
  21. 21. HTTP Requests Less is more Fewer HTTP Requests Easy to improve on Friday, 22 April 2011
  22. 22. Cookies Friday, 22 April 2011
  23. 23. Cookies Sent with static content Friday, 22 April 2011
  24. 24. Cookies Sent with static content Slow upstream speed Friday, 22 April 2011
  25. 25. Cookies Sent with static content Slow upstream speed Big cookies Friday, 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. Cookies Friday, 22 April 2011
  28. 28. Cookies Friday, 22 April 2011
  29. 29. Cookies Remove unnecessary cookies Friday, 22 April 2011
  30. 30. Cookies Remove unnecessary cookies Appropriate domain level Friday, 22 April 2011
  31. 31. Cookies Remove unnecessary cookies Appropriate domain level Keep size low Friday, 22 April 2011
  32. 32. Cookies Remove unnecessary cookies Appropriate domain level Keep size low Set Expires Friday, 22 April 2011
  33. 33. Parallel Downloads Friday, 22 April 2011
  34. 34. Parallel Downloads Be aware of max connection limits Friday, 22 April 2011
  35. 35. Parallel Downloads Be aware of max connection limits CNAME to point multiple sub domains to the same IP Friday, 22 April 2011
  36. 36. Parallel Downloads Be aware of max connection limits CNAME to point multiple sub domains to the same IP Friday, 22 April 2011
  37. 37. Parallel Downloads Borrowed from BrowserScope.org Friday, 22 April 2011
  38. 38. Parallel Downloads Borrowed from BrowserScope.org Friday, 22 April 2011
  39. 39. Parallel Downloads One domain = 2 Parallel connections Friday, 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 Secs Friday, 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 Secs Friday, 22 April 2011
  42. 42. Parallel Downloads Too many hostnames can cause complications Friday, 22 April 2011
  43. 43. Parallel Downloads Too many hostnames can cause complications 2 – 4 sub domains is a good average Friday, 22 April 2011
  44. 44. Combine Files Combining 6 scripts into 1 eliminates 5 requests Friday, 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 needed Friday, 22 April 2011
  46. 46. Javascript Doesn’t comply with parallel download rules Friday, 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 Secs Friday, 22 April 2011
  48. 48. Javascript script defer attribute is not a solution Friday, 22 April 2011
  49. 49. Javascript script defer attribute is not a solution Solution - move them as low in the page as possible Friday, 22 April 2011
  50. 50. Processing Friday, 22 April 2011
  51. 51. Processing Friday, 22 April 2011
  52. 52. Processing Fake the delivery Friday, 22 April 2011
  53. 53. Processing Fake the delivery Lazy Loading Friday, 22 April 2011
  54. 54. Processing Fake the delivery Lazy Loading Above the fold Loading Friday, 22 April 2011
  55. 55. Processing Fake the delivery Lazy Loading Above the fold Loading Delay Javascript Loading Friday, 22 April 2011
  56. 56. Processing http://www.appelsiini.net/projects/lazyload Friday, 22 April 2011
  57. 57. Processing Bonus - async attribute http://www.appelsiini.net/projects/lazyload Friday, 22 April 2011
  58. 58. JS Minification Friday, 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 JSMin Friday, 22 April 2011
  61. 61. JS Minfication UglifyJS Google Closure YUI Compressor Dojo Shrinksafe JSMin http://bit.ly/compression-rates Friday, 22 April 2011
  62. 62. CSS Minification YUI Compressor minifycss.com OOCSS Friday, 22 April 2011
  63. 63. GZip GZip can be used on JS CSS XML JSON Friday, 22 April 2011
  64. 64. GZip GZip should not be used on Images Document formats Already compressed Friday, 22 April 2011
  65. 65. 404 robots.txt favicon Friday, 22 April 2011
  66. 66. Images Friday, 22 April 2011
  67. 67. Images favicon Friday, 22 April 2011
  68. 68. Images favicon CSS Sprites Friday, 22 April 2011
  69. 69. Images favicon CSS Sprites Friday, 22 April 2011
  70. 70. Sprites Friday, 22 April 2011
  71. 71. Sprites Reduces HTTP Requests Friday, 22 April 2011
  72. 72. Sprites Reduces HTTP Requests Uses CSS Position magic Friday, 22 April 2011
  73. 73. Sprites Reduces HTTP Requests Uses CSS Position magic Hard to maintain long term Friday, 22 April 2011
  74. 74. Sprites Reduces HTTP Requests Uses CSS Position magic Hard to maintain long term Time sink Friday, 22 April 2011
  75. 75. Sprites Reduces HTTP Requests Uses CSS Position magic Hard to maintain long term Time sink Too much magic Friday, 22 April 2011
  76. 76. Resource Packages Friday, 22 April 2011
  77. 77. Resource Packages JAR file that contains everything Friday, 22 April 2011
  78. 78. Resource Packages JAR file that contains everything Compresses Friday, 22 April 2011
  79. 79. Resource Packages JAR file that contains everything Compresses Accesses individual resources Friday, 22 April 2011
  80. 80. Resource Packages JAR file that contains everything Compresses Accesses individual resources Easy to maintain Friday, 22 April 2011
  81. 81. Resource Packages JAR file that contains everything Compresses Accesses individual resources Easy to maintain New Proposal in the works Friday, 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 jpegtran Friday, 22 April 2011
  84. 84. Time Friday, 22 April 2011
  85. 85. SSL Friday, 22 April 2011
  86. 86. SSL Extra roundtrips Friday, 22 April 2011
  87. 87. SSL Extra roundtrips More resources for servers Friday, 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 proxies Friday, 22 April 2011
  90. 90. Tread the users’ path Tables / Phones Airline connections Public places Friday, 22 April 2011
  91. 91. CDN Single domain Smart routing Data is closer to end user Friday, 22 April 2011
  92. 92. CDN Friday, 22 April 2011
  93. 93. CDN Friday, 22 April 2011
  94. 94. CDN on a Budget S3 Friday, 22 April 2011
  95. 95. Expires Headers Last-Modified Appropriate Dates Cache far in the future Change file names Friday, 22 April 2011
  96. 96. ETags Hash Tag Cache vs Server More flexible than dates Good for Single Server Friday, 22 April 2011
  97. 97. Problems Friday, 22 April 2011
  98. 98. Problems Typically unique per server Friday, 22 April 2011
  99. 99. Problems Typically unique per server Disable if not used Friday, 22 April 2011
  100. 100. Farms Use options that are not unique per server Friday, 22 April 2011
  101. 101. Reverse Proxies Friday, 22 April 2011
  102. 102. Reverse Proxies Varnish Nginx Squid Friday, 22 April 2011
  103. 103. Query vs. Filename revisions Friday, 22 April 2011
  104. 104. Query vs. Filename revisions Cache far in future Friday, 22 April 2011
  105. 105. Query vs. Filename revisions Cache far in future Revisioning forces downloads Friday, 22 April 2011
  106. 106. Query vs. Filename revisions Cache far in future Revisioning forces downloads Friday, 22 April 2011
  107. 107. Query revisions Friday, 22 April 2011
  108. 108. Query revisions Easy and convenient Friday, 22 April 2011
  109. 109. Query revisions Easy and convenient Usually not recommended Friday, 22 April 2011
  110. 110. Query revisions Easy and convenient Usually not recommended Bad proxies are a problem Friday, 22 April 2011
  111. 111. Filename revisions Friday, 22 April 2011
  112. 112. Filename revisions Requires more work Friday, 22 April 2011
  113. 113. Filename revisions Requires more work Recommended Friday, 22 April 2011
  114. 114. Filename revisions Requires more work Recommended During build, using md5 hash Friday, 22 April 2011
  115. 115. Compromise Friday, 22 April 2011
  116. 116. Compromise Create a version function Friday, 22 April 2011
  117. 117. Compromise Create a version function Put on all resources Friday, 22 April 2011
  118. 118. Compromise Create a version function Put on all resources mod_rewrite magic Friday, 22 April 2011
  119. 119. Compromise Create a version function Put on all resources mod_rewrite magic http://bit.ly/query_rev_comp Friday, 22 April 2011
  120. 120. Compromise Create a version function Put on all resources mod_rewrite magic http://bit.ly/query_rev_comp Friday, 22 April 2011
  121. 121. Browser Tools Friday, 22 April 2011
  122. 122. Browser Tools Firebug Friday, 22 April 2011
  123. 123. Browser Tools Firebug YSlow Friday, 22 April 2011
  124. 124. Browser Tools Firebug YSlow PageSpeed Friday, 22 April 2011
  125. 125. Browser Tools Firebug YSlow PageSpeed Chrome Inspector Friday, 22 April 2011
  126. 126. Other Tools Friday, 22 April 2011
  127. 127. Other Tools HTTPWatch.com Friday, 22 April 2011
  128. 128. Other Tools HTTPWatch.com WebPageTest.org Friday, 22 April 2011
  129. 129. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.org Friday, 22 April 2011
  130. 130. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.org Yottaa.com Friday, 22 April 2011
  131. 131. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.org Yottaa.com WonderProxy.com Friday, 22 April 2011
  132. 132. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.org Yottaa.com WonderProxy.com pagespeed.googlelabs.com Friday, 22 April 2011
  133. 133. Other Tools Friday, 22 April 2011
  134. 134. Other Tools WonderProxy.com Friday, 22 April 2011
  135. 135. Other Tools WonderProxy.com pagespeed.googlelabs.com Friday, 22 April 2011
  136. 136. Other Tools WonderProxy.com pagespeed.googlelabs.com BrowserScope.com Friday, 22 April 2011
  137. 137. Other Tools WonderProxy.com pagespeed.googlelabs.com BrowserScope.com html5boilerplate.com Friday, 22 April 2011
  138. 138. Interesting Project Friday, 22 April 2011
  139. 139. Interesting Project Diffable Friday, 22 April 2011
  140. 140. Interesting Project Diffable Uses deltas Friday, 22 April 2011
  141. 141. Interesting Project Diffable Uses deltas Transfer only the diff Friday, 22 April 2011
  142. 142. Interesting Project Diffable Uses deltas Transfer only the diff Can be used on JS and CSS Friday, 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. Jung Friday, 22 April 2011
  145. 145. Demo Time! Friday, 22 April 2011
  146. 146. Questions? helgi@orchestra.io Twitter: @h Joind.in: http://joind.in/3340 Friday, 22 April 2011

×