Faster First Paints (new webpack plugin)

Jeff Cross is a co-founder of nrwl.io. He was previously Tech Lead of the Angular Mobile team at Google.

Today we’re releasing and open-sourcing a new webpack plugin, webpack-plugin-critical. This plugin is a thin wrapper around Addy Osmani’s critical library.

The critical library can provide a significant reduction in the time it takes to render the initial html page when users open your application. It accomplishes this by analyzing the content of the page, and analyzing the linked stylesheets to extrapolate the CSS rules that are actually used in the markup. Critical then can inline the applicable CSS into the HTML document, and preload the rest of the stylesheet in the background. This technique is particularly effective for single page applications (not just Angular applications!) where much of the application’s styling is encapsulated in components that will be loaded later, or when rendering an App Shell where a small subset of the application’s UI is rendered before the rest of the application loads.

This technique can also improve the initial time-to-paint for completely pre-rendered pages, with some caveats. Namely, the time to determine the correct CSS rules to inline can take multiple seconds, so it is not suitable for pre-rendering at request-time, and could greatly increase the build time if pre-rendering many pages at build time. For that reason, this plugin is most applicable to pages that use an App Shell strategy or are dynamically rendered in the browser at runtime.

A pre-release version of the webpack plugin has been in use in production on code.gov for several months. Local testing with simulated 3G connectivity showed a time-to-first-paint reduction from 1600ms to 230ms (note: local network simulation can give good comparison numbers, but tends to not reflect real-world network latency and bandwidth accurately).

To use the plugin, install the package from npm:

$ npm install webpack-plugin-critical

Refer to the plugin’s github repo for usage documentation and examples. Pull requests and issues welcome!

And see the critical repo for more detailed usage information and background.

Tweet at us at Nrwl.io to let us know if you have questions, or want to share how you’re using it!

Jeff Cross is a co-founder of Nrwl — Enterprise Angular Consulting.