Web performance the craft of internet age

120 views
82 views

Published on

The first part of 3-session introduction of web performance: performance in browsers

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

  • Be the first to like this

No Downloads
Views
Total views
120
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web performance the craft of internet age

  1. 1. Web performance: Crafts of internet age hi@homerquan.com
  2. 2. What’s performance Good performance = low tax of users’ satisfaction - Homer Quan
  3. 3. An example • Loading home page in 600ms (NYTime 3.5s) • Click links even faster • Rich experience and fun to use, even when you wait
  4. 4. I want it! so how? Server Client Network
  5. 5. Why it’s slow • Slow loading • Slow execution • Loading blocks execution or vice versa
  6. 6. It’s a craft with base rules Less is more Don’t wait, show what's ready Do important tasks first Don’t do repeat tasks Do things in advance Do more things at one time
  7. 7. Building Blocks of Browser Renderer html parser img Resourc e Manager css html js movie … DOM Manipulator JS Runtime Event Catcher
  8. 8. Give user what they care first • Resource loading optimization *Demo of rendering process - reflow • Progressive rendering • e.g., www.facebook.com
  9. 9. No interference • DOM is a big hurdle Do not use it: MVC or Shadow DOM • Loading order of JS AMD, requirejs
  10. 10. Make each task faster • Parallel tasks • Small image, small js, small css …. • Do it in client side • Avoid repeat work
  11. 11. Measure is important • What to measure First loading time (cache cold) Second loading time (cached) First interactive time Users’ feeling • How to measure Google page speed, YSlow, Webperf, www.webpagetest.org (loading time only) W3c standard: Navigation Timing JS, A/B testing UX evaluation
  12. 12. The other side of story • Cost • Security • Compatibility • Operational scalability • … and so on

×