inline-critical-styles

inline critical styles.

This is a fork of: https://github.com/maxogden/inline-styles

This fork only targets critical or 'above the fold' inline css.

Example:

<link rel="stylesheet" type="text/css" atf="true" href="/assets/abovethefold.css">

The critical only style can be generated however you like, e.g. https://github.com/at-import/jacket

Remaining stylesheets can be loaded asynchronously using <preload> like this:

<link rel="preload" type="text/css" href="/assets/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" type="text/css" href="/assets/app.css"></noscript>

inline-styles

replaces link tags that have the attribute atf="true" with inline style tags + inlines CSS url() calls with data URIs

npm install inline-critical-styles -g
inline-critical-styles index.html > inlined.html