Making the Web FasterNational Capital Area Google Technology Users GroupPatrick MeenanTwitter: @PatMeenanpmeenan@webpagete...
Waterfalls
Waterfall Components               DNS                                 HTTP Request              Lookup                   ...
Front-End vs Back-EndBase Page                         Back-End Processing                                               4
High Performance Websites1. Make fewer HTTP requests2. Use CDN3. Add expires header4. Gzip Components5. Put stylesheets at...
Measuring Performance                        6
Synthetic Measurementwww.webpagetest.org                        7
Real User Measurement_gaq.push([_trackPageLoadTime]);                                     8
Navigation Timingwindow.performance.timing                            9
Chrome Developer Tools                         10
Optimization Checking                        11
Page Speed• http://code.google.com/speed/page-speed/• Chrome and Firefox Extensions                                       ...
Page Speed Onlinehttp://pagespeed.googlelabs.com/                                   13
WebPagetest              14
Making it Faster – Network Layer                                   15
TCP Initial Congestion Window This: Is Really This (Current OS’s):                              4K        8K     16K   32K...
SPDY• Multiplexed streams• Request prioritization• HTTP header compression• Server push• Server hint• 10-50% improvement i...
TLS Improvements• False Start• Snap Start                   SSL Negotiation                                     18
Making it Faster – Front-End                               19
mod_pagespeedhttp://code.google.com/speed/page-speed/docs/module.html• Apache module• GoDaddy• Dreamhost• Automatic Image ...
mod_pagespeed improvement                            21
androidacademy.com timeline (median of 50 runs)                                                  22
Instant Pages      http://youtu.be/_Jn93FDx9oI?hd=1                                         23
Instant Pages     <link rel=prerender href=“…”>                                     24
WebPagetest              25
The basics – testing “pages”• www.webpagetest.org• Submit an URL….
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                    Filmstrip                     Video                                34
More advanced capabilitiesAutomating Rich Applications• Authenticating into form-protected applications• Interacting with ...
Private Instanceshttp://sites.google.com/a/webpagetest.org/docs/private-instancesBulk TestingEC2 Agent Public AMI’s• US (E...
REST APISubmit tests (API key required for public instance)• Check status• Fetch Result1.XML2.HARhttp://sites.google.com/a...
WPT Monitor Tony Perkins (Sabre) http://www.webpagetest.org/forums/forumdisplay.php?fid=21
Upcoming SlideShare
Loading in...5
×

Making the web faster

5,184

Published on

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

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,184
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
90
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Making the web faster

  1. 1. Making the Web FasterNational Capital Area Google Technology Users GroupPatrick MeenanTwitter: @PatMeenanpmeenan@webpagetest.org 1
  2. 2. Waterfalls
  3. 3. Waterfall Components DNS HTTP Request Lookup Socket Content Connect Download 3
  4. 4. Front-End vs Back-EndBase Page Back-End Processing 4
  5. 5. High Performance Websites1. Make fewer HTTP requests2. Use CDN3. Add expires header4. Gzip Components5. Put stylesheets at the top6. Put scripts at the bottom7. Avoid CSS expressions8. Make JS and CSS external9. Reduce DNS lookups10. Minify JS11. Avoid redirects12. Remove duplicate scripts13. Configure Etags14. Make Ajax cacheable15. Sharding domains 5
  6. 6. Measuring Performance 6
  7. 7. Synthetic Measurementwww.webpagetest.org 7
  8. 8. Real User Measurement_gaq.push([_trackPageLoadTime]); 8
  9. 9. Navigation Timingwindow.performance.timing 9
  10. 10. Chrome Developer Tools 10
  11. 11. Optimization Checking 11
  12. 12. Page Speed• http://code.google.com/speed/page-speed/• Chrome and Firefox Extensions 12
  13. 13. Page Speed Onlinehttp://pagespeed.googlelabs.com/ 13
  14. 14. WebPagetest 14
  15. 15. Making it Faster – Network Layer 15
  16. 16. TCP Initial Congestion Window This: Is Really This (Current OS’s): 4K 8K 16K 32K Linux 2.6.39: 15K 30K … 16
  17. 17. SPDY• Multiplexed streams• Request prioritization• HTTP header compression• Server push• Server hint• 10-50% improvement in load times 17
  18. 18. TLS Improvements• False Start• Snap Start SSL Negotiation 18
  19. 19. Making it Faster – Front-End 19
  20. 20. mod_pagespeedhttp://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. 21. mod_pagespeed improvement 21
  22. 22. androidacademy.com timeline (median of 50 runs) 22
  23. 23. Instant Pages http://youtu.be/_Jn93FDx9oI?hd=1 23
  24. 24. Instant Pages <link rel=prerender href=“…”> 24
  25. 25. WebPagetest 25
  26. 26. The basics – testing “pages”• www.webpagetest.org• Submit an URL….
  27. 27. From multiple locations globally… 27
  28. 28. The basics – get “results”Performance and optimization information
  29. 29. What it looks like
  30. 30. What it looks like
  31. 31. What if…
  32. 32. Comparing arbitrary tests
  33. 33. The comparison
  34. 34. Comparison Videos Filmstrip Video 34
  35. 35. More advanced capabilitiesAutomating 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 JavascriptREALLY 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. 36. Private Instanceshttp://sites.google.com/a/webpagetest.org/docs/private-instancesBulk TestingEC2 Agent Public AMI’s• US (East/West)• Europe• Asia (Singapore/Tokyo)Public Projects• HTTP Archive• Blaze Mobitest
  37. 37. REST APISubmit tests (API key required for public instance)• Check status• Fetch Result1.XML2.HARhttp://sites.google.com/a/webpagetest.org/docs/advanced-features/webpagetest-restful-apis
  38. 38. WPT Monitor Tony Perkins (Sabre) http://www.webpagetest.org/forums/forumdisplay.php?fid=21
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×