Eliminate .css Render Blocking with Preload

cssPro enables elimination of render-blocking .css files with the implementation of the 'preload' Resource Hint to all or select .css files utilized in your store. Additionally, it provides advanced users with Priority Hints such as 'low,' 'high' and 'auto.'

Integrate the module into your active e-commerce environment using the included A/B testing toolset for efficient setup and configuration. 

Provides the following benefits:

A lightweight solution for improving web performance, cssPro eliminates render-blocking css to enhance user experience and provide fast loading content. A must-have for any website looking to stay competitive in an ever-evolving digital marketplace.

• Improve the blink rate score (above the fold) significantly with cssPro.
• Enhance user's experience with accelerated accessibility.
• Optimize your site's performance to accentuate SEO ranks organically.

Features

Dashboard

The DashBoard presents a comprehensive overview of .css embedded in your shop via themes and modules.

Resource Hints:

• preload Preload lets you tell the browser about critical resources you want to load early before they are discovered naturally and are included in the header.
• none The .css file(s) impede loading in the browser until fully downloaded.
• New Module Supports Ignore option to bypass load of specific .css file.

Priority Hints:

• low | high | auto fetchpriority  

Configuration Settings

A/B Testing

Utilize the Simulator to adjust and evaluate .css load variables prior to launch.

Email Alerts

Once enabled, cssPro will generate notifications when new .css appear.

Default Settings for newly discovered .css files

Specify default Resource and Priority Rules for newly encountered JavaScript.

Installation

1. Shop Backoffice->Module Manager-->Upload a module-->upload cssPro-->Configure
2. At installation cssPro enables the a/b testing to IP of admin installing it. 

Configuration:

1. Disable CCC of .css files from admin-->performance page
2. Open your front office and navigate through shops different page types (index/category/product/design pages/login/account/cart processing etc.
3. Refresh cssPro DashBoard to see newly discovered .css files.
4. Add preload to your .css files either individually or using bulk option.
5. Our research has revealed that, in cases of front end malfunctions, disabling 'preload' for theme.css solves the issue.
6. When ready for deployment, simply deactivate the a/b feature in the module settings.