Presentation from the June 28, 2011 National Capital Area Google Technology Users Group on some of Google's efforts to make the web faster.

1. Making the Web Faster
National Capital Area Google Technology Users Group
Patrick Meenan
Twitter: @PatMeenan
pmeenan@webpagetest.org
1

2. Waterfalls

3. Waterfall Components
DNS
HTTP Request
Lookup
Socket Content
Connect Download
3

4. Front-End vs Back-End
Base Page
Back-End Processing
4

5. High Performance Websites
1. Make fewer HTTP requests
2. Use CDN
3. Add expires header
4. Gzip Components
5. Put stylesheets at the top
6. Put scripts at the bottom
7. Avoid CSS expressions
8. Make JS and CSS external
9. Reduce DNS lookups
10. Minify JS
11. Avoid redirects
12. Remove duplicate scripts
13. Configure Etags
14. Make Ajax cacheable
15. Sharding domains
5

6. Measuring Performance
6

7. Synthetic Measurement
www.webpagetest.org
7

8. Real User Measurement
_gaq.push(['_trackPageLoadTime']);
8

9. Navigation Timing
window.performance.timing
9

10. Chrome Developer Tools
10

11. Optimization Checking
11

12. Page Speed
• http://code.google.com/speed/page-speed/
• Chrome and Firefox Extensions
12

13. Page Speed Online
http://pagespeed.googlelabs.com/
13

14. WebPagetest
14

15. Making it Faster – Network Layer
15

16. TCP Initial Congestion Window
This:
Is Really This (Current OS’s):
4K 8K 16K 32K
Linux 2.6.39:
15K 30K …
16

17. SPDY
• Multiplexed streams
• Request prioritization
• HTTP header compression
• Server push
• Server hint
• 10-50% improvement in load times
17

18. TLS Improvements
• False Start
• Snap Start
SSL Negotiation
18

19. Making it Faster – Front-End
19

20. mod_pagespeed
http://code.google.com/speed/page-speed/docs/module.html
• Apache module
• GoDaddy
• Dreamhost
• Automatic Image Compression & Resizing
• Minify CSS, JavaScript and HTML
• Inline small images, CSS, and JavaScript
• Cache Extension
• CSS/Javascript Combining
• Domain Mapping
• Domain Sharding
20

21. mod_pagespeed improvement
21

22. androidacademy.com timeline (median of 50 runs)
22

23. Instant Pages
http://youtu.be/_Jn93FDx9oI?hd=1
23

24. Instant Pages
<link rel=prerender href=“…”>
24

25. WebPagetest
25

26. The basics – testing “pages”
• www.webpagetest.org
• Submit an URL….

27. From multiple locations globally…
27

28. The basics – get “results”
Performance and optimization information

29. What it looks like

30. What it looks like

31. What if…

32. Comparing arbitrary tests

33. The comparison

34. Comparison Videos
Filmstrip
Video
34

35. More advanced capabilities
Automating Rich Applications
• Authenticating into form-protected applications
• Interacting with Web Apps (Mail, Calendar, etc)
• Testing a navigation flow from one page to another
• Execute arbitrary Javascript
REALLY Advanced Options
• Re-writing DNS lookups (directing traffic to a test/staging box)
• Custom User-Agent strings & HTTP Headers
• Pre-populating cookies
• Custom test end conditions
• Capture Dynatrace Ajax Edition sessions
• Tcpdump capture
35

36. Private Instances
http://sites.google.com/a/webpagetest.org/docs/private-instances
Bulk Testing
EC2 Agent Public AMI’s
• US (East/West)
• Europe
• Asia (Singapore/Tokyo)
Public Projects
• HTTP Archive
• Blaze Mobitest

37. REST API
Submit tests (API key required for public instance)
• Check status
• Fetch Result
1.XML
2.HAR
http://sites.google.com/a/webpagetest.org/docs/advanced-
features/webpagetest-restful-apis

38. WPT Monitor
 Tony Perkins (Sabre)
 http://www.webpagetest.org/forums/forumdisplay.php?fid=21