why is my website running slow? - hknog.net · for a chrome user (6 persistent conns for one...
TRANSCRIPT
![Page 1: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/1.jpg)
Why is My Website
Running Slow?
Edmond Chan & Feybian YipAkamai Professional ServicesSeptember 2018
![Page 2: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/2.jpg)
Performance Vs. Conversion
The State of Online Retail Performance. Akamai. Spring 2017.
Conversion rate:
% visitors to the site that complete a meaningful action
Con
vers
ion
rate
(%)
0
1
2
3
4
5 10 15 20
Page load time (seconds)
Desktop Tablet Mobile
![Page 3: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/3.jpg)
An Example of Performant Website
![Page 4: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/4.jpg)
Measuring Site Performance
First Contentful Paint
First Paint
First Meaningful paint
Hero Rendering Time
Visually Complete
Speed Index
Rendering Construction
Estimated Queue Time Time to
Interactive
First CPU Idle
First Input Delay
# HTTP Requests
# Stylesheets
# Images
Dom Depth
Download Size
# JavaScripts
Browser Cache
Compression
![Page 5: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/5.jpg)
Rendering Metrics
0s 2.8s
First Paint & First Contentful Paint
First Meaningful Paint
3.2s 6.2s
Visually Complete
http://www.webpagetest.org/result/180807_RK_18dfd5939697a7ee26884b5906ecb19f/
![Page 6: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/6.jpg)
Construction Metrics
![Page 7: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/7.jpg)
W3C Navigation & Resource Timings
Navigation Timing
https://www.w3.org/TR/navigation-timing-2/
![Page 8: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/8.jpg)
Example: Navigating https://hknog.net/
html
head body
linkdiv
script
img
script
img
![Page 9: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/9.jpg)
HTML DOM
Render Tree Layout Paint
CSSOMCSS
JavaScript
ImagesImagesImages
JavaScriptJavaScript
CSSCSS
HTML Page Render Process Flow
![Page 10: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/10.jpg)
Bytes
Page Load Time
![Page 12: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/12.jpg)
Deep-diving into the Problem...
100 km
PropagationTransmissionQueueing
0s 6.2s3.2s
![Page 13: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/13.jpg)
Latency 101
● Queueing - Buffer & Processing
● Transmission - Bandwidth
● Propagation - Distance
Q
T
P
Packet
In Out
![Page 14: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/14.jpg)
Example: Browser Timing
https://hknog.net/ #1#2
Browser queue
Queueing & Stalled
TTFB
![Page 15: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/15.jpg)
Queueing vs. Stalled
Official definition:-
https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing-breakdown
https://hknog.net/
![Page 16: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/16.jpg)
Queueing vs. Stalled
https://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/network/RequestTimingView.jshttps://chromedevtools.github.io/devtools-protocol/1-2/Network/
issueTime startTime(requestTime)
dnsStart connectStart sendStart sendEnd receiveHeadersEnd
https://hknog.net/
Queueing
Which one is the Stalled time in this case?
(b)(c)
(a)
Stalled (blocking)
![Page 17: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/17.jpg)
Queueing vs. Stalled
Subsequent requests:
issueTime startTime(requestTime)
sendStart
QueueingStalled
(blocking)Parallel Connections
HTTP/1.1
![Page 18: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/18.jpg)
Head-of-Line Blocking
Request #1 Response #1 Request #2 Response #2 Request #3 Response #3 Request #4 Response #4
Time
HTTP/1.x
A TCP Connection
![Page 19: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/19.jpg)
Multiple Connections
Request #1 Response #1 Request #2 Response #2 Request #3 Response #3 Request #4 Response #4
HTTP/1.x
Request #1 Response #1 Request #2 Response #2 Request #3 Response #3 Request #4 Response #4
Request #1 Response #1 Request #2 Response #2 Request #3 Response #3 Request #4 Response #4
Request #1 Response #1 Request #2 Response #2 Request #3 Response #3 Request #4 Response #4
Time
![Page 20: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/20.jpg)
How Many Connections Are Enough?
Bandwidth Delay Product (BPD):● 7.2Mbps1 x 50ms2 ≈ 44KB
For a Chrome user (6 persistent conns for one HTTP/1.x domain):
● 6 x 352B ≈ 2KB
For my customer’s app (8 persistent conns):● 8 x 352B ≈ 3KB
1Global Average and Average Peak Connection Speeds. Akamai’s State of the Internet, Q1 2017.2Latency between Hong Kong and Tokyo with Akamai’s Route Optimization. https://www.akamai.com/us/en/solutions/intelligent-platform/visualizing-akamai/network-performance-comparison.jsp
Median = 352B
BW
Delay
Bytes/BW
![Page 21: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/21.jpg)
Better Approaches
Request #1 Response #1 Request #2 Response #2 Request #3 Response #3 Request #4 Response #4
Time
Request #1 Response #1
Request #1
Response #4
Response #1
Request #2 Response #2
Request #4
HTTP/2Request #3 Response #3
HTTP/1.1 + Pipelining
HTTP/1.x
Request #2 Response #2Request #3
Response #3
Request #4
Response #4
Stream #7
Stream #5
Stream #3
Stream #1
![Page 22: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/22.jpg)
Server-side Blocking
HTTP/2
![Page 23: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/23.jpg)
Transport-layer Blocking
Sending large responses
“Long” sequence of tiny responses locking TCP BBR into the “application-limited” phase
HTTP/2 HTTP/1.1 + Pipelining HTTP/1.1
Edge paces TCP segments for a single HTTP Response.
Edge receives next HTTP request and sends next response after a RTT.
81.8ms
Client can only send the next request after receiving this segment.
82.3ms
“Bursty” TCP segments for a single HTTP Response
![Page 24: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/24.jpg)
Other Browser Timings
Request
TTFB
Content Download
Q, T, P Q, T, P Q, T, P Q, T, P Q, T, P Q, T, P
E.g., TTFB and Content Download:-
https://hknog.net/
Response
![Page 25: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/25.jpg)
Fixing the Bottlenecks by BW and RTT?
https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
T = ------------------------
Q and P
Content Length
BandwidthP
Q and T
![Page 26: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/26.jpg)
Many Ways to Improving Site Performance
Propagation Transmission● Adaptive Acceleration (e.g., automated
link preconnect, server push)● HTTP/2● QUIC● Object and Page Prefetching
Queueing
T● Akamai Cache Hierarchy● Sureroute● NetStorage● Cloudlets ● Direct Connect● Cloud Wrapper● Downstream Cacheability● Script Management● API Gateway
● Last Mile Acceleration (GZIP) ● Resource Optimizer (Brotli & Zopfli)● Image Manager● FEO (Inlining, minifying, JIT)● Large File Optimization (LFO)
QP
![Page 27: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/27.jpg)
![Page 28: Why is My Website Running Slow? - HKNOG.net · For a Chrome user (6 persistent conns for one HTTP/1.x domain): 6 x 352B ≈ 2KB For my customer’s app (8 persistent conns): 8 x 352B](https://reader034.vdocuments.net/reader034/viewer/2022042420/5f37aade46fdc04d74312655/html5/thumbnails/28.jpg)
Thank you!