Little feature, big difference.
|
|
Resource prioritization is a lesser-known feature of HTTP/2.
Remember that when using HTTP/2, a client opens just one connection to a server. We have to download all of the resources - HTML, CSS, JS, images, etc - over that single connection. So, let's say we download and parse an HTML document, and we have to download some fonts, images, CSS and Javascript to display the page. In what order will they be downloaded? Will we just try to download them all at once?
Downloading every asset at once might be inefficient. We only need certain resources to actually display the page (usually CSS and JS), for starters. Sometimes there are certain resources linked to the page that we need to download but maybe not right away - a CSS stylesheet for print media, for example, or a Javascript script tag marked with the async or defer attributes.
Imagine a page with 100 images. Should we try to download all of these images at once, and try to download some CSS and JS at the same time? Certainly not - it would make the CSS and JS take much, much longer to download!
We want to use all of the bandwidth available for important resources first, so they can download as quickly as possible, then allow less important resources to download.
Now, what I learned while working on a client's site this week was rather shocking: almost no CDNS support HTTP/2 resource prioritization.
Out of all the major, popular CDNs, only Akamai, Fastly and Cloudflare support it. Amazon CloudFront, probably the most popular choice among Rails developers, does not.
What this means is that, if using HTTP/2 on a non-resource-prioritizing CDN, like Amazon CloudFront, you have to much more careful about the _order_ in which resources are scheduled to be downloaded (essentially in what order they are put in the "download queue").
In general, on a webpage, this means the order in which they appear in the document. One scenario that seems likely would be images downloading before fonts. This is important, because fonts are far more important in displaying whats on a webpage (the text!) than images are.
Images usually appear in image tags in the document. These tags will be parsed before your CSS has finished downloading. If that CSS contains an external @font-face declaration, that means the browser will start downloading images first, slowing down the later-enqueued font download.
With HTTP/2 resource prioritization, that same document will complete the font download sooner, because the font will be reprioritized as soon as it is enqueued.
So, when choosing a CDN, realize that all HTTP/2 is not created equal. In addition to this HTTP/2 feature, CDNs also can have vastly different performance in terms of TLS, PoP locations, and overall bandwidth performance. Do a bit of research before choosing one or the other. Luckily, it's very easy to switch CDN providers, because all a CDN does is mirror traffic from an origin.
Until next time,
-Nate
|
|
|
|