Making the web faster

Making the Web FasterNational Capital Area Google Technology Users GroupPatrick MeenanTwitter: @PatMeenanpmeenan@webpagetest.org 1

Waterfalls

Waterfall Components DNS HTTP Request Lookup Socket Content Connect Download 3

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

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 12

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 Linux 2.6.39: 15K 30K … 16

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 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 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 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 if…

Comparing arbitrary tests

The comparison

Comparison Videos Filmstrip Video 34

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

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

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

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

http://koonys.de.dd24224.kasserver.com	27
http://alin-labau.eu	9
http://hipimplantrecovery.com	3
http://www.koonys.de	2
http://www.slideshare.net	1
https://twitter.com	1
http://www.rpolillo.it	1
http://twitter.com	1
http://wiki.mongodb.org	1
http://flow3.typo3.org	1
http://hostingya.blogspot.com	1
http://fisicodearturito.blogspot.com	1
http://www.mongodb.org	1
http://us-w1.rockmelt.com	1
http://www.koonys.de.dd24224.kasserver.com	1

Making the web faster

by patrickmeenan on Jun 29, 2011

Accessibility

Categories

Upload Details

Usage Rights

15 Embeds 52

Statistics

Making the web faster Presentation Transcript