Web Site Acceleration
with Page Speed Technologies
Bryan McQuade
Joshua Marantz
Google
June 15, 2011
Slide URL: http://pagespeed-velocity2011.appspot.com/
Web Site Acceleration
Page Speed Background
- Help developers optimize their web pages
- Products
- Firefox add-on
- Chrome extension
- Page Speed Online
- Page Speed Online API
- 3rd-party integrations
- WebPagetest
- Gomez Recorder
- W3 Total Cache
Web Performance Quiz and T-Shirts
Agenda
- Modern vs older browser optimization
- Key differences between mobile and desktop
- New Page Speed suggestions
Agenda
- Modern vs older browser optimization
- Key differences between mobile and desktop
- New Page Speed suggestions
Modern vs older browser optimization
- 2008
- IE6, IE7: 70% browser marketshare
- Serialized script fetches, 2 resources per hostname
- 2011
- IE6, IE7: 10% browser marketshare
- IE8, Firefox >=3.6, Chrome: 70% browser marketshare
- Parallel script fetches, 6 resources per hostname
- Some early WPO best practices are less relevant for modern desktop browsers
- Combine external resources
- Parallelize downloads across hostnames
Source for browser marketshare stats: StatCounter (http://goo.gl/tslvO)
Source for browser characteristics: Browserscope (http://goo.gl/fcVNI)
Source for browser characteristics: Browserscope (http://goo.gl/fcVNI)
Combine external resources
- Older browsers serialize JavaScript fetches
<script src="foo.js"></script> <script src="bar.js"></script> <script src="baz.js"></script>
- One round-trip between each request
Yellow: time to send request (1RTT). Blue: time to download resource.
Combine external resources
- Older browsers serialize JavaScript fetches
- Combine resources to eliminate the extra round-trips:
<script src="foo+bar+baz.js"></script>
- Two round-trips eliminated
- Is there a benefit in modern browsers?
Yellow: time to send request (1RTT). Blue: time to download resource.
Combine external resources
- Modern browsers parallelize JavaScript fetches
- 3 resources, each of size N bytes, downloaded in parallel
- 1 resource of size 3N bytes
- Download times should be the same... right?
- What about TCP slow start?
Combine external resources
Combine external resources
Combine external resources
- TCP Slow Start
- Discover the capacity of the connection
- Send 2x data each round trip
- Leads to underutilized network for small HTTP flows on new connections
- What can be done to better utilize the network?
Combine external resources
Tradeoffs of combining external resources
- Improve network utilization with concurrent requests
- Optimal combining strategy should take into account:
- Modern vs older browsers
- Number of resources (no more than 6!)
- Available bandwidth
- Initial congestion window size
- Packet loss rate (lost SYN = 3 second penalty!)
- Page Speed no longer suggests combining resources
Blue: packets sent over the network.
Green: packets sent when the first connection is idle due to slow start.
Green: packets sent when the first connection is idle due to slow start.
Parallelize downloads across hostnames
- 2008: 2 connections per hostname
- 2011: 6 connections per hostname
- Each hostname incurs additional DNS lookup cost
- 6 connections per hostname provides sufficient parallelization
- Page Speed no longer suggests parallelizing across hostnames
Fetching JavaScript with JavaScript
- Modern browsers support parallel JavaScript fetches
- But JavaScript fetched from JavaScript is serialized
- To increase parallelization, avoid loading resources from JavaScript
<script src="loader.js"></script>
<script>loader.load('http://www.example.com/core.js');</script>
Yellow: time to send request (1RTT). Blue: time to download resource.
Fetching JavaScript with JavaScript
- Modern browsers support parallel JavaScript fetches
- But JavaScript fetched from JavaScript is serialized
<script src="loader.js"></script> <script src="http://www.example.com/core.js"></script>
- Loading scripts from HTML eliminates resource serialization
- Don't use loader for core scripts needed for initial paint
- Can continue to use loader for dynamic content added after initial paint
- Page Speed for Chrome has a new rule to identify excess serialization
Yellow: time to send request (1RTT). Blue: time to download resource.
Agenda
- Modern vs older browser optimization
- Key differences between mobile and desktop
- Round-trip times
- CPU performance
- Input characteristics
- New Page Speed suggestions
Impact of performance optimizations on mobile
- DoubleClick removed one client-side redirect
- 1.5 second reduction in ad load time
- 12% increase in click-through rate
- Google Maps enabled HTML5 Application Cache
- 3-second reduction in average page load time
http://doubleclickadvertisers.blogspot.com/2011/06/cranking-up-speed-of-dfa-leads-to.html
Mobile network round-trip times
- Q: What's the average RTT on a mobile network?
- A: Wrong question
- Mobile network RTTs are multi-modal for a given device
- T-Mobile 3G characteristics
- High channel establishment time when device is idle (2-3 seconds)
- Lower active channel RTTs (40-100ms)
- Half-power state after short idle periods (200-600ms RTTs)
- You can test this yourself
- Tether to your mobile device
- Additional details at AT&T Labs: http://goo.gl/kbfI5
sudo traceroute -T -p80 -f2 -m2 -n -q1 8.8.8.8
Mobile device CPU performance
- Sunspider JavaScript Benchmark
- 10x JavaScript runtime cost on mobile devices
- JavaScript that runs for 100ms on desktop will take ~1 second on mobile
| Device | Time (ms) |
|---|---|
| MacBook Pro (2.4GHz, Chrome 10) | 427 |
| Nexus S (Android Gingerbread) | 5869 |
| Samsung Captivate (Android Eclair) | 12606 |
Source: Libo Song
Mobile device input characteristics
- Mobile devices synthesize clicks, with 300-500ms delay
- Prefer touch events for faster application response times
Video credit: Libo Song
Agenda
- Modern vs older browser optimization
- Key differences between mobile and desktop
- New Page Speed suggestions
- Use an Application Cache
- Eliminate unnecessary reflows
- Avoid excessive serialization
- Avoid long-running scripts
Use an Application Cache
Problem:
- Very high initial connection cost on mobile
- 2.5 seconds
Solution:
- HTML5 Application Cache
<!DOCTYPE HTML> <html manifest="/my.manifest"> ... </html>
CACHE MANIFEST /my.js /my.css ...
Eliminate unnecessary reflows
Problem:
- Some JavaScript methods/properties can trigger a reflow
var newHeight = aDiv.offsetHeight + 10; // Read aDiv.style.height = newHeight + 'px'; // Write var newWidth = aDiv.offsetWidth + 10; // Read aDiv.style.width = newWidth + 'px'; // Write
Solution:
- Rewrite JavaScript to eliminate unnecessary reflows
- Reads before writes
var newHeight = aDiv.offsetHeight + 10; // Read var newWidth = aDiv.offsetWidth + 10; // Read aDiv.style.height = newHeight + 'px'; // Write aDiv.style.width = newWidth + 'px'; // Write
Source: http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
Avoid excessive serialization
Problem:
- Subresources can fetch other resources
<script src="loader.js"></script>
<script>loader.load('http://www.example.com/core.js');</script>
Solution:
- Load resources directly from HTML
<script src="loader.js"></script> <script src="core.js"></script>
Avoid long-running scripts
Problem:
- Long-running JavaScript locks up the UI
Solution:
- Break up long-running JavaScript via callbacks
- Leverage web workers
Page Speed for Chrome Beta
- Released today!
- 3 new rules:
- Eliminate unnecessary reflows
- Avoid excessive serialization
- Avoid long-running scripts
- http://goo.gl/GCBM7
- Requires Chrome dev channel
Summary
- Modern vs older browser optimization
- Some older best practices less relevant
- New best practices to take advantage of modern browser capabilities
- Page Speed ruleset constantly evolving to reflect current browsers
- Key differences between mobile and desktop
- Round-trip times
- CPU performance
- Input characteristics
- New Page Speed suggestions
- Use an Application Cache
- Eliminate unnecessary reflows
- Avoid excessive serialization
- Avoid long-running scripts
Thanks!
- Page Speed Velocity sessions
- Page Speed Lightning Demo at 11:00, Thursday, Main Ballroom
- Building Tools with the Page Speed Online API at 3:30, Thursday, Google Booth (#401)
- Page Speed Web Performance Quiz : http://goo.gl/FOoxE
- Learn and use
- http://code.google.com/speed/page-speed/
- http://pagespeed.googlelabs.com/
- Contribute
- http://code.google.com/p/page-speed/
- Discuss
- http://groups.google.com/group/page-speed-discuss