CSSPro User Guide

Welcome to CSSPro—your solution for unlocking real above-the-fold speed in PrestaShop.

Features of CSSPro

  • True Above-the-Fold Optimization: Automatically prioritizes critical CSS for faster first paint, improving user experience and boosting Core Web Vitals.
  • Automatic CSS Discovery: Detects every CSS file loaded on your shop as you browse, so you always have a complete and up-to-date list—no guesswork.
  • Resource & Priority Hints: Add modern browser hints like preload and fetchpriority with a click—no code required.
  • Stealth Mode Testing: Safely test all settings without impacting live visitors. Make changes confidently, then go live when you’re ready.
  • Ignore Unused CSS: Instantly stop loading unused stylesheets by toggling a column—keep your shop lean and lightning fast.
  • One-Click Refresh: Update your CSS file list instantly after design or theme changes—no manual intervention needed.
  • Totally transparent to all your theme and module CSS: Works in harmony with any theme or module—no conflicts, no surprises.
  • Expert Support: Backed by the PrestaHeroes team with years of performance optimization and hands-on assistance.

Basic Installation & Setup

  1. Install the Module
    Go to your PrestaShop Back Office.
    Navigate to Modules > Module Manager.
    Click Upload a Module and select the CSSPro module zip file.
    Complete installation.
  2. Disable PrestaShop Smart Cache for CSS
    Go to Advanced Parameters > Performance.
    Under the “CCC (Combine, Compress and Cache)” section, set Smart cache for CSS to No (disabled).
    Click Save.
    Why? CSSPro optimizes CSS delivery on its own. PrestaShop’s built-in smart cache can conflict with these optimizations.
  3. Configure CSSPro
    Return to Modules > Module Manager.
    Find and open the CSSPro configuration and click the Settings tab.
    • Stealth Mode – CSSPro is in Stealth Mode by default—no changes are visible to customers until you activate and configure.
    • Settings: Resource Hint – Locate the "Resource Hint" field for newly discovered CSS files and set the default value to Preload.
    • Settings: Priority Hint – Optionally, update Priority Hint from “PS Default” to Auto Load High (fetchpriority attribute).

Scan Your Shop

  1. In order for CSSPro to know which .css files are used in your shop:
  2. Visit your front office and navigate to each page in your shop: Home, Category, Product, Checkout, About Us, etc. (click through each page as a customer would).
  3. Return to the CSSPro module dashboard and click Refresh.
  4. Displayed are the .css files discovered to be in use.
  5. The displayed .css should have Preload in the Resource Hint column. If not, simply select "Preload" from the dropdown menu for that file.

Discovering and Managing CSS Files

  1. Browse Your Shop
    Visit your front office (the public side of your shop).
    Manually navigate to each major page type: Home, Category, Product, Checkout, About Us, and any other important pages.
    (Simply click through each page as a customer would.)
  2. Return to CSSPro Dashboard
    Go back to the CSSPro module dashboard in your Back Office.
    Click Refresh.
  3. Review Discovered CSS
    CSSPro will display a list of all .css files it has found being used across your shop.
  4. Set Preload (if needed)
    Check that each displayed CSS file has “Preload” set in the Resource Hint column.
    If not, simply select “Preload” from the dropdown menu for that CSS file.
  5. When Finished Testing:
    Go to the module settings.
    Disable Enable Simulator to complete the setup and transition out of testing mode.
    You’re welcome!

And If That’s Not Enough! Ignore Select .css Files

CSSPro gives you full control: you can ignore specific CSS files.

If you know there are certain .css files being called that are not actually used by your shop, you can tell CSSPro to ignore them. This keeps your resource loading list clean and lean—no more wasted requests for unused styles.

  • How to Ignore a CSS File:
    In the CSSPro dashboard, simply select “True” in the Ignore column for any .css file you no longer want to load.
Remember: While in Stealth Mode, any changes you make (including ignoring files) will not affect other visitors to your front office. You can safely experiment and optimize without risk!

Validate Your Front Office

  1. Test Your Shop
    Visit your shop’s front office as a customer.
    Browse several key pages (Home, Category, Product, Checkout, etc.) to make sure everything looks and works as expected.
  2. Verify Preloads and Fetch Priority in Page Source
    On any front office page, right-click and select View Page Source (or use your browser’s menu).
    In the <head> section, look for new <link rel="preload" ...> tags for your CSS files. These are automatically placed by CSSPro and signal that the browser is now preloading your critical stylesheets.
    If you have set the Priority Hint to something other than the PrestaShop default (“none”), such as Auto Load High, check that your preload tags include the fetchpriority attribute.
    For example:
    <link rel="preload" href="/themes/yourtheme/assets/theme.css" as="style" fetchpriority="high">
    This confirms that CSSPro is not only preloading your CSS but also instructing the browser to treat these styles as a high loading priority.
Tip: If you don’t see the expected preload or fetchpriority attributes, double-check your CSSPro settings and refresh the module dashboard to ensure all changes have been applied.

Next Steps

You’re now ready to explore advanced options, tune performance, and watch your site’s real-world speed improve.

Tip: CSSPro is designed to be robust and production-ready. If you need help, our support team is here—just reach out via your PrestaHeroes dashboard.