Embed Size (px)
Citation preview
Chris FetherstonKeep the web fast
1. Why
2. Optimization Guidelines
3. The Critical Rendering Path
4. The Interaction Lifecycle
5. Examples
Chris Fetherston
Why does performance matter?
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
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”
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”
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
First some guidelines.
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
Measure. Understand. Fix.
Chris Fetherston
2. Tools not rules
Rules become unfounded dogma. Tools provide quantitative data in your app,
in your browser, on a real device.
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
Boring! Let’s get started.
The Critical Rendering Path
Chris Fetherston
“The series of events that must take place to display the initial view of a webpage.”
-varv.com
What is the CRP?
Chris Fetherston
What is the CRP?
DOWNLOAD HTML
DOWNLOAD & PARSE DEPS
RENDER
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
Chris Fetherston
Measure the CRP
Chris Fetherston
Understand the CRP Using the timeline
Chris Fetherston
Understand the CRP Request timing
Hello server? I need this.
Hi, let me get that for you.
Here, it is. Download it.
Chris Fetherston
Understand the CRP Verify file size & compression
Size sent over the wire incl.
headers, cookies,etc
Actual file size
Chris Fetherston
Understand the CRP Page load timing
The HTML document has
finished loadingAll dependencies
have finished loading
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
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
The Interaction Cycle
Chris Fetherston
A framework for breaking down the stages of interaction as a user moves throughout an interface.
What is the Interaction Cycle?
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?
Chris Fetherston
Developer tools Timeline & Profiles
Client-side logging
Frames per second monitor
Measure the Interaction Cycle
Chris Fetherston
Understand the Interaction Cycle Chrome Timeline
Chris Fetherston
Understand the Interaction Cycle Chrome Timeline
Frames per second over time
We’ve blown over our FPS budget (Jank!)
Chris Fetherston
Understand the Interaction Cycle Chrome Timeline
Functions invoked & time spent
Chris Fetherston
Understand the Interaction Cycle Chrome Timeline
Slow function
Child processes
Chris Fetherston
Fix the Interaction Cycle
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
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
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
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
Examples
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
So let’s test it!
Chris Fetherston
Overall Queries -6%
Chris Fetherston
Post Impressions -17%
Chris Fetherston
Engagement -12%
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
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
Let’s make a faster web, together.
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
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?
Thank you.
