The document discusses front end optimization (FEO) which refers to techniques for improving the performance of how web pages load in browsers. It focuses on reducing the number of round trips, bytes transferred, and improving caching and page rendering. The document outlines specific FEO techniques companies can implement manually but notes it requires significant resources. It then discusses the emerging FEO automation industry and challenges around automating the process while avoiding breaking pages or optimization issues.

1. Front End Optimization
CloudConnect 2012
Hooman Beheshti
VP Technology, Strangeloop
hooman@strangeloopnetworks.com
1

2. Web Application Acceleration
• Means lots of things to lots of people
– TCP Optimization
– Caching
– HTTP Protocol Optimization
– Compression
– Etc
• We’ll focus on “Front End Optimization” (FEO)
– Sometimes called WCO or WPO
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2

3. What is FEO?
0 6 12
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 3

4. What is FEO?
DNS TTFB
TCP Download
Connection
0 6 12
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4

5. What is FEO?
Back End: The time from when the
request is made by the browser to
last byte of the HTML response
Front End: Everything after the
HTML arrives
Important Timers:
Start Render
onLoad (Document Complete)
0 6 12
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5

6. Waterfall tools: webpagetest.org
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6

7. Waterfall tools: HTTPWatch
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7

8. Waterfall tools: Firebug
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8

9. Waterfall tools: WebKit Dev Tools
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9

10. Waterfall tools: PCAP2HAR
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10

11. Performance problems
• Too many round trips
– Latency adds up
• Too many bytes
– Last mile bandwidth isn’t
infinite
• Poor caching
– Coming back to the page
must be much faster
• Poor rendering
– Browser work takes time
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11

12. Fix it!!
• Reduce round trips
– Use consolidation techniques
• Image Sprites
• JS/CSS consolidation/concatenation
• Inlining
• MHTML (IE only)
• Etc
– Browser makes one request to the “package”
– HTML is marked up to look for the individual
resources inside the package
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12

13. Fix it!!
• Reduce bytes
– HTTP compression
– JS/CSS minification
– Image compression
• Lossless
• Lossy
– Anything that can reduce bytes will help make the
page faster
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13

14. Fix it!!
• Do good (browser) caching!
– Long expiry on static objects
– Reasons why we don’t do good caching
• Caching rules are sometimes complicated
• Invalidation is still a huge issue – we never want to serve
stale content
– A proper caching solution must have a robust
invalidation framework
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14

15. Fix it!!
• Address rendering issues
– Things get more complicated here
– The order of events matters to how fast a page
renders on the browser
– JavaScript and CSS
• JS deferral
• Asynchronous JS
• Order of elements in the page
– Above the fold vs below the fold
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 15

16. Sounds really easy!
• It’s not!
• Some techniques are just difficult to implement
• Optimizing for performance sometimes requires
significant dev resources
– Mortal companies can’t afford to sacrifice new feature
cycles
• Maintenance and upkeep is a constant problem
– Every version to roll out will need optimization
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 16

17. FEO automation industry
• Solutions available to automatically do this stuff
• Multiple deployment options
– Software/Hardware/Service
– Cloud apps will use either service or software
• The goal is to “fix the code” for performance,
automatically
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 17

18. It gets complicated
• Rewriting HTML can break pages
• You have to do this stuff based on browser
– Play to the strength of each browser (supported
techniques, etc)
– Stay away from their weaknesses (bugs, undocumented
issues, etc)
– Let’s not forget about mobile
• Optimizing once per page isn’t enough
– First view (cold cache)
– Repeat view (warm cache)
– User flow
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 18

19. When looking for FEO automation…
• Do your research, and understand your needs.
• Understand the deployment model and how
disruptive it will be to you, if at all.
• Are there provisions in place for breaking pages?
• Browser-based optimization, mobile, first/repeat
views, transaction flows.
• Choose what’s right for you, based on your needs.
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 19

20. Thank you.
hooman@strangeloopnetworks.com
strangeloopnetworks.com
webperformancetoday.com
20