addyosmani/critical
Critical
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.
Features
- Above-the-Fold Optimization - Identifies and inlines the minimum styles needed to render the initial visible portion of a page.
- Multi-Resolution Generation - Generates tailored stylesheets for different screen dimensions to ensure optimal above-the-fold rendering across various devices.
- AST Transformation Tools - Provides utilities for parsing and transforming stylesheets via abstract syntax trees to prune unused rules.
- Resolution-Specific Generation - Creates tailored critical CSS for different screen resolutions to ensure optimal rendering across device dimensions.
- Performance Tuning - Optimizes the responsiveness and speed of the frontend by reducing render-blocking CSS requests.
- Critical Style Extraction - Identifies and extracts the minimum styles required to render the above-the-fold content for specific resolutions.
- CSS Inlining - Injects extracted critical styles directly into the HTML document to eliminate render-blocking requests.
- Headless Browsers - Uses headless browser engines to render pages and determine which CSS rules are active in the viewport.
- DOM-Based Style Mapping - Traverses the rendered page document to map active style declarations back to their source definitions.
- Static Style Generators - Functions as a build-time tool that compiles critical styles into static CSS to optimize initial paint.
- Viewport-Based Style Filtering - Identifies critical styles by matching CSS selectors against DOM elements visible at specific screen resolutions.
- CSS Build Tools - Provides a build-time engine that scans source files to generate and optimize critical CSS styles.
- Scripting and CLI - Ships a command-line interface for integrating the style extraction process into automated build pipelines.
- Command Line Interfaces - Provides a production-ready command-line application for extracting critical CSS from HTML files.
- Asset Path Resolvers - Implements systems for mapping and transforming relative asset links within CSS to valid site URLs.
- Extraction Workflows - Integrates style extraction into build scripts via a CLI to automate critical CSS delivery.
- CSS Optimization - Extract and inline critical CSS for faster rendering.
- Web Performance Utilities - Extracts and inlines critical-path CSS.
