This plugin enables to pass the "Eliminate render-blocking JavaScript and CSS in above-the-fold content"-rule from Google PageSpeed Insights.
https://wordpress.org/plugins/above-the-fold-optimization/
The functionality of this plugin is simple and light-weight. The plugin simply inserts Critical Path CSS code inline, helps to create it and optionally optimizes the delivery of the full website CSS.
The plugin is intended to work together with other optimization plugins such as W3 Total Cache and Autoptimize.
Note: The plugin is intended to achieve the best possible result, not easy usage. It is intended for advanced WordPress users and optimization professionals.
The plugin enables automated Critical Path CSS generation via Penthouse.js. The plugin will execute Penthouse.js to generate Critical Path CSS for multiple responsive dimensions and pages. It then combines the resulting CSS-code and then compresses the CSS-code via Clean-CSS.
The plugin enables the extraction of full CSS from pages for use in critical path CSS generation.
The plugin enables the localization of external javascript resources such as Google Analytics and Facebook SDK to pass the "Leverage browser caching"-rule from Google PageSpeed Insights.
When the option Optimize CSS Delivery is enabled all CSS links are loaded asynchronously via an optimized version of LoadCSS and rendered via requestAnimationFrame API following the recommendations by Google.
The following demo is an original WordPress blog v4.4.2 with the default theme, Autoptimize javascript and CSS optimization, W3 Total Cache for full-page cache and the Above The Fold Optimization plugin. Using just these 3 plugins it is possible to achieve a PageSpeed 100-score.
https://abovethefold.optimalisatie.nl/
- Upload the
above-the-fold-optimization/directory to the/wp-content/plugins/directory - Activate the plugin through the 'Plugins' menu in WordPress
- Navigate to the plugin settings-page
- Generate Critical Path CSS
To make use of automated Critical Path CSS generation it is required to install the following software on the server:
- PhantomJS:
npm install -g phantomjs - Clean-CSS:
npm install -g clean-cssFrom theabove-the-fold-optimization/directory: npm install
To be able to generate Critical Path CSS from within the WordPress admin the software needs to be executable from PHP which may pose a security risk. An alternative option is to generate a CLI command to execute via SSH.
(C) www.optimalisatie.nl 2014–2016, released under the MIT license