Date post: | 27-Jan-2015 |
Category: |
Technology |
Upload: | strangeloop |
View: | 107 times |
Download: | 0 times |
Front End Optimization
CloudConnect 2012
1
Hooman BeheshtiVP Technology, Strangeloop
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 3
What is FEO?
0 6 12
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4
What is FEO?
0 6 12
DNS TTFB
TCP Connectio
n
Download
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5
What is FEO?
0 6 12
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)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6
Waterfall tools: webpagetest.org
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7
Waterfall tools: HTTPWatch
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8
Waterfall tools: Firebug
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9
Waterfall tools: WebKit Dev Tools
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10
Waterfall tools: PCAP2HAR
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 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. 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. 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. 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. 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. 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. 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. 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.