Why is My Website Running Slow? Edmond Chan & Feybian Yip Akamai Professional Services September 2018

Size: px

Start display at page:

Download "Why is My Website Running Slow? Edmond Chan & Feybian Yip Akamai Professional Services September 2018"

Cory Arnold
5 years ago
Views:

1 Why is My Website Running Slow? Edmond Chan & Feybian Yip Akamai Professional Services September 2018

2 Performance Vs. Conversion Desktop Tablet Mobile 4 Conversion rate (%) Conversion rate: 3 % visitors to the site that complete a meaningful action Page load time (seconds) The State of Online Retail Performance. Akamai. Spring

3 An Example of Performant Website

4 Measuring Site Performance Rendering Estimated Queue Time First Paint Visually Complete First Contentful Paint Construction # Images Time to Interactive # JavaScripts First CPU Idle Hero Rendering Time First Meaningful paint # HTTP Requests Speed Index First Input Delay # Stylesheets Dom Depth Browser Cache Compression Download Size

5 Rendering Metrics 0s 2.8s 3.2s 6.2s First Paint & First Contentful Paint First Meaningful Paint Visually Complete

6 Construction Metrics

7 W3C Navigation & Resource Timings Navigation Timing

8 Example: Navigating html head body div link script script img img

9 HTML DOM Images Images Images Render Tree JavaScript JavaScript JavaScript CSS CSS CSS Layout CSSOM HTML Page Render Process Flow Paint

10 Bytes Page Load Time

11 But... PLT!= Bytes / BW

12 Deep-diving into the Problem km Transmission Queueing 0s 3.2s Propagation 6.2s

13 Latency 101 In Out Queueing - Buffer & Processing Transmission - Bandwidth Propagation - Distance Q T P Packe t

14 Example: Browser Timing Browser queue #2 #1 Queueing & Stalled TTFB

15 Queueing vs. Stalled Official definition:-

16 Queueing vs. Stalled Which one is the Stalled time in this case? Queueing Stalled (blocking) (c) (b) (a) issuetime starttime (requesttime) dnsstart connectstart sendstart sendend receiveheadersend

17 Queueing vs. Stalled Subsequent requests: Queueing Stalled (blocking) Parallel Connections issuetime starttime (requesttime) sendstart HTTP/1.1

18 Head-of-Line Blocking HTTP/1.x Request #1 Response #1 Request #2 Response #2 Request #3 Response #3 Request #4 Response #4 A TCP Connection Time

19 Multiple Connections 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 Request #1 Response #1 Request #2 Response #2 Request #3 Response #3 Request #4 Response #4 Time

20 How Many Connections Are Enough? Bytes/BW BW Delay Bandwidth Delay Product (BPD): 7.2Mbps1 x 50ms2 44KB Median = 352B 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 1 Global Average and Average Peak Connection Speeds. Akamai s State of the Internet, Q Latency between Hong Kong and Tokyo with Akamai s Route Optimization. 2

21 Better Approaches HTTP/1.x Request #1 Response #1 Request #2 Response #2 Request #3 Response #3 Response #1 Stream #7 Response #2 Request #4 Request #3 Stream #5 Request #2 Stream #3 Stream #1 Request #3 Request #2 Request #1 Response #4 HTTP/1.1 + Pipelining Request #4 Request #1 Request #4 Response #3 Response #4 Response #4 Response #3 Response #2 HTTP/2 Response #1 Time

22 Server-side Blocking HTTP/2

23 Transport-layer Blocking HTTP/2 HTTP/1.1 + Pipelining HTTP/1.1 Edge paces TCP segments for a single HTTP Response. Client can only send the next request after receiving this segment. Edge receives next HTTP request and sends next response after a RTT. Bursty TCP segments for a single HTTP Response 81.8ms 82.3ms

24 Other Browser Timings E.g., TTFB and Content Download:- Request Q, T, P Q, T, P Q, T, P TTFB Response Content Download Q, T, P Q, T, P Q, T, P

25 Fixing the Bottlenecks by BW and RTT? Content Length T = Bandwidth P Q and P Q and T

Many Ways to Improving Site Performance P Transmission Propagation Akamai Cache Hierarchy Sureroute NetStorage Cloudlets Direct Connect Cloud Wrapper Downstream Cacheability Script Management API

26 Many Ways to Improving Site Performance P Transmission Propagation Akamai Cache Hierarchy Sureroute NetStorage Cloudlets Direct Connect Cloud Wrapper Downstream Cacheability Script Management API Gateway Q T Last Mile Acceleration (GZIP) Resource Optimizer (Brotli & Zopfli) Image Manager FEO (Inlining, minifying, JIT) Large File Optimization (LFO) Queueing Adaptive Acceleration (e.g., automated link preconnect, server push) HTTP/2 QUIC Object and Page Prefetching

28 Thank you!

Executive Summary. Performance Report for: https://edwardtbabinski.us/blogger/social/index. The web should be fast. How does this affect me?

Executive Summary. Performance Report for: https://edwardtbabinski.us/blogger/social/index. The web should be fast. How does this affect me? The web should be fast. Executive Summary Performance Report for: https://edwardtbabinski.us/blogger/social/index Report generated: Test Server Region: Using: Analysis options: Tue,, 2017, 4:21 AM -0400