Question 1

How to use inline-critical with a build tool like Webpack?

Accepted Answer

You can integrate it as a post-processing step in your Webpack configuration by using the Node.js API to read HTML and critical CSS files, or run the CLI after the build, similar to the example usage with file reading.

Question 2

inline-critical vs critters: which should I choose?

Accepted Answer

inline-critical offers more preload strategy options and explicit control over critical CSS, but critters can automatically extract critical CSS from stylesheets. Choose inline-critical if you have pre-generated critical CSS and need flexible async loading.

Question 3

Can inline-critical handle CSS files with @import statements?

Accepted Answer

Yes, with the extract option and correct basePath setting, it can extract inlined styles from referenced stylesheets, which should resolve @import if the file paths are accessible during processing.

Question 4

How to ignore multiple CSS files in inline-critical?

Accepted Answer

Pass an array of regex patterns to the ignore option, such as { ignore: [/bootstrap/, /vendor/] }, as shown in the example for ignoring stylesheets per regex in the README.

Question 5

What's the best preload strategy for performance?

Accepted Answer

The 'default' strategy uses preload tags for good browser support, but 'media' swapping is effective for async loading without JS dependency; test based on your site's traffic and JS requirements.

Question 6

Does inline-critical work with single-page applications (SPAs)?

Accepted Answer

It's designed for static HTML, so for SPAs, you'd need to pre-render pages or use it during build time for initial load optimization, but it won't handle dynamic client-side updates.

inline-critical

What is inline-critical?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions