New feature: Link in body

By adding support for on-demand loading of CSS resources through code-splitting, we have been able to implement a very handy new feature: Link in body. This technique allows for a sequential render of the page. There is no need to explicitly extract all CSS styles which go “above the fold”, since now they will be output just before the first instance of the corresponding module. It not only adds convenience for the developer, but it also boosts optimization: because the browser will initially process those CSS styles which are visible on the screen, the first meaningful paint will take place earlier.

The architecture of a PoP application is perfectly suited to this technique, since a PoP website is simply a collection of modules wrapping each other in forever-nested levels, in a huge LEGO-like building process. Components are either an atomic functionality (eg: a link), or a composition of other components. Each square in the image below is a component:

Architecture of a PoP website: modules wrapping each other.

Additionally, instead of linking to the file, the full CSS styles can be printed inline.

As usual, 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.