New feature: dynamic bundling of resources

PoP has a nifty new feature: it bundles all needed Javascript and CSS resources into several bundles, on runtime, and makes them available through a CDN. Thanks to code-splitting, a PoP site already only loads the needed (Javascript and CSS) code and nothing else, and with this new featured, this minimum code is packaged all together to improve performance:

  • Total file size is smaller, since the compression of a bundle can benefit from dictionary reuse, whereas loading individual assets can’t.
  • Browsers have not yet been optimized to efficiently load individual assets in parallel (as made possible by HTTP/2). For example, Chrome will trigger inter-process communications (IPCs) linear to the number of resources, so including hundreds of resources has browser runtime costs.

Assets are bundled together depending on what type of files they are, as to maximize the amount of time they will remain cached on the client: while vendor files do not change often, and as such can remain cached for a long time, dynamically-generated assets can change as often as a new application version is deployed. The produced bundles are the following:

  • All vendor files together
  • All dynamically-generated files together
  • All Handlebars templates together (in the case of Javascript)
  • All other assets together

In addition, for Javascript, it splits each bundle into sub-bundles, allowing to load critical and non-critical assets with different priority:

  • Critical assets: load immediately
  • Non-critical assets: load either using “defer” or “async”

It can be seen in the screenshot below, that all the Javascript assets are loaded in just 8 files, 4 of which are loaded immediately, and the other 4 are loaded using “defer”:

Currently, all assets loaded by WordPress itself are not being bundled, however we are working on it, and expect this to be ready in a couple of weeks.

As always, enjoy!

Sign up to our newsletter:

Welcome to the PoP framework!
Break the information monopoly

the PoP framework is open source software which aims to decentralize the content flow and break the information monopoly from large internet corporations. Read more.