Learning HTTP/2

Figure 4.6 - Average RWD bytes served per pixel. Source: http://goo.gl/6hOkQp
Image overloading mitigations involve the serving of tailored image sizes and quality,
according to the user device, network conditions and the expected visual quality.
Anti-Patterns
Because HTTP/2 will only open a single connection per hostname, some HTTP/1.1
best practices are turning into anti-pattern for HTTP/2. We list below some popular
methods that no longer apply to HTTP/2 enabled websites
Spriting and resource consolidation/inlining
Spriting aims at consolidating many small images into a larger one in order to only
incur one resource request for multiple image elements. For instance, color swatches
or navigation elements (arrows, icons …) get consolidated into one larger image,
called a sprite. In the HTTP/2 model, where a given request is no longer blocking and
many requests can be handled in parallel, spriting becomes moot from a performance
standpoint and website administrators no longer need to worry about creating them,
although it is probably not worth the effort to undo them.
In the same vein, small text-like resources like JS and CSS are routinely consolidated
into single larger resources, or embedded into the main html, so as to also reduce the
number of connections client-server. One negative effect is that a small CSS or JS,
which may be cacheable on its own, may become inherently uncacheable if embedded
in an otherwise non-cacheable html, so such practices should be avoided when a site
migrates from HTTP/1.1 to HTTP/2. However, a study published by khanaca‐
Anti-Patterns | 21