Slide 1
Slide 1 text
Understanding HTTP/2 prioritization
Moto Ishizawa
@summerwind
Slide 2
Slide 2 text
Who? :-)
• Platform Engineer @ Yahoo! JAPAN
• Beacon platforms, Data pipelines
• Reviewer of HPBN Japanese Edition
• Sections: HTTP/1.1, HTTP/2, WebRTC
• HTTP/2 Japan Community
• RFC7540 Japanese Translation, h2spec
Slide 3
Slide 3 text
HTTP/2 Prioritization
• HTTP/2 client controls the transmission order of resources by priority
• Priority is expressed by dependency and weight
• Priority is a hint, server may ignore it
• In the browser, there is a possibility that the priority affects the rendering
• Prioritization might adversely affect the critical rendering path
Slide 4
Slide 4 text
Priority Tree
0
3
128
5
64
7
16
9
16
Stream ID
Weight
Dependency
Slide 5
Slide 5 text
Priority Tree
0
3
128
5
64
7
16
9
16
All streams are set weight 16 by default.
All streams depend on the Stream ID 0 by default.
Slide 6
Slide 6 text
Priority Tree
0
3
128
5
64
7
16
9
16
The priority of the stream is determined by the relative proportions of the weights.
Stream ID 3 should receive two-thirds of available resources.
The priority of the stream that depends on another stream is determined by the weight of dependent stream.
Stream ID 7 should receive half of the resources of Stream ID 3.
Slide 7
Slide 7 text
Implementation status
Server
Name Version Support
nghttp2 1.0.2 YES
H2O 1.2.0 YES
Apache Traffic Server 5.3.0 NO
Browser
Name Version Support
Firefox 38.0.5 YES
Chrome 43.0.2357.65 YES (Weight only)
Edge 0.11.10074.0 (Preview) NO
Safari 9,0 (Preview) NO
Slide 8
Slide 8 text
Testing the prioritization of browsers
• Test page
• CSS in the × 3
• Javascript in the × 3
• JavaScript in the × 3
• Image in the × 3
• Size of all resources: 100KB
• Server
• nghttpx v1.0.1
Test
Test
Slide 9
Slide 9 text
Firefox’s Priority Tree
9
1. Initialization
0
3 7
201 1
1
11
1
5
101
Initializing the priority tree by PRIORITY frames.
Slide 10
Slide 10 text
Firefox’s Priority Tree
9
2. HTML
0
3 7
201 1
1
13
32
11
1
5
101
Stream for HTML.
Prioritized by HEADERS frame.
Slide 11
Slide 11 text
Firefox’s Priority Tree
9
3. CSS
0
3 7
201 1
1
13
32
19
32
17
32
15
32
11
1
5
101
Streams for CSS.
Prioritized by HEADERS frames.
Slide 12
Slide 12 text
Firefox’s Priority Tree
9
25
4. JavaScript in the
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
5
101
Streams for JavaScript.
Prioritized by HEADERS frames.
Slide 13
Slide 13 text
Firefox’s Priority Tree
9
25
5. Image
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
5
101
Streams for Image.
Prioritized by HEADERS frames.
Slide 14
Slide 14 text
Firefox’s Priority Tree
9
25
6. JavaScript in the
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Streams for JavaScript.
Prioritized by HEADERS frames.
Slide 15
Slide 15 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 16
Slide 16 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 17
Slide 17 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 18
Slide 18 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 19
Slide 19 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 20
Slide 20 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 21
Slide 21 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 22
Slide 22 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 23
Slide 23 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 24
Slide 24 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 25
Slide 25 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 26
Slide 26 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 27
Slide 27 text
Firefox’s Priority Tree
9
25
7. Download
0
3 7
201 1
1
32
13
32
19
32
21
32
23
32
17
32
15
32
11
1
27
22
29
22
31
22
35
32
37
32
33
32
5
101
Slide 28
Slide 28 text
Firefox’s Timeline
13
15
17
19
21
23
25
27
29
31
33
35
37
HEADERS (Request)
HEADERS (Response)
DATA
Slide 29
Slide 29 text
Chrome’s Priority Tree
1. HTML
0
1
256
Stream for HTML.
Prioritized by HEADERS frame.
Slide 30
Slide 30 text
5
Chrome’s Priority Tree
2. CSS
0
1
256
3
220 220
7
220
Streams for CSS.
Prioritized by HEADERS frames.
Slide 31
Slide 31 text
5
Chrome’s Priority Tree
3. JavaScript in the
0
1
256
3
220 220
7
220
9
183
11
183
13
183
Streams for JavaScript.
Prioritized by HEADERS frames.
Slide 32
Slide 32 text
5
Chrome’s Priority Tree
4. JavaScript in the
0
1
256
15
183
17
183
19
183
3
220 220
7
220
9
183
11
183
13
183
Streams for JavaScript.
Prioritized by HEADERS frames.
Slide 33
Slide 33 text
5
Chrome’s Priority Tree
5. Image
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
Streams for Image.
Prioritized by HEADERS frames.
15
183
17
183
19
183
Slide 34
Slide 34 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 35
Slide 35 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 36
Slide 36 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 37
Slide 37 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 38
Slide 38 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 39
Slide 39 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 40
Slide 40 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 41
Slide 41 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 42
Slide 42 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 43
Slide 43 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 44
Slide 44 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 45
Slide 45 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 46
Slide 46 text
5
Chrome’s Priority Tree
6. Download
0
1
256
3
220 220
7
220
9
183
11
183
13
183
21
110
23
110
25
110
15
183
17
183
19
183
Slide 47
Slide 47 text
Chrome’s Timeline
1
3
5
7
9
11
13
15
17
19
21
23
25
HEADERS (Request)
HEADERS (Response)
DATA
Slide 48
Slide 48 text
Edge’s Priority Tree
1. HTML
0
1
16
Slide 49
Slide 49 text
5
Edge’s Priority Tree
2. CSS, JavaScript, Image
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Streams for CSS, JavaScript, and Image.
Priority is not specified. Default value is used.
Slide 50
Slide 50 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 51
Slide 51 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 52
Slide 52 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 53
Slide 53 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 54
Slide 54 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 55
Slide 55 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 56
Slide 56 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 57
Slide 57 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 58
Slide 58 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 59
Slide 59 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 60
Slide 60 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 61
Slide 61 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 62
Slide 62 text
5
Edge’s Priority Tree
3. Download
0
1
16
15
16
17
16
19
16
3
16 16
7
16
9
16
11
16
13
16
21
16
23
16
25
16
Slide 63
Slide 63 text
Edge’s Timeline
1
3
5
7
9
11
13
15
17
19
21
23
25
HEADERS (Request)
HEADERS (Response)
DATA
Slide 64
Slide 64 text
The prioritization strategy of browsers
• Firefox builds the priority tree that is optimized for Web pages
• Priority order: CSS, JavaScript, Images
• Chrome reuses the prioritization strategy of SPDY era that is used only weight
• The difference in weight is small… there is room for optimization!
• Edge does not support the prioritization
• It seems to control the download of the resource by the timing of request...
Slide 65
Slide 65 text
Conclusion
• HTTP/2 prioritization consists of dependency and weight
• Client notifies the priority, server builds the priority tree
• Each browser have different prioritization strategy
• The use of priority dependencies may produce better results
• Need to measurement the effect of HTTP/2 prioritization!
• But there is no tool that can measure the prioritization of HTTP/2...
Slide 66
Slide 66 text
Thanks!