Web Site Acceleration
with Page Speed Technologies

Bryan McQuade
Joshua Marantz
Google
June 15, 2011

Page Speed Background

Web Performance Quiz and T-Shirts

Agenda

Agenda

Modern vs older browser optimization

Source for browser marketshare stats: StatCounter (http://goo.gl/tslvO)
Source for browser characteristics: Browserscope (http://goo.gl/fcVNI)

Combine external resources

  • One round-trip between each request
Yellow: time to send request (1RTT). Blue: time to download resource.

Combine external resources

  • 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

  • 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

  • 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

  • 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.

Parallelize downloads across hostnames

Fetching JavaScript with JavaScript

Yellow: time to send request (1RTT). Blue: time to download resource.

Fetching JavaScript with JavaScript

  • 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

Impact of performance optimizations on mobile

http://doubleclickadvertisers.blogspot.com/2011/06/cranking-up-speed-of-dfa-leads-to.html

Mobile network round-trip times

Mobile device CPU performance

Source: Libo Song

Mobile device input characteristics

Video credit: Libo Song

Agenda

Use an Application Cache

Problem:

  • Very high initial connection cost on mobile
  • 2.5 seconds

Solution:

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:

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>
    
    loader.js core.js

Solution:

Avoid long-running scripts

Problem:

  • Long-running JavaScript locks up the UI

Solution:

Page Speed for Chrome Beta

Summary

Thanks!