How to integrate Critical with Webpack?

Use the html-critical-webpack-plugin mentioned in the README, which wraps Critical for Webpack builds. This allows you to generate and inline critical CSS as part of your bundle process without manual scripting.

Critical vs Penthouse: which should I choose?

Critical is higher-level, automating style extraction and inlining from HTML, while Penthouse requires specifying CSS upfront. Choose Penthouse for dynamic styles or if Critical's automation isn't accurate enough, as suggested in the README.

Can Critical handle CSS from React or Vue apps?

Yes, but only if the CSS is present in the final HTML output after build. For CSS-in-JS that injects styles at runtime, Critical may miss them, leading to incomplete extraction, so it's better suited for static or pre-rendered sites.

How to ignore @font-face in critical CSS?

Use the 'ignore' option with 'atrule: ["@font-face"]' as shown in the README example. This defers font loading, preventing render-blocking while still extracting other critical styles.

Does Critical improve Google Core Web Vitals?

Yes, by reducing render-blocking CSS, Critical directly optimizes metrics like First Contentful Paint and Largest Contentful Paint, which are key to Core Web Vitals. It's a recommended tool for performance tuning in static sites.

How to set up Critical for different screen sizes?

Specify the 'dimensions' array in options with multiple height and width objects, as demonstrated in the multi-resolution support section. Critical will generate and minify CSS for each resolution, ensuring responsiveness.

Open-Awesome

Critical

Apache-2.0JavaScriptv7.2.1

Extracts and inlines critical-path CSS from HTML to improve page load performance.

GitHub

10.2k stars381 forks0 contributors

What is Critical?

Critical is a Node.js tool that extracts and inlines critical-path CSS from HTML pages. It identifies the CSS needed to render the above-the-fold content and either outputs it as a separate file or embeds it directly in the HTML, reducing render-blocking and improving page load performance.

Target Audience

Frontend developers and performance engineers working on web projects who want to optimize Core Web Vitals, particularly Largest Contentful Paint (LCP) and First Contentful Paint (FCP).

Value Proposition

Developers choose Critical because it automates a complex performance optimization task, integrates easily into existing build pipelines, and provides fine-grained control over CSS extraction and inlining without manual effort.

Overview

Extract & Inline Critical-path CSS in HTML pages

Use Cases

Best For

Optimizing Core Web Vitals for better SEO and user experience
Reducing render-blocking CSS in static sites and SPAs
Automating critical CSS generation in CI/CD pipelines
Improving First Contentful Paint (FCP) and Largest Contentful Paint (LCP)
Integrating performance optimization into Gulp, Grunt, or Webpack workflows
Generating adaptive critical CSS for responsive designs

Not Ideal For

Web applications with CSS dynamically injected via JavaScript at runtime, such as those using CSS-in-JS libraries or frameworks like Angular with heavy DOM manipulation.
Projects where cross-page CSS caching is critical, as using the 'extract' option generates unique async CSS files per page, hurting cache efficiency.
Teams looking for a zero-configuration, plug-and-play performance tool, since Critical requires manual setup, integration into build systems, and careful option tuning.

Pros & Cons

Pros

Automated CSS Extraction

Critical automatically identifies and extracts above-the-fold CSS from HTML, eliminating manual analysis, as highlighted in its core functionality of reducing render-blocking resources.

Flexible Inlining Options

It allows inlining critical CSS directly into HTML or outputting separate files, with configurable settings for minification and asset handling, demonstrated in the 'inline' and 'target' options.

Responsive Design Support

Supports generating critical CSS for multiple screen resolutions via the 'dimensions' option, ensuring optimized delivery across devices, as shown in the multi-resolution usage example.

Build Tool Integration

Works seamlessly with Gulp, Grunt, Webpack, and CLI, with provided plugins and examples, making it easy to incorporate into existing development workflows.

Cons

Dynamic CSS Limitations

The README admits that for sites with dynamically injected styles (common in Angular apps), accuracy may suffer, recommending direct use of Penthouse instead, indicating a gap in handling runtime CSS.

Caching Trade-offs

Using the 'extract' option creates unique CSS files per page, which can break caching benefits across a multi-page site, as noted in the documentation, potentially increasing load times for returning users.

Configuration Complexity

Requires careful setup of numerous options like viewport dimensions, ignore rules, and asset rebasing, which can be error-prone and time-consuming, especially for developers new to performance optimization.

Frequently Asked Questions

Related Projects

Lazysizes

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

Stars17,733

Forks1,708

Last commit2 years ago

Penthouse

Generate critical css for your web pages

Stars2,681

Forks176

Last commit2 years ago

CriticalCSS

Finds the Above the Fold CSS for your page, and outputs it into a file

Stars1,697

Forks73

Last commit3 years ago

TMI

TMI (Too Many Images) - discover your image weight on the web

Stars1,623

Forks43

Last commit9 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub