I used to work on mod_pagespeed, which would
rewrite web pages so they would load faster. A key component was
bundling: combining multiple small resources into a single larger one
to reduce overhead. For example, it had tools to combine multiple
CSS,
JS, and
images.
There were serious downsides to our approach, however, because there
was no built-in support for bundling:
Combining many small images required spriting, with CSS to
identify which area of the image you want for each usage. This is a
very different syntax, and is awkward to do by hand. Our ability to
do it automatically was limited, because it needed to understand the
site's css and the publisher needed to have intentionally set their
css up to minimize the changes required.
Combining many small CSS or JS files worked better but still
required hacks to prevent errors in one file from breaking the others.
We had to change the URLs in the page, which was mostly a
problem for images. JS that modified image URLs, like changing
foo.png to foo_hover.png on hover, could be
broken, and images wouldn't have the right names if you downloaded
them. This also sometimes broke JS that expected it could derive the
location of related files from its URL.
We needed separate files for the CSS, JS, and images.
With the release of Chrome/Edge/Opera/Vivaldi 104, however, there's a new
API that makes bundling subresources very natural. Here's a demo: wbn-demo.
This tells the browser to fetch
subresources.wbn, and
then if it needs to load script.js
or sheet.css it will
get them from the bundle instead of making separate requests. Of
course this is overkill for my little demo, but if I had a page with a
large number of small resources the savings would add up.
You can read more about this API by looking at the spec
or the Chrome explainer.
I'm hoping that Firefox and Safari decide to add support for this
functionality!
Above I listed Chrome, Edge, Opera, and Vivaldi, four out of the five main
Chromium-based browsers, as supporting this feature. What about
Brave? Brave objected
to Web Bundles, arguing that they could be used to work around ad
blocking. I think they're mistaken, and argued so at the time,
but apparently they aren't convinced. Since this is a progressive
enhancement, however, it's fine that Brave has disabled it: their
users will cleanly fall back to loading multiple resources, at a small
performance cost.
(There is also another way of using this feature which goes beyond
reducing network requests, and allows you to efficiently isolate
untrusted content on a unique origin. I wrote about that in WebBundles for Ad
Serving, which describes how to use this feature to load and
display ads in a more secure and private way. Doesn't make them any less blockable, though.)
I used to work on mod_pagespeed, which would rewrite web pages so they would load faster. A key component was bundling: combining multiple small resources into a single larger one to reduce overhead. For example, it had tools to combine multiple CSS, JS, and images.
There were serious downsides to our approach, however, because there was no built-in support for bundling:
Combining many small images required spriting, with CSS to identify which area of the image you want for each usage. This is a very different syntax, and is awkward to do by hand. Our ability to do it automatically was limited, because it needed to understand the site's css and the publisher needed to have intentionally set their css up to minimize the changes required.
Combining many small CSS or JS files worked better but still required hacks to prevent errors in one file from breaking the others.
We had to change the URLs in the page, which was mostly a problem for images. JS that modified image URLs, like changing
foo.pngtofoo_hover.pngon hover, could be broken, and images wouldn't have the right names if you downloaded them. This also sometimes broke JS that expected it could derive the location of related files from its URL.We needed separate files for the CSS, JS, and images.
With the release of Chrome/Edge/Opera/Vivaldi 104, however, there's a new API that makes bundling subresources very natural. Here's a demo: wbn-demo.
The core of the demo is:
<script type="webbundle"> { "source": "subresources.wbn", "resources": ["script.js", "sheet.css"] } </script> <link rel=stylesheet href="sheet.css"> <script async src="script.js"></script>This tells the browser to fetch
subresources.wbn, and then if it needs to loadscript.jsorsheet.cssit will get them from the bundle instead of making separate requests. Of course this is overkill for my little demo, but if I had a page with a large number of small resources the savings would add up.You can read more about this API by looking at the spec or the Chrome explainer. I'm hoping that Firefox and Safari decide to add support for this functionality!
Above I listed Chrome, Edge, Opera, and Vivaldi, four out of the five main Chromium-based browsers, as supporting this feature. What about Brave? Brave objected to Web Bundles, arguing that they could be used to work around ad blocking. I think they're mistaken, and argued so at the time, but apparently they aren't convinced. Since this is a progressive enhancement, however, it's fine that Brave has disabled it: their users will cleanly fall back to loading multiple resources, at a small performance cost.
(There is also another way of using this feature which goes beyond reducing network requests, and allows you to efficiently isolate untrusted content on a unique origin. I wrote about that in WebBundles for Ad Serving, which describes how to use this feature to load and display ads in a more secure and private way. Doesn't make them any less blockable, though.)
Comment via: facebook