New plugin

We have published a new plugin for Critical CSS optimization. It is advised to use the new plugin for access to the latest technologies and long term support.

Install new plugin

Critical Path CSS is the minimum CSS required to render above the fold content. Please read the documentation by Google before you continue.

This article by a Google engineer provides information about the available methods for creating critical path CSS. This blog (with video) by two Google engineers provides information about the essence of Critical Path CSS creation.

Tip: If you notice a Flash of Unstyled Content (FOUC), use the Quality Test-tab to fine tune the critical path CSS for a perfect above the fold display.

Critical Path CSS

<head> of the page.', 'abovethefold'); ?>

For the creation of Critical Path CSS you need the full CSS of a page. This tool allows you to extract the full CSS from any url and optionally to select the specific CSS files you want to extract.

You can quickly output the full CSS of any url by adding the query string ?extract-css=&output=print.

Custom Critical CSS Condition

You can add a custom critical CSS condition using a filter function. For example, if you want to add critical CSS for blog category X, you can use the following filter function.

/**
 * Custom Critical Path CSS Condition
 *
 * @plugin Above The Fold Optimization
 * @link https://wordpress.org/plugins/above-the-fold-optimization/
 */
function my_critical_css_condition( $params = array() ) {

	// Category X?
	if (is_category('x')) {
		return true; // match
	}

	return false; // no match
}

To add the condtion to a critical CSS file, type filter:my_critical_css_condition in the condition search field. You can add a comma separated list with JSON encoded values to be passed to the filter $params by appending :1,2,3,"variable","var". The filter function should return true or false.