making the web faster

1

Making the Web FasterNational Capital Area Google Technology Users Group

Patrick MeenanTwitter: @PatMeenanpmeenan@webpagetest.org

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

Synthetic Measurement

www.webpagetest.org

7

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

Page Speed Online

http://pagespeed.googlelabs.com/

13

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

23

http://youtu.be/_Jn93FDx9oI?hd=1

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

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