How to Use the ShortPixel Critical CSS Plugin on Your Site

Generating critical CSS on your site can help improve front-end performance and remove float issues. Being able to generate critical CSS quickly can be painful if handled manually, or the process can be slow if run locally.

There is a new stand-alone plugin for critical CSS generation from ShortPixel. After the plugin has been installed and activated on your site, you will need to add the ShortPixel API, which you can grab from your ShortPixel account. The API key and the settings can be configured in wp-admin from:

Settings > SP Critical CSS

You can cache Critical CSS for templates if you have a lot of content on your site. The critical CSS will be regenerated automatically from cron events on your site.

wp_shortpixel_critical_css_api_cron > runs every 1 minute
wp_shortpixel_critical_css_web_check_cron > runs every 1 minute
shortpixel_critical_css_purge_log > non-repeating

Also, depending on how often content or changes are made on the site, you can set the web check interval, and CSS selectors can be added to include those styles as part of the critical CSS generation.

Another performance improvement included is to lazyload CSS files which will improve front-end performance on the site.

The plugin is currently in beta and is 100% free to use. The ShortPixel Critical CSS plugin and service integrate with WP Rocket and Elementor plugins. The only caching plugin that the plugin currently works with is WP Rocket.

Useful Links

• https://wordpress.org/plugins/shortpixel-critical-css/
• https://shortpixel.com/knowledge-base/
• https://shortpixel.com/show-api-key
• https://wp-rocket.me/blog/critical-css/