Prioritize Critical CSS

Benefits

This optimization improves page render times by identifying CSS rules needed to render the page, inlining those critical rules and deferring the load of the full CSS resources.

prioritize_critical_css parses the CSS and replaces it with inlined CSS that contains only the rules used on the page. This avoids any blocking CSS requests needed for the initial render. It also collects all CSS tags and appends them to the HTML in the same order they were found. This will make all style rules available after page load.

Deferring style rules that are not used by the document delays downloading unnecessary bytes and allows the browser to start rendering sooner

Configuration

Enable pagespeed EnableFilters prioritize_critical_css
Disable pagespeed DisableFilters prioritize_critical_css

Requirements

prioritize_critical_css computes critical CSS only if the corresponding CSS file is "public" cacheable.

Limitations

This optimization cannot compute critical CSS for CSS files under IE conditional comments and is disabled if it detects an IE user agent.

Risk Classification

Moderate

prioritize_critical_css optimization is moderate risk. It should be safe for most pages, but it could potentially cause reflow of the page. If different content (with substantially different styles) is served for the same URL based on cookies, IP, user agent, etc., then this optimization could potentially show unstyled content before it loads the page completely, or in certain cases it could break rendering completely.

prioritize_critical_css optimization adds inlined CSS to the HTML, increasing its size. The overhead of the extra inlined CSS can outweigh the benefit if the CSS resources are already in the browser's cache. However it will still benefit from faster processing of the CSS in the browser.

Example

soon available