Post

Author(s)

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.