Upload
patrick-meenan
View
5.113
Download
0
Embed Size (px)
DESCRIPTION
Presentation from the June 28, 2011 National Capital Area Google Technology Users Group on some of Google's efforts to make the web faster.
Citation preview
1
Making the Web FasterNational Capital Area Google Technology Users Group
Patrick MeenanTwitter: @[email protected]
Waterfalls
Waterfall Components
33
DNS
LookupHTTP Request
Socket
Connect
Content
Download
Front-End vs Back-End
4
Base Page
Back-End Processing
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
Measuring Performance
6
Real User Measurement
_gaq.push(['_trackPageLoadTime']);
8
Navigation Timing
window.performance.timing
9
Chrome Developer Tools
10
Optimization Checking
11
Page Speed
• http://code.google.com/speed/page-speed/
• Chrome and Firefox Extensions
12
WebPagetest
14
Making it Faster – Network Layer
15
TCP Initial Congestion Window
16
4K 8K 16K 32K
This:
Is Really This (Current OS’s):
Linux 2.6.39:
15K 30K …
SPDY
• Multiplexed streams
• Request prioritization
• HTTP header compression
• Server push
• Server hint
• 10-50% improvement in load times
17
TLS Improvements
• False Start
• Snap Start
18
SSL Negotiation
Making it Faster – Front-End
19
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
mod_pagespeed improvement
21
androidacademy.com timeline (median of 50 runs)
22
Instant Pages
<link rel=prerender href=“…”>
24
WebPagetest
25
From multiple locations globally…
27
The basics – get “results”
Performance and optimization information
What it looks like
What it looks like
What if…
Comparing arbitrary tests
The comparison
Comparison Videos
34
Filmstrip
Video
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
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
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
WPT Monitor
Tony Perkins (Sabre)
http://www.webpagetest.org/forums/forumdisplay.php?fid=21