Make Browsers Cry: How to Make a Modern Web App Painfully Slow [FutureStack16]

Make Browsers CRYHow to make a web app painfully slow

Speaker Name, Title@name name

This document and the information herein (including any information that may be incorporated by reference) is provided for informational purposes only and should not be construed as an offer, commitment, promise or obligation on behalf of New Relic, Inc. (“New Relic”) to sell securities or deliver any product, material, code, functionality, or other feature. Any information provided hereby is proprietary to New Relic and may not be replicated or disclosed without New Relic’s express written permission.

Such information may contain forward-looking statements within the meaning of federal securities laws. Any statement that is not a historical fact or refers to expectations, projections, future plans, objectives, estimates, goals, or other characterizations of future events is a forward-looking statement. These forward-looking statements can often be identified as such because the context of the statement will include words such as “believes,” “anticipates,”, “expects” or words of similar import.

Actual results may differ materially from those expressed in these forward-looking statements, which speak only as of the date hereof, and are subject to change at any time without notice. Existing and prospective investors, customers and other third parties transacting business with New Relic are cautioned not to place undue reliance on this forward-looking information. The achievement or success of the matters covered by such forward-looking statements are based on New Relic’s current assumptions, expectations, and beliefs and are subject to substantial risks, uncertainties, assumptions, and changes in circumstances that may cause the actual results, performance, or achievements to differ materially from those expressed or implied in any forward-looking statement. Further information on factors that could affect such forward-looking statements is included in the filings New Relic makes with the SEC from time to time. Copies of these documents may be obtained by visiting New Relic’s Investor Relations website at ir.newrelic.com or the SEC’s website at www.sec.gov.

New Relic assumes no obligation and does not intend to update these forward-looking statements, except as required by law. New Relic makes no warranties, expressed or implied, in this document or otherwise, with respect to the information provided.

About me…

Making slow pages

since the 1990s

Once designed

a page with >9 AJAX requests

that blocked rendering

Have incorrectly

implemented browser caching

Overused Webfonts

Used the blink tag

GOOD NEWSHave done none of these things at New Relic

TL;DR THERE IS NO MAGIC WEB PERF SAUCE.

(but sometimes it's good to know what not to do)

The CLIENT / SERVERmodel

HTTP(S)

The CLIENT / SERVERmodel

HTTP(S)

CACHE

CDN

Pages make requests to an average of

DOMAINS20As of October 2016Source: httparchive.org/trends.php

The average number of requests is now

PER PAGE107As of October 2016Source: httparchive.org/trends.php

Average total transfer size is INCREASING

Source: httparchive.org

1,904.58KB

2,218.65KB

2,540.33KB

Sept 2014

Sept 2015

Sept 2016

requests312

secs render

and it takes

15.4

in the ALEXA TOP 10one site makes…

A MODELFOR FRONTEND DEVS

Infrastructure

My precious code

backend system(s)

"the network"

THE FOCUSFOR FRONTEND DEVS

My precious code

Infrastructure

"the network"

backend system(s)

IGNORE THISAT YOUR OWN PERIL

My precious code

Infrastructure

"the network"

backend system(s)

HOW CAN WE MAKE A PAGE AS SLOW AS POSSIBLE?

1. __________

3. __________

4. __________

2. __________

BROWSER

APP

INFRASTRUCTURE

BROWSER

APP

INFRASTRUCTURE

1. Confuse this

3. Don’t optimize

4. Make bad choices here

2. Ignore this

Introducing:The METER OF BROKEN CUSTOMER EXPERIENCE*

Bad C/X

Good C/X

FROM SCIENCE!

https://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/

I'm going for tacos.

That was fast!

Where should I eat lunch?

10000ms

100ms

1000ms

What technical choices can we make to INCREASE BAD C/X?

Web Performance Lab

What we're testing with.

▪Simple web page: some images, JS, HTML, and CSS

▪Running on AWS EC2 (us-west-2) m2-large instance

▪Powered (and monitored) using Go

1400 ms

LET'S MAKE INFRADECISIONS

Confidential ©2008-16 New Relic, Inc. All rights reserved.   23

Infrastructure: What's the cheapest?

▪ The cheapest EC2 instance money can buy

– t2.nano

– 512 mb memory

– 1 vCPU

t2.nano

INFRASTRUCTURE

Confidential ©2008-16 New Relic, Inc. All rights reserved.   24

1445 ms

What a deal!

"The t2.nano offers the full performance of a high frequency Intel CPU core if your workload

utilizes less than 5% of the core on average over 24 hours."

Source: https://aws.amazon.com/blogs/aws/ec2-update-t2-nano-instances-now-available/

INFRASTRUCTURE

I WENT TO LUNCH.

INFRASTRUCTURE

Confidential ©2008-16 New Relic, Inc. All rights reserved.   26

But came back to this... INFRASTRUCTURE

Confidential ©2008-16 New Relic, Inc. All rights reserved.   27

Page load time went way, way up INFRASTRUCTURE

Confidential ©2008-16 New Relic, Inc. All rights reserved.   28

LESSON: T2 INSTANCE CPU PERFORMANCE IS VARIABLE.

INFRASTRUCTURE

LET'S WRITE SOME SLOW GO CODE

Confidential ©2008-16 New Relic, Inc. All rights reserved.   30

EACH PIXEL IS RANDOMLY GENERATEDimg := image.NewRGBA(image.Rect(0, 0, width, height))

for x := 0; x < width; x++ {for y := 0; y < height; y++ { c := color.RGBA{uint8(rand.Intn(255)), uint8(rand.Intn(255)), uint8(rand.Intn(255)), 255}

img.Set(x, y, c) }}

Confidential ©2008-16 New Relic, Inc. All rights reserved.   31

Doing this is slow (understandably) APP

Confidential ©2008-16 New Relic, Inc. All rights reserved.   32

But not slow enough... APP

Go sleep

if os.Getenv("SLOW_IMAGE") != "" {time.Sleep(1000 * time.Millisecond)

}

APP

And Go runtime tweaking...

$ GOGC=10 <app>

APP

Confidential ©2008-16 New Relic, Inc. All rights reserved.   35

5300ms

And then the browser tears up APP

LET'S UNOPTIMIZE THE NETWORK

Some recent data regarding NETWORK LATENCY

https://aws.amazon.com/blogs/aws/now-open-aws-us-east-ohio-region/

us-west-1

us-west-2

us-east-2

68ms

52ms

A very fast TCP primer

▪Opening a new TCP connection is slow, especially over long distances

▪ Different hosts: different connections

▪ Browsers are good at reusing existing connections

▪ SSL adds additional RTs

Server Browser

roundtrip1

2

3

SYN

SYN/ACK

ACK

Data

NETWORK

Confidential ©2008-16 New Relic, Inc. All rights reserved.   39

Forcing as many open TCP connections

▪Connection: close HTTP header

▪ For every connection, force the browser to re-establish the connection

▪Host OS also needs to open a new socket. Expect slightly more packets

NETWORK

Confidential ©2008-16 New Relic, Inc. All rights reserved.   40

Increase the bandwidth!

▪Disable all gzip compression

▪Don't minify

▪Set HTTP headers to prevent any caching at any intermediate CDNs, proxies, or the browser

HTTP(S)

CACHE

NETWORK

Confidential ©2008-16 New Relic, Inc. All rights reserved.   41

TCP Connection Close: Infrastructure View

The number of received packets suddenly spikes...

NETWORK

Confidential ©2008-16 New Relic, Inc. All rights reserved.   42

TCP Connection Close: App View

Not much to see here

NETWORK

Confidential ©2008-16 New Relic, Inc. All rights reserved.   43

% of 0ms connection openings

Connection time measured in Insights from New Relic Synthetics

NETWORK

Confidential ©2008-16 New Relic, Inc. All rights reserved.   44

Results: Opening all the connections

2040ms

NETWORK

Let's increase network latency the easy way

Make the distance between these really far.

NETWORK

Let's increase network latency the easy way

8,561 miles

San FranciscoAWS in Mumbai

NETWORK

Page load gets (slightly) faster in Japan

ap-south-1

NETWORK

And in Singapore, too NETWORK

Confidential ©2008-16 New Relic, Inc. All rights reserved.   49

Where the bits come from is really important

2460ms

NETWORK

LET'S CONFUSE THE BROWSER

Confidential ©2008-16 New Relic, Inc. All rights reserved.   51

Delay getting CSS to the client

▪CSS blocks rendering, delay it for more pain.

▪Put it in the <body>

▪Add @imports for good measure.

▪Make CSS extra-complex, uncachable, and far away from the user.

BROWSER

Confidential ©2008-16 New Relic, Inc. All rights reserved.   52

Block with JavaScript as much as possible

▪Put a lot of libraries in the <head> tag

▪Make that JavaScript do a lot of unnecessary work

▪Avoid the async script attribute

BROWSER

5DIFFERENT FONTS... FROM CHINA

LETS USE

Why not? BROWSER

Why not?

ALLTHE JAVASCRIPT FRAMEWORKS!

LETS USE

BROWSER

Confidential ©2008-16 New Relic, Inc. All rights reserved.   55

BROWSER

BROWSER

+3400 ms

+500 ms

+19000 ms

+1000 ms

BROWSER

APP

INFRASTRUCTURE

All these decisions can happen in real life for

good reasons.

Confidential ©2008-16 New Relic, Inc. All rights reserved.   59

∞ ms 800 ms

AggressivelyUnoptimized

AggressivelyOptimized

Fixing it: solutions

Use a Content Delivery Network

Multiple availability

zones, DNS-based routing

Caching correctly

implemented

JS, HTML, and CSS

optimized for not-blocking

Creating a fast app is more than using ______________.

BROWSER

APP

INFRASTRUCTURE

Creating a fast app is more than using ______________.

BROWSER

APP

INFRASTRUCTURE

fast ec2 hosts

Creating a fast app is more than using ______________.

BROWSER

APP

INFRASTRUCTURE

Go

Creating a fast app is more than using ______________.

BROWSER

APP

INFRASTRUCTURE

HTTP/2

Creating a fast app is more than using ______________.

BROWSER

APP

INFRASTRUCTURE

React

BROWSER

NETWORK

APP

INFRASTRUCTURE

Clay SmithDeveloper Advocate

Thank you.