I want to download an archive of web assets in a single request

Submitted by Dan Gowans

At this time, most individual assets on a webpage must be loaded in separate requests. One page can easily have over 40 requests to build it, between CSS files, images, JavaScript, web fonts, etc. I would love to be able to do something like this:

<html>
  <head>  
    <!-- The bundle tag declares an archive of website assets that can be downloaded together. -->
    <!-- If loading="lazy", wait until the first time an asset from the bundle is requested before downloading the bundle. -->
    <!-- If fallback="src", the browser will try to locate the asset within the bundle first, relying on the src or href attribute if it's missing in the bundle. -->
    <bundle id="webAssets" src="path/to/webAssets.zip" contenttype="application/zip" loading="lazy" fallback="src">
    <!-- If the bundle feature is supported, the bundle-id and bundle-path attributes are used to load the stylesheet. -->
    <!-- If the bundle feature is not supported, the href attribute is used. -->
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" bundle-id="webAssets" bundle-path="css/bootstrap.min.css">
  </head>
  <body>
    <!-- If bundles are supported, only one request would be necessary to download all three images. No complicated sprites necessary. -->
    <img src="imgA.jpg" bundle-id="webAssets" bundle-src="img/imgA.jpg">
    <img src="imgB.jpg" bundle-id="webAssets" bundle-src="img/imgB.jpg">
    <img src="imgC.jpg" bundle-id="webAssets" bundle-src="img/imgC.jpg">
    <!-- If bundles are supported, multiple third party libraries don't need to be combined into a single JavaScript file, and can remain untouched. -->
    <!-- A plugin on a CDN could bundle it's CSS, JavaScript, and images into a single bundle. -->
    <script src="libraries/libA.js" bundle-id="webAssets" bundle-src="js/libA.js"></script>
    <script src="libraries/libB.js" bundle-id="webAssets" bundle-src="js/libB.js"></script>
    <script src="libraries/libC.js" bundle-id="webAssets" bundle-src="js/libC.js"></script>
  </body>
</html>

Obviously this is just an example. It may make more sense to bundle together CSS, JavaScript, web fonts, and the company logo that are used on every page of the web application, and leave other images out to reduce the number of assets unnecessarily downloaded. Multiple bundles could exist on the same page, each with their own ids. Whatever makes sense in the application. A store's search results page could include an on-the-fly bundle path in it's JSON response containing all of the search result thumbnails.

Tagged
Performance