Your SlideShare is downloading. ×

Front End Optimization [Cloud Connect 2012]

6,044

Published on

From Hooman's presentation at the Cloud Performance Summit at Cloud Connect 2012: …

From Hooman's presentation at the Cloud Performance Summit at Cloud Connect 2012:

Accelerating applications can mean different things to different people. In web applications, performance is impacted by everything from infrastructure to code to back-end processing to browser capabilities. This can get even more complicated in cloud environments. In this discussion, we'll focus on the issues surrounding the "front-end" performance of the application which includes all interactions between the browser and the app after the dynamic content (the base HTML) has been generated and delivered to the browser. We will discuss the major front-end performance pain points and some strategies for mitigating them (including hidden complications and gotchas), ultimately leading to a better perceived user experience.

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,044
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
73
Comments
0
Likes
5
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. 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

×