The document discusses various ways to intentionally make a web application painfully slow, including choices that can confuse the browser, unoptimize the network, and make bad infrastructure decisions. It demonstrates how each of these areas (browser, network, infrastructure) can be manipulated individually and together to drastically increase page load times. The goal is to show that web performance is impacted by many interconnected factors and there is no "magic sauce" - front-end developers must consider the entire client/server model from browser to backend systems.

1. Make Browsers CRY
How to make a web app painfully slow
Speaker Name, Title
@name name

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

3. 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 NEWS
Have done none of these things at New Relic

4. TL;DR
THERE IS NO MAGIC WEB PERF SAUCE.
(but sometimes it's good to know what not to do)

5. The CLIENT / SERVER
model
HTTP(S)

6. The CLIENT / SERVER
model
HTTP(S)
C
A
C
H
E
C
D
N

7. Pages make requests to
an average of
DOMAINS20As of October 2016
Source: httparchive.org/trends.php

8. The average number
of requests is now
PER PAGE107As of October 2016
Source: httparchive.org/trends.php

9. Average total transfer size is
INCREASING
Source: httparchive.org
1,904.58KB
2,218.65KB
2,540.33KB
Sept 2014
Sept 2015
Sept 2016

10. requests
312 secs render
and it takes
15.4
in the ALEXA TOP 10
one site makes…

11. A MODEL
FOR FRONTEND DEVS
Infrastructure
My precious code
backend system(s)
"the network"

12. THE FOCUS
FOR FRONTEND DEVS
My precious code
Infrastructure
"the network"
backend system(s)

13. IGNORE THIS
AT YOUR OWN PERIL
My precious code
Infrastructure
"the network"
backend system(s)

14. HOW CAN WE MAKE A
PAGE AS SLOW
AS POSSIBLE?

15. 1. __________
3. __________
4. __________
2. __________
BROWSER
APP
INFRASTRUCTURE

16. BROWSER
APP
INFRASTRUCTURE
1. Confuse this
3. Don’t optimize
4. Make bad
choices here
2. Ignore this

17. Introducing:
The METER
OF BROKEN
CUSTOMER
EXPERIENCE*
Bad C/X
Good C/X

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

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

20. Web Performance Lab

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

22. LET'S MAKE
INFRADECISIONS

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

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

25. I WENT TO
LUNCH.
INFRASTRUCTURE

26. Confidential ©2008-16 New Relic, Inc. All rights reserved. 26
But came back to this... INFRASTRUCTURE

27. Confidential ©2008-16 New Relic, Inc. All rights reserved. 27
Page load time went way, way up INFRASTRUCTURE

28. Confidential ©2008-16 New Relic, Inc. All rights reserved. 28
LESSON:
T2 INSTANCE
CPU PERFORMANCE
IS VARIABLE.
INFRASTRUCTURE

29. LET'S WRITE SOME
SLOW GO CODE

30. Confidential ©2008-16 New Relic, Inc. All rights reserved. 30
EACH PIXEL IS RANDOMLY
GENERATED
img := 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)
}
}

31. Confidential ©2008-16 New Relic, Inc. All rights reserved. 31
Doing this is slow (understandably) APP

32. Confidential ©2008-16 New Relic, Inc. All rights reserved. 32
But not slow enough... APP

33. Go sleep
if os.Getenv("SLOW_IMAGE") != "" {
time.Sleep(1000 * time.Millisecond)
}
APP

34. And Go runtime tweaking...
$ GOGC=10 <app>
APP

35. Confidential ©2008-16 New Relic, Inc. All rights reserved. 35
5300ms
And then the browser tears up APP

36. LET'S UNOPTIMIZE
THE NETWORK

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

38. 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
roundtrip
1
2
3
SYN
SYN/ACK
ACK
Data
NETWORK

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

40. 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)
C
A
C
H
E
NETWORK

41. Confidential ©2008-16 New Relic, Inc. All rights reserved. 41
TCP Connection Close: Infrastructure View
The number of received packets suddenly spikes...
NETWORK

42. Confidential ©2008-16 New Relic, Inc. All rights reserved. 42
TCP Connection Close: App View
Not much to see here
NETWORK

43. Confidential ©2008-16 New Relic, Inc. All rights reserved. 43
% of 0ms connection openings
Connection time measured in Insights from New Relic Synthetics
NETWORK

44. Confidential ©2008-16 New Relic, Inc. All rights reserved. 44
Results: Opening all the connections
2040ms
NETWORK

45. Let's increase network latency the easy way
Make the distance between
these really far.
NETWORK

46. Let's increase network latency the easy way
8,561 miles
San FranciscoAWS in Mumbai
NETWORK

47. Page load gets (slightly) faster in Japan
ap-south-1
NETWORK

48. And in Singapore, too NETWORK

49. Confidential ©2008-16 New Relic, Inc. All rights reserved. 49
Where the bits come from is really important
2460ms
NETWORK

50. LET'S CONFUSE
THE BROWSER

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

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

53. 5DIFFERENT FONTS...
FROM CHINA
LETS USE
Why not? BROWSER

54. Why not?
ALLTHE JAVASCRIPT
FRAMEWORKS!
LETS USE
BROWSER

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

56. BROWSER

57. +3400 ms
+500 ms
+19000 ms
+1000 ms
BROWSER
APP
INFRASTRUCTURE

58. All these decisions can
happen in real life for
good reasons.

59. Confidential ©2008-16 New Relic, Inc. All rights reserved. 59
∞ms 800 ms
Aggressively
Unoptimized
Aggressively
Optimized

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

61. Creating
a fast app
is more
than using
______________.
BROWSER
APP
INFRASTRUCTURE

62. Creating
a fast app
is more
than using
______________.
BROWSER
APP
INFRASTRUCTURE
fast ec2 hosts

63. Creating
a fast app
is more
than using
______________.
BROWSER
APP
INFRASTRUCTURE
Go

64. Creating
a fast app
is more
than using
______________.
BROWSER
APP
INFRASTRUCTURE
HTTP/2

65. Creating
a fast app
is more
than using
______________.
BROWSER
APP
INFRASTRUCTURE
React

66. BROWSER
NETWORK
APP
INFRASTRUCTURE

67. Clay Smith
Developer Advocate
Thank you.