simplebooklet thumbnail

of 0
Learning  HTTP 2 A PRACTICAL GUIDE FOR BEGINNERS  Stephen Ludin   Javier Garza
Learning HTTP 2  A Practical Guide for Beginners  Stephen Ludin and Javier Garza  Beijing  Boston Farnham Sebastopol  Toky...
Learning HTTP 2 by Stephen Ludin and Javier Garza Copyright    2017 Stephen Ludin, Javier Garza. All rights reserved. Prin...
Table of Contents  Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...
Summary  31  4. Transition to HTTP 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...
Study 1  www.facebook.com Study 2  www.yahoo.com Summary  84 86 89  7. HTTP 2 Implementations. . . . . . . . . . . . . . ....
A. HTTP 2 Frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...
Preface  HTTP 2, also called h2 for simplicity, is a major revision of the HTTP network proto    col used by the World Wid...
Who Should Read This Book Regardless of your role, if you find yourself responsible for any part of the life cycle of a we...
Conventions Used in This Book The following typographical conventions are used in this book  Italic Indicates new terms, U...
We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. Fo...
Follow us on Twitter  http   twitter.com oreillymedia Watch us on YouTube  http   www.youtube.com oreillymedia  Acknowledg...
Foreword  In 2009, HTTP 1.1 was well over a decade old, and arguably still the most popular application protocol on the in...
That said, there was still interest in more efficient expressions of HTTP   s semantics, such as Roy Fielding   s WAKA pro...
The proof, as they say, is in the pudding  in the IETF   s case,    running code.    We quickly had that, with support in ...
CHAPTER 1  The Evolution of HTTP  In the 1930s, Vannevar Bush, an electrical engineer from the United States then at MIT  ...
prototype implementation of a hypertext system with his project Xanadu. It was unfortunately never completed, but provided...
caching. These three items had consequences on how the web could scale and needed to be addressed.  HTTP 1.1 Right on the ...
Beyond 1.1 Since 1999, RFC 2616, which specified HTTP 1.1, has defined the standard that the modern web is built on. Writt...
It is expected that HTTP 2.0 will      Substantially and measurably improve end-user perceived latency in most cases, over...
CHAPTER 2  HTTP 2 Quick Start  When faced with something new and shiny, rarely do we want to spend the first hours meticul...
Get a Certificate Working with certificates is a subject that merits a book of its own. We are going to skip right through...
Though there are now many clients and libraries to choose from1 that integrate with Let   s Encrypt, the Electronic Fronti...
goal here is to be quick and simple, and for that we will look toward the nghttp2 package. nghttp2,3 developed by Tatsuhir...
CHAPTER 3  How and Why We Hack the Web  Using a  relatively  ancient protocol to deliver fast modern web pages has become ...
object fetching logic, and the page parsing rendering logic. Let   s start with fetching. Figure 3-1 shows the components ...
Figure 3-2. Object response page rendering flowchart Continuing on with our walk through the flowchart, we  6. Receive the...
Critical Performance With the previous diagrams we can call out the areas that matter for web perfor    mance and where ou...
Figure 3-3. TCP three-way handshake TLS negotiation time If the client is making an HTTPS connection, it needs to negotiat...
reference these as we discuss the problems we face with HTTP 1.1 and why we might want something different. With those met...
Head of line blocking A browser rarely wants to get a single object from a particular host. More often it wants to get man...
Sending one packet at a time is not terribly efficient. TCP has a concept called Slow Start to determine what the correct ...
On top of that, since browsers are commonly opening six connections to a particular host, they need to do this for each co...
window dance needs to occur six times in parallel. TCP will make certain that those connections play nicely together, but ...
objects. Third-party object retrieval and processing commonly accounts for half of the time spent loading today   s web pa...
hosting infrastructure, but rather fetching all the assets and rendering the page on the client. This fact is captured by ...
Optimize DNS lookups Since a DNS lookup needs to take place before a connection can be made to a host, it is critical that...
    Implement the latest TLS best practices8 for optimizing HTTPS. If a lot of resources are requested from the same hostn...
before it expires due to premature eviction or cache wipes. The actual TTL will eventually depend on the device characteri...
    Include the Last-Modified-Since HTTP header in the request. The server will only return the full content if the latest...
A server will compress objects before they are sent and result in a 90  reduction in bytes on the wire. Common compression...
    If the JS is not critical to the initial view, then you should only fetch  and process  the JS after the onload event ...
    Image    metadata,    like the subject location, timestamps, image dimension, and resolution are often captured with t...
Anti-Patterns Because HTTP 2 will only open a single connection per hostname, some HTTP 1.1 best practices are turning int...
header information back and forth between the origin and the client may amount to measurable latency. It was therefore a r...
CHAPTER 4  Transition to HTTP 2  To be flip and mildly unhelpful, one could say that in order to support HTTP 2 all you ne...
Table 4-1. HTTP 2 browser support Name Chrome  Since version Notes 41  Firefox  36  Edge  12  Safari  9  OSX 10.11 and lat...
choose from. Organizations such as Let   s Encrypt2 are working to make it simple, fast, and even free to get a certificat...
These best practices are good things to internalize for anyone standing up a service dependent on TLS, but TLS is a rich s...
Table 4-2. HTTP 1 optimizations, and related suggestions for HTTP 2 Name Concatenation  Description Combining multiple fil...
Third Parties We love them and hate them, but third-party content on our sites is a reality. The problem with third-party ...
Summary Though a transition to HTTP 2 is generally seen as a good thing and should be com    pletely transparent to your w...
CHAPTER 5  The HTTP 2 Protocol  This chapter provides an overview of how HTTP 2 works at a low level, down to the frames o...
Though the data layer is purposely designed to be backward compatible with HTTP  1.1, there are a number of aspects of h2 ...
round-trips. It is worth noting that SPDY and early revisions of h2 used the Next Pro    tocol Negotiation  NPN  extension...
Hidden Messages  The connection preface contains two    secret    messages. The first is a joke reference to the United St...
add the continuation header to the previous header end if end loop   Now go on to ready the request response based on what...
Table 5-1. HTTP 2 frame header fields Name Length  Length Description 3 bytes Indicates the length of the frame payload  v...
Table 5-2. HTTP 2 frame types Name DATA  ID Description 0x0 Carries the core content for a stream  HEADERS  0x1 Contains t...
HTTP request or response, depending on the sender. Subsequent streams are initi    ated by sending a new HEADERS frame wit...
Figure 5-2. GET Request message and response message And Figure 5-3 illustrates what the frames may look like for a POST m...
Just like h1 requests responses are split into the message headers and the message body, an h2 request response is split i...
No more 101 responses The Switching Protocols response is a corner case of h1. Its most common use today is probably for u...
Priority The last important characteristic of streams is dependencies. Modern browsers are very careful to ask for the mos...
    index.html     style.css     critical.js     less_critical.js  weight 20      photo.jpg  weight 8      header.jpg  wei...
HTML page, a server would construct a PUSH_PROMISE on that request   s stream ID for a JavaScript object on that page.    ...
Assuming the client does not refuse the push, the server will go ahead and send the object on the new stream identifier in...
Header Compression  HPACK  As mentioned in    Fat message headers    on page 20, the average web page requires around 140 ...
cookie  last_page 286A7F3DE upgrade-insecure-requests  1 user-agent  Awesome H2 1.0  Request  2   authority  www.akamai.co...
which the server will then look up and expand into the full headers that those indexes represent. One of the major implica...
Example 5-1. HTTP 2 GET request  authority  www.akamai.com  method  GET  path     scheme  https accept  text html,applicat...
Now let   s take our first look at what goes over the wire for a simple GET. Using Tatsu    hiro Tsujikawa   s excellent n...
Had this been a POST, for example, the END_STREAM flag would not have been sent at this time. This is the header we added ...
  0.346  recv DATA frame  length 4072, flags 0x00, stream_id 1    0.348  recv DATA frame  length 4072, flags 0x00, stream_...
You can see the HEADERS frames for streams 15, 17, and 19. You see the various window updates, including a connection-leve...
CHAPTER 6  HTTP 2 Performance  One of the goals of HTTP 2 was improved performance. For some, this is the only reason to s...
Figure 6-1. Percentage of URLs with a statistically significant performance improvement with HTTP 2 Mission accomplished, ...
Latency In computer networks, latency is how much time it takes for a packet of data to get from one point to another. It ...
more. On the other hand, page load time  PLT  goes down exponentially as the RTT decreases  in the study, each 20 ms decre...
Table 6-1 provides sample average latency values, depending on the transport medium. Table 6-1. Latency values by transpor...
Packet Loss Packet loss happens when packets of data traveling across a computer network fail to reach their destination  ...
Figure 6-4. HTTP 2 performance in cellular networks  Where Is My HTTP 2 Performance  Web Page Test is an incredible tool  ...
Server Push As discussed in    Server Push    on page 53, Server Push gives the server the ability to send an object to a ...
Figure 6-5. Push while processing  Server Push     73
Does My Client and Server Support Server Push  Colin Bendell shared during a talk at the Velocity Amsterdam conference in ...
be reported as higher. So, because the mechanics of how the protocols work are dif    ferent, the meaning of TTFB changes ...
Figure 6-7. Page rendering h1 versus h2  Third Parties Many websites today use analytics, tracking, social, and advertisin...
In the context of a web page, a Single Point Of Failure, or SPOF, is a resource of a web page that, if it fails, will dela...
Figure 6-8. WPT filmstrip and timeline comparing loading a page that uses two host    name shards on h1 versus h2 We can s...
 img src  https   akah2san1.h2book.com your.png    img src  https   akah2san1.h2book.com ikigai.png    img src  https   ak...
Figure 6-10. WPT timeline comparing loading a page that uses four hostname shards using h1 On the other hand, when the pag...
Figure 6-11. WPT timeline comparing loading a page that uses four hostname shards using h2 The exercises described in this...
nection Coalescing    on page 92  has the potential to remove the sharding in some browsers under certain conditions, but ...
matrix of smaller images in a larger image and then uses CSS to choose which portion of the image to show. Depending on th...
Performance Measurement Methodology Our performance testing methodology consisted of using WPT  see    WebPagetest    on p...
Figure 6-12. h1 versus h2 for www.facebook.com on simulated 3G conditions If you take a deeper look at the waterfalls in F...
Table 6-4. HTTP 2 dependencies and priorities  weights  URL  Priority  https   www.facebook.com   HTTP 2 stream informatio...
Figure 6-13. h1 versus h2 for www.yahoo.com on simulated 3G conditions in the US Similar to the Facebook example, www.yaho...
delivering the base HTML. The data shows that a couple of the runs took significantly longer with h2, which skewed the ave...
Summary It is highly probable that you picked up this book because performance matters to you. HTTP 2 delivers that perfor...
CHAPTER 7  HTTP 2 Implementations  A contributor to the success of HTTP 2 is the support it received in terms of the numbe...
Disabling HTTP 2 HTTP 2 is new, and because of that, when encountering problems you may want to try testing your site with...
Beta Channel Though not strictly an HTTP 2 feature, having access to beta  or earlier  versions of a browser can be a grea...
Servers, Proxies, and Caches When it comes to serving content over h2 you have a number of choices. HTTP 2enabled endpoint...
Table 7-3. HTTP 2-capable endpoints Server Apache  Type Server  Push Yes  Nginx  Server   Proxy   Cache No  IIS  Server  Y...
CHAPTER 8  Debugging h2  Spending nearly 2 decades with a protocol means 20 years of tools for monitoring and debugging. N...
Net internals Chrome net-internals2 can be accessed by typing chrome   net-internals in Chro    me   s address bar. These ...
Figure 8-1. Net-internals HTTP 2 6. The context will change to Events. Click the checkbox located on the left side of the ...
t timestamp  st   milliseconds   EVENT_TYPE  For example  t 123808  st   1   HTTP2_SESSION_SEND_HEADERS      The first fie...
This request has priorities set The HTTP headers on the frame start here The associated parent stream in stream 0 This str...
Figure 8-3. Server Push timeline The Network tab tells us that the HTML loads three stylesheets and four PNG images. From ...
Figure 8-4. Server Push timeline h2.css If we mouse over one of the objects that are pushed by the server, we will see the...
Figure 8-5. Server Push timeline push.css  Chrome session key logging Both Chrome and Firefox provide the ability to log t...
There is no in-browser mechanism for getting those captures from Firefox at this time. A bit of command-line hacking is re...
5,nsSocketTransport 5,nsStreamPump 5. You can get the most verbose logging by using NSPR_LOG_MODULES all 5. See Firefox Lo...
The debugging process consists on installing Charles Proxy on a machine, then installing its root certificate on the devic...
5. On the Help menu select Local IP Address, write down your local IP address, and close the window  you will need to use ...
4. Authorize the connection on the Android device the first time you connect it to the computer by tapping the    Allow US...
OpenSSL Commands Since many web browsers only support HTTP 2 over HTTPs, the openssl command is useful for verifying wheth...
Some useful parameters you can pass to nghttp are      -v  prints debug information      -n  discards downloaded data like...
    Here,  resources push.css was downloaded although the parameter a was not indi    cated. That was because that asset w...
...   Using Stream ID  1  easy handle 0x7f8d59003e00    GET  hello-world.html HTTP 1.1   Host  akah2san.h2book.com   User-...
you will see metrics like      Connection time     First byte time     Download time     Total time     Download speed  in...
Window-Increment   983041 h2i  headers  as HTTP 1.1   GET   HTTP 1.1  as HTTP 1.1   Host  www.google.com  as HTTP 1.1   Op...
Using Wireshark to look at h2 is made complicated by the fact that most all HTTP 2 is over TLS. This means in a Wireshark ...
CHAPTER 9  What Is Next   We may have had a 20-year gap between HTTP 1.1 and HTTP 2, but from the looks of the current sta...
The answer has to do with where TCP is implemented. Most modern operating sys    tems have their TCP stack in the kernel. ...
QUIC provides multiplexing and flow control equivalent to HTTP 2, security equiva    lent to TLS, and connection semantics...
already approaching a decade since the RFC was published.2 TLS 1.3 is currently in the works and as of March 2017 was at d...
APPENDIX A  HTTP 2 Frames  This appendix is a quick reference for the HTTP 2 framing layer. Each section includes the fram...
DATA DATA frames contain arbitrary sequences of octets. This is a fancy way of saying these frames contain the requested s...
HEADERS HEADERS frames are used to start streams and send message headers to an end    point   HEADERS Frame Fields Name P...
PRIORITY The PRIORITY frame is sent to indicate the priority of the stream. It can be sent mul    tiple times and will cha...
SETTINGS The SETTINGS frame is a sequence of key value pairs. The number of pairs is defined by the frame length divided b...
PUSH_PROMISE The PUSH_PROMISE frame is sent by a server to indicate to the client that it is about to send an object that ...
PING The PING frame is intended to be used to measure the round-trip time between end    points. The frame has one flag, A...
GOAWAY Frame Fields Name R  Length Description 1 bit A single reserved bit.  Last Stream ID  31 bits  The highest number s...
CONTINUATION The CONTINUTATION frame contains additional headers from a previous HEAD    ERS, PUSH_PROMISE, or CONTINUATIO...
APPENDIX B  Tools Reference  All of the tools referenced in the book are an internet search away, but for easy refer    en...
Servers, Proxies, and Caches Application h2o  URL https   h2o.examp1e.net   Apache  https   httpd.apache.org   Squid  http...
Index  A  Android devices, debugging, 108 anti-patterns for h2, 30-31, 36-37, 81-83 concatenation, 36, 82 cookie-less doma...
Wireshark, 115-116 dependencies, 52-53 desktop browsers, 91-93 DNS lookup, 14, 16, 23 DNS prefetch, 23, 83 document comple...
iOS device debugging, 106-108 IP packets, 17-20  J  JS blocking, 27-28 JS consolidation, 30  L  latency, 14, 22, 23, 67-69...
Request for Comments  RFCs , 3 request headers, 20 resource consolidation, 30 Responsive Web Design  RWD  sites, 29 RFC  R...
About the Authors Stephen Ludin is Chief Architect for Akamai   s Web Performance division. He runs Akamai   s Foundry tea...
females giving birth to hairless litters of around 5 babies. Pups will start to wean and become independent three to six w...