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.