HTML5 Performance
Tokyo, Japan
June 2013
Philippe Le Hégaret
plh@w3.org
Impact of Slow Website
Time is Money!
80-90% of the end-user response time is spent on the frontend. Start here.
the Performance Golden Rule
Bing experiment
|
Distinct User Queries |
Query refinement |
Revenue per User |
Any clicks |
Satisfaction
|
Time to Click Increase
|
50ms |
- |
- |
- |
- |
- |
- |
200ms |
- |
- |
- |
-0.3% |
-0.4% |
500ms |
500ms |
- |
-0.6% |
-1.2% |
-1.0% |
-0.9% |
1200ms |
1000ms |
-0.7% |
-0.9% |
-1.9% |
-2.8% |
-1.6% |
1900ms |
2000ms |
-1.8% |
-2.1% |
-4.3% |
-4.4% |
-3.8% |
3100ms |
Performance Related Changes and their User Impact
HTML5 Performance Task Force
As we mature to take a platform level view of our work,
we should address performance issues to grow the
acceptance of our standards.
Do we have a problem?
"HTML5′s got 99 problems but performance ain’t one of them."
Paul Bakaus, Zynga
primary reason… the app is running out of memory. It’s not performance issues […] but it’s still a big problem. second reason … is animations …
Kiran Prasad, LinkedIn
So, a problem?
"… HTML5 technologies can deliver as-good-as-native experiences … But the lesson from Fastbook is that it’s hard work"
Matt Vickers, Xero
Challenges
Two main categories:
- Load time
- From the user request to "above the fold"
- User agent speed
- Interaction and dynamic changes
Bottlenecks
- Network layer
- Crowded main thread
- Memory:
- Drawing: CSS
- Low-end phones (Android)
- tooling support
What can we do?
- Keep enhancing the Web browsers
- Develop more tools
- Educate developers
- Encourage performance
Improving Web browsers
- Browser vendors are already doing it
- Some subset of use cases is really important:
- Asynchronous scrolling (
scroll
)
- Multitab interfaces
- Animations
- Caching
- …
- We would need to:
- Gather the use cases
- Prioritize them
- Write test applications to highlight the use cases
- benchmarking of those test applications?
Develop more tools
- At development time: WPT, Speedtracer
- Monitoring: See Web Performance Working Group
- Resource priorities
- Diagnostics
- Display performance
- Asynchronous scrolling monitoring
- Pre-rendering
Educate developers: Guidelines!
Need to refine and increase the visilibity of performance guidelines
- Start from performance tips developed by Google, MS, and Yahoo!
- Publish on WebPlatform.org
- Publish as a Note?
Encourage performance
The Spotlight Project
- Shine a light on the end-user performance of Web sites
- Results will need to public, transparent, and easily understood
- Methodology axes: geographical distribution, network context, client diversity, user scenarios
- Need associated infrastructure and operational aspects
So, what can we do?
- Keep enhancing the Web browsers: Use Cases
Approach and methodology for gathering use cases and producing test applications?
- Develop more tools: Anything beyond web perf wg?
Let the market come up with bettern SDKs?
- Educate developers: Guidelines
Approach and methodology for gathering and spreading guidelines?
- Encourage performance
Spotlight Project?
- Anything else?
Feedback: public-html5-performance@w3.org