Most advanced optimization software such as critical path CSS creation are easiest to use using a build tool such as Grunt.js and Gulp.js. While those build tools make it easy to use professional software for experienced developers, most average WordPress users will not be able to use them and thus have no access to professional optimization software.

This WordPress based build tool builder enables professional critical path CSS creation via critical (by a Google engineer) using the build tool Gulp.js.

Create a Gulp.js Critical CSS Task Package Task Name The task name is used as task command and as subdirectory (/theme/abovethefold/task-name/). Page Home Page (index) Select a page for which to create critical path CSS. Responsive Dimensions <?php if ($dimensions) { print $this->CTRL->admin->newline_array_string($dimensions); } ?> Enter one or more responsive dimensions for which to generate critical path CSS. Format: 800x600. One dimension per line. The result is combined and compressed. (more info). Append extra.css > Enabled Add a file extra.css to the package to be appended to the critical path CSS. The combined result is minified to prevent overlapping CSS. Update Critical CSS >Do not update (store result in /package/output/) >Overwrite global Critical CSS CTRL->criticalcss->get_theme_criticalcss(); if ($criticalcss_files && count($criticalcss_files) > 1) { print ''; foreach ($criticalcss_files as $file => $config) { if ($file === 'global.css') { continue 1; } print 'Overwrite '.htmlentities($file . ' - ' . $config['name'], ENT_COMPAT, 'utf-8').''; } print ''; } else { print 'Conditional Critical CSS is disabled'; } ?> Use this option to automatically update WordPress Critical CSS.

Warning: No build tool support is provided via the WordPress support forum! Bugs, software or build tool conflicts occur often and may be OS, Node-software or dependency (version) related. It often is complex, even for the most experienced developer. Please seek help via the (Github) support forums of relevant software. This build tool builder simply relies on 'the latest version' and does not consider bugs or conflicts in the latest software.

Install package Download package (zip)

How to use 

This WordPress tool creates Gulp.js Critical Path CSS Cenerator Task Packages that make it easy to create professional quality critical path CSS for individual pages.

Getting started

Step 1: Follow the installation instructions

Step 2: create a Critical CSS Task Package

Step 3: start a command line prompt or SSH shell, navigate to /wp-content/themes/THEME_NAME/abovethefold/ and run the task, e.g. gulp task-name.

Test the quality of the created critical path CSS using the Critical CSS Quality Test and optionally use the file extra.css to fix problems in the generated Critical Path CSS.

Installation 

Requirements: 

• A regular PC (Windows, Mac or Linux) with command line.
• The installation of Node.js (click here for a how-to).
• The installation of Gulp.js (npm install --global gulp-cli).

The installation of the WordPress Gulp.js Critical Path CSS Generator is required just once for your theme. NPM (Node.js Package Manager) will read the dependencies from package.json and will install them in the /abovethefold/ directory.

Step 1: download package.json and gulpfile.js and upload the files to /wp-content/themes/THEME_NAME/abovethefold/. Alternatively click "Auto install" (this will copy the files to your theme directory).

buildtool->is_installed()) { print '✓ Installed '; } else { print 'Auto install '; } ?> Download package.json & gulpfile.js

Step 2: start a command line prompt or SSH shell and navigate to /wp-content/themes/THEME_NAME/abovethefold/.

Step 3: run the command npm install.

If there are errors during installation you will not be able to get support via the WordPress support forums.
Please seek help in platform or software related support forums, for example Github.

More Optimizations

There are many other WordPress optimizations that can be performed via Grunt.js or Gulp.js, for example Google WebP image optimization, uncss (unused CSS stripping), CSS data-uri (CSS images) and more. Search Google for more information.