# addyosmani/critical

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/addyosmani-critical).**

10,183 stars · 380 forks · JavaScript · apache-2.0

## Links

- GitHub: https://github.com/addyosmani/critical
- awesome-repositories: https://awesome-repositories.com/repository/addyosmani-critical.md

## Topics

`critical-css` `critical-path-css` `critical-path-styles` `css` `inline-css` `inline-styles`

## Description

Critical is a tool for extracting and inlining the minimum CSS required to render above-the-fold content. It identifies the styles necessary for the initial visible portion of a page to reduce render-blocking requests and improve page load speed.

The project generates resolution-specific stylesheets to optimize the initial paint across different device dimensions. It includes a utility to rebase asset URLs within extracted styles, ensuring that images and fonts load correctly when stylesheets are moved to different directories or content delivery networks.

The tool provides a command-line interface for integrating the extraction process into automated build pipelines. It supports excluding specific selectors from being inlined to defer non-essential assets and uses headless browser analysis to match CSS rules against the visible viewport.

## Tags

### User Interface & Experience

- [Above-the-Fold Optimization](https://awesome-repositories.com/f/user-interface-experience/above-the-fold-optimization.md) — Identifies and inlines the minimum styles needed to render the initial visible portion of a page.
- [Critical Style Extraction](https://awesome-repositories.com/f/user-interface-experience/css-styling/critical-style-extraction.md) — Identifies and extracts the minimum styles required to render the above-the-fold content for specific resolutions. ([source](https://github.com/addyosmani/critical/blob/master/pnpm-workspace.yaml))

### Part of an Awesome List

- [Multi-Resolution Generation](https://awesome-repositories.com/f/awesome-lists/devtools/css-optimization/multi-resolution-generation.md) — Generates tailored stylesheets for different screen dimensions to ensure optimal above-the-fold rendering across various devices. ([source](https://github.com/addyosmani/critical#readme))
- [CSS Optimization](https://awesome-repositories.com/f/awesome-lists/devtools/css-optimization.md) — Offers a CLI for extracting styles and automating the removal of render-blocking stylesheets.
- [Scripting and CLI](https://awesome-repositories.com/f/awesome-lists/devtools/scripting-and-cli.md) — Ships a command-line interface for integrating the style extraction process into automated build pipelines.
- [Web Performance Utilities](https://awesome-repositories.com/f/awesome-lists/devtools/web-performance-utilities.md) — Extracts and inlines critical-path CSS.

### Development Tools & Productivity

- [AST Transformation Tools](https://awesome-repositories.com/f/development-tools-productivity/ast-transformation-tools.md) — Provides utilities for parsing and transforming stylesheets via abstract syntax trees to prune unused rules.
- [Resolution-Specific Generation](https://awesome-repositories.com/f/development-tools-productivity/dependency-resolution/stylesheet/resolution-specific-generation.md) — Creates tailored critical CSS for different screen resolutions to ensure optimal rendering across device dimensions.
- [Command Line Interfaces](https://awesome-repositories.com/f/development-tools-productivity/command-line-interfaces.md) — Provides a production-ready command-line application for extracting critical CSS from HTML files. ([source](https://github.com/addyosmani/critical#readme))

### DevOps & Infrastructure

- [Performance Tuning](https://awesome-repositories.com/f/devops-infrastructure/devops/operational-reliability/performance-tuning.md) — Optimizes the responsiveness and speed of the frontend by reducing render-blocking CSS requests.

### Web Development

- [CSS Inlining](https://awesome-repositories.com/f/web-development/css-inlining.md) — Injects extracted critical styles directly into the HTML document to eliminate render-blocking requests. ([source](https://github.com/addyosmani/critical#readme))
- [Headless Browsers](https://awesome-repositories.com/f/web-development/headless-browsers.md) — Uses headless browser engines to render pages and determine which CSS rules are active in the viewport.
- [DOM-Based Style Mapping](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering-utilities/style-extraction-utilities/dom-based-style-mapping.md) — Traverses the rendered page document to map active style declarations back to their source definitions.
- [Static Style Generators](https://awesome-repositories.com/f/web-development/static-style-generators.md) — Functions as a build-time tool that compiles critical styles into static CSS to optimize initial paint.
- [Viewport-Based Style Filtering](https://awesome-repositories.com/f/web-development/viewport-based-style-filtering.md) — Identifies critical styles by matching CSS selectors against DOM elements visible at specific screen resolutions.
- [CSS Build Tools](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/style-optimization-tools/css-build-tools.md) — Provides a build-time engine that scans source files to generate and optimize critical CSS styles.
- [Asset Path Resolvers](https://awesome-repositories.com/f/web-development/asset-path-resolvers.md) — Implements systems for mapping and transforming relative asset links within CSS to valid site URLs.
- [Extraction Workflows](https://awesome-repositories.com/f/web-development/css-preprocessing-workflows/extraction-workflows.md) — Integrates style extraction into build scripts via a CLI to automate critical CSS delivery.