Making the web faster

7,149 views
6,754 views

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
7,149
On SlideShare
0
From Embeds
0
Number of Embeds
92
Actions
Shares
0
Downloads
92
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Making the web faster

  1. Making the Web FasterNational Capital Area Google Technology Users GroupPatrick MeenanTwitter: @PatMeenanpmeenan@webpagetest.org 1
  2. Waterfalls
  3. Waterfall Components DNS HTTP Request Lookup Socket Content Connect Download 3
  4. Front-End vs Back-EndBase Page Back-End Processing 4
  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. Measuring Performance 6
  7. Synthetic Measurementwww.webpagetest.org 7
  8. Real User Measurement_gaq.push([_trackPageLoadTime]); 8
  9. Navigation Timingwindow.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 Onlinehttp://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_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. 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 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. 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. 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. WPT Monitor Tony Perkins (Sabre) http://www.webpagetest.org/forums/forumdisplay.php?fid=21

×