critical

This is a Node.js tool that improves how fast web pages appear to load for visitors. It does this by identifying the CSS styles needed to render the visible portion of a page immediately on arrival, then embedding those styles directly into the HTML. The rest of the CSS loads separately in the background.

The problem it solves is common in web development: when a browser loads a page, it normally has to fetch and process all the site's CSS before displaying anything. If those stylesheets are large, the user sees a blank screen for a noticeable moment. Critical extracts only the styles affecting what is visible on first load, called above-the-fold content, and puts those styles inline in the HTML. The browser can then render that content immediately, making the page feel much faster.

You configure it by providing an HTML file and your CSS, plus a viewport size that represents the screen dimensions you want to optimize for. It can handle multiple screen sizes at once, which is useful for sites that adapt their layout for phones, tablets, and desktop displays. There is also an option to ignore specific CSS rules, such as font-face declarations or rules containing background images, if you want to defer those separately.

The tool integrates with common JavaScript build workflows. It works as a Node.js module you call in code, and there are also plugins for Grunt and Webpack. It returns the processed HTML and CSS either through callbacks, promises, or async/await syntax, fitting into whatever JavaScript style a project already uses.

The output is typically modified HTML with the critical CSS embedded inside a style tag, plus a separate file containing the remaining non-critical CSS that loads later.