Keep the Web Fast
•
1 recomendación•777 vistas
With the growth of mobile devices, performance is now more important than ever. But the web is actually getting slower! Fight back by learning how to monitor performance, the critical rendering path and finding where to optimize.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a Keep the Web Fast
Similar a Keep the Web Fast (20)
Último
Último (20)
Keep the Web Fast
- 1. Chris Fetherston Keep the web fast
- 2. 1. Why 2. Optimization Guidelines 3. The Critical Rendering Path 4. The Interaction Lifecycle 5. Examples
- 3. Chris Fetherston Why does performance matter?
- 4. Chris Fetherston Fast performance = good user experience = more interactions = more conversions Gestural interfaces require near instantaneous response to user input Faster pages mean lower abandonment rates
- 5. Chris Fetherston Mobile traffic exceeds desktop Mobile devices have lower processing power than desktop (but that’s changing) Mobile devices generally have slower connections and limited bandwidth Devices have gotten “lighter”
- 6. Chris Fetherston Browsers support richer experiences than ever Publishers are pushing towards sites that force page views (think listicles) Analytics, ad tech and tracking scripts are bloating our sites But the web has gotten “heavier”
- 7. Chris Fetherston Example: cnn.com mobile
- 8. Chris Fetherston cnn.com mobile 228 Network requests 2.5 MB transfered 75 JS files, 6 CSS files, 101 images 32 Analytics, ads or tracking
- 10. Chris Fetherston Measure your website or app continuously Understand how a performance problem relates to your website or app Fix problematic areas and measure again Beware of added complexity 1. You can’t optimize what you can’t measure
- 12. Chris Fetherston 2. Tools not rules
- 13. Rules become unfounded dogma. Tools provide quantitative data in your app, in your browser, on a real device.
- 14. Chris Fetherston A micro-benchmark is when only a small portion of code is measured The code you write is not the code that runs in the browser JavaScript engines do their own optimizations after parsing to avoid common bottlenecks 3. Avoid micro-benchmarks
- 15. Boring! Let’s get started.
- 16. The Critical Rendering Path
- 17. Chris Fetherston “The series of events that must take place to display the initial view of a webpage.” -varv.com What is the CRP?
- 18. Chris Fetherston What is the CRP? DOWNLOAD HTML DOWNLOAD & PARSE DEPS RENDER
- 19. Chris Fetherston Prioritize your high-value pages Use client analytics to sample latency across your user base (Network Performance API) Identify problematic areas with the network tab in developer tools Measure the CRP
- 20. Chris Fetherston Measure the CRP
- 21. Chris Fetherston Understand the CRP Using the timeline
- 22. Chris Fetherston Understand the CRP Request timing Hello server? I need this. Hi, let me get that for you. Here, it is. Download it.
- 23. Chris Fetherston Understand the CRP Verify file size & compression Size sent over the wire incl. headers, cookies,etc Actual file size
- 24. Chris Fetherston Understand the CRP Page load timing The HTML document has finished loading All dependencies have finished loading
- 25. Chris Fetherston Verify server setup (minified, gzipped, combined assets where needed, cached) CSS in the <head>, JS at the bottom of <body> Prioritize above the fold content Defer the rest Fix the CRP
- 26. Chris Fetherston 3,818 CSS rules served, 496 rules used (87% unused) 101 images served, 1 visible All images and most JS scripts could be loaded on scroll or 1-2s after page load Fix the CRP Prioritize above the fold content
- 28. Chris Fetherston A framework for breaking down the stages of interaction as a user moves throughout an interface. What is the Interaction Cycle?
- 29. Chris Fetherston 1. Load New content is loaded and presented to the user 2. Idle User views content and decides next action 3. Respond Interface responds to user interaction 4. Animate Interface transitions to requested content What is the Interaction Cycle?
- 30. Chris Fetherston Developer tools Timeline & Profiles Client-side logging Frames per second monitor Measure the Interaction Cycle
- 31. Chris Fetherston Understand the Interaction Cycle Chrome Timeline
- 32. Chris Fetherston Understand the Interaction Cycle Chrome Timeline Frames per second over time We’ve blown over our FPS budget (Jank!)
- 33. Chris Fetherston Understand the Interaction Cycle Chrome Timeline Functions invoked & time spent
- 34. Chris Fetherston Understand the Interaction Cycle Chrome Timeline Slow function Child processes
- 35. Chris Fetherston Fix the Interaction Cycle
- 36. Chris Fetherston Browser loads new content via AJAX or page load Optimize content delivery (CRP if initial page load) After content is loaded, use timeline to pin-point expensive JS operations Fix the Interaction Cycle 1. Load
- 37. Chris Fetherston Time before user interacts with loaded assets Est. 1.5-2s on average Load deferred scripts, below the fold content, and non-essential images Fix the Interaction Cycle 2. Idle
- 38. Chris Fetherston User interacts with page and the interface responds 100ms-200ms window to front load tasks before user perceives as latency Prepare animations Remove as much pressure off the CPU as possible for the next step Fix the Interaction Cycle 3. Respond
- 39. Chris Fetherston New content renders to interface Low budget, front load as much as possible 60fps = 16ms execution time per frame (even less including browser overhead) requestAnimationFrame is your friend Fix the Interaction Cycle 4. Animate
- 40. Examples
- 41. Chris Fetherston Ghostlist Library to remove content from the DOM when it scrolls off screen Was this optimization worth the added complexity? We verified perf gains by monitoring frames per second with timeline …but we had some bugs with adblock, and content randomly disappearing
- 42. So let’s test it!
- 43. Chris Fetherston Overall Queries -6%
- 44. Chris Fetherston Post Impressions -17%
- 46. Chris Fetherston Peepr We call this thing that shows a blog inside your dashboard Peepr Launched MVP with 6 second perceived load time Identified some key network issues using network tab Version 2 rewrite 900ms perceived load time
- 47. Chris Fetherston Peepr We reduced the error rate by 7.5% 8% increase in opens at launch 3.8% increase in follows 6.2% increase in reblogs 13.5% increase in likes Opens grew nearly +12% over a month
- 48. Let’s make a faster web, together.
- 49. Chris Fetherston If you’re an engineer Be tenacious, set performance budgets and keep them Build or buy the client-side tools needed Make performance monitoring part of your workflow
- 50. Chris Fetherston If you’re a PM or Business Owner Build time into your product development cycle to address performance issues Know your app’s “Happy Path” and dedicate resources towards optimizing it Do we really need another tracking script?
- 51. Thank you.
- 52. Stay fast, my friends. @fetherston93 blog.cfetherston.com