A WordPress plugin for Themosis that implements
kalfheim/critical-css to generate
critical CSS in WordPress. You'll need to have wp-cli setup to run it, and it'll
also need to be present in production to new/changed posts. Also relies on keltiecochrane/themosis-illuminate implementation of config and files, and uses
keltiecochrane/themosis-logger for logging.
It will generate CSS for mobile, tablet and desktop devices, which will be served
as appropriate by browser sniffing. It will automatically modify style tags to
set them to rel="preload" and uses loadCSS to polyfill browsers that don't
support preloading.
This plugin will set a cookie to determine users that have/haven't been served the CSS previously (to avoid inflated page loads for users that have a cached copy of your CSS.) You may need to add a notice or override this functionality as is appropriate to local laws regarding cookies.
From your projects base path run: -
npm install critical --save
Require the package in composer: -
composer require keltiecochrane/themosis-criticalcss
Copy the config/criticalcss.php file into your config folder.
Activate the plugin in WordPress.
You'll need to have wp-cli installed, to generate CSS run: -
wp critical-css generate
To clear generated CSS run: -
wp critical-css clear
This plugin is provided as is, though we'll endeavour to help where we can.
Any contributions would be encouraged and much appreciated, you can contribute by: -
- Reporting bugs
- Suggesting features
- Sending pull requests