18. Calm maps¶
18.1. Basics¶
Because HTTP/2 allows to use the same the TCP connection for sending different
assets concurrently to the browser, it’s possible to manage the relative priority
at which different assets are sent to improve the overall loading time of a webpage.
For example, .css
and .js
files are generally more urgent than images, although
that ultimately depends of the particular page where they happen.
To fine-tune the workings of the accelerator to each particular situation, we have
introduced so called calm maps.
A calm map is part of a .push-list file, and it’s used to tweak, server-side, the default priority that ShimmerCat uses for sending assets to the browser inside the same HTTP/2 connection.
Here is an example:
---
hints:
- /fonts/font-awesome.min.css?vh=61075de8e
- /sass/main.css?vh=4fe8ea6bd
calm-map:
-
p: "/sass/main.css?vh=4fe8ea6bd"
m: "20!"
-
p: /images/my-icon.png
m: "35!"
-
p: "/fonts/font-awesome.min.css?vh=61075de8e"
m: "25!"
schema: push-list-v1
In the list, the numeric values preceeding the exclamation sign are each used as a value opposite to the asset’s priority, so the higher it is, the greater the “calm” is and the lower the asset priority. In the example above, that implies that “main.css” should be pushed with highest urgency, and then “font-awesome.min.css” should be sent as well.
Calm maps can include pushed and non-pushed
assets, so in the example above /images/my-icon.png
is to be sent
with calm 35 when the browser requests it, that is the
asset is not pushed.
18.2. Calm maps for images¶
Two of the image formats in the web, PNG and JPEG, support subdivision in blocks,
so that the browser can show progressively better representations of the image
as the image data is received from the wire.
To combine that with HTTP/2 priorities, ShimmerCat QS
has mature support
for so-called “coordinated
image loading”, which enables e.g. sending first low-resolution versions of
all images initially visible in a page.
In addition to the syntax above, images support more fine-grained priorities by interlaced/progressive block.