What is asset bundling?

Advanced

3 Min Read

Mar 14, 2024

Bundling is the process of combining assets such as CSS and JavaScript files into 1 file. For instance, if you had the following CSS files on your page:

styles.css
bootstrap.css

This would be combined into a single CSS file like page0.css

With HTTP/2, bundling isn't as important as it used to be. In HTTP/1.x, bundling was very important because browsers couldn't download more than 6 assets at a time. In HTTP/2, browsers are able to download multiple files (images, JavaScript files, CSS files, etc.) in parallel, thus speeding up your website.

Why is bundling still important in HTTP/2?

Bundling still may be important in HTTP/2 for several factors that affect users.

  1. Bundling frees up parallel downloads for other assets such as Images, Videos, etc.

  2. Bundling reduces disk IO on a server. This is especially important in a Shared Hosting environment

  3. Bundling assets together improves compression (better compression ratios results in smaller assets overall)

Recommendations

Per the CSS Tricks article (below), it is recommended to test on your site to find the best solution for your site and user needs. Turbo presently bundles all assets together into 1 CSS and 1 JavaScript file. In the future, we hope to provide finer grain control of how bundling is handled to further tune and optimize your site.

Resources

  • CSS Tricks discusses when to bundle and when not to bundle outlining file compression ratios as a potential improvement when files are bundled together.

  • U.S. Web Design System (USWDS) makes the case against bundling and splitting files into smaller pieces for parallel downloads in some instances. In their testing with Kahn Academy, a performance degradation was noted at 300 files on a page and 50 assets per page. This test further assumes that the servers Kahn Academy is using are not Shared Hosting environments. Therefore, for RapidWeaver users, the degradation (slow down in page speed) would occur at a significantly smaller project.

  • Khan Academy goes into details about file compression and bundling. Although this article is dated from 2015, it is still interesting to read. Of note, Khan Academy found that without bundling, they were serving more bytes (larger web pages) and disk IO resulted in higher latency/delays.

Cart is Empty

You haven't added anything, please add something

FormPlus

Forms, function, and so much more.

You want to ask a lot of questions.

Lets Talk !