Minifying CSS and JavaScript in Odoo: Faster Load Times

The Load Time Problem

Your D2C brand spends thousands on Google Ads to drive traffic. A customer clicks your link. The page turns white. They wait. 1 second. 2 seconds. 3 seconds.

They bounce.

The Culprit: Your Odoo website is loading 45 separate JavaScript files and 30 CSS sheets individually. The browser has to open 75 different connections just to render the homepage.

The Solution: Odoo's built-in Assets Bundle system. It crushes those 75 files into 1 JavaScript file and 1 CSS file. It compresses them (minification) to remove whitespace and comments.

Result: The browser downloads 2 small files. The site loads instantly. Your conversion rate goes up.

How Odoo Handles Assets (The Bundle)

Odoo uses a proprietary asset engine (inherited from ir.attachment and ir.asset). It doesn't use Webpack or Gulp; it uses its own Python-based logic.

The Workflow

Configuration: The __manifest__.py

In Odoo 15+, asset registration moved strictly to the __manifest__.py file (replacing the old XML <template id="assets_backend"> method).

# __manifest__.py
{
    'name': 'My D2C Theme',
    'version': '1.0',
    'depends': ['website', 'sale'],
    'assets': {
        # 1. Frontend Bundle (The Website)
        'web.assets_frontend': [
            # SCSS Variables first (so they override Bootstrap)
            'my_theme/static/src/scss/primary_variables.scss',
            # Main SCSS
            'my_theme/static/src/scss/header.scss',
            'my_theme/static/src/scss/product_page.scss',
            # JavaScript
            'my_theme/static/src/js/cart_animation.js',
            'my_theme/static/src/js/variant_selector.js',
        ],
        
        # 2. Backend Bundle (The ERP Interface)
        'web.assets_backend': [
            'my_theme/static/src/js/custom_widget.js',
            'my_theme/static/src/scss/backend_overrides.scss',
        ],
        
        # 3. Report Bundle (PDFs)
        'web.report_assets_common': [
            'my_theme/static/src/scss/invoice_layout.scss',
        ],
    },
}

Activating Minification in Production

Minification is OFF by default when:

To Ensure Speed in Production

1. Disable Debug Mode:

Ensure your users (and public visitors) are accessing https://yourwebsite.com, not https://yourwebsite.com?debug=assets.

2. Check odoo.conf:

Look for the dev_mode flag. It should be empty or strictly managed.

# odoo.conf
# Ensure this is NOT set to 'all' or 'assets' in prod
dev_mode = 

3. Regenerate Bundles:

If you deploy new code and the site looks "broken" (CSS missing), the bundle might be stuck.

Troubleshooting "Asset Bundle Errors"

Every Odoo developer has seen this. You load the page, and a modal pops up: "Could not compile style sheet."

Common Causes

Advanced: Using defer and Lazy Loading

For heavy JavaScript libraries (like a 3D product viewer or a Chat widget), don't put them in the main web.assets_frontend. That blocks the initial page paint.

Method 1: Defer via XML

If you inject a script in the header:

<script type="text/javascript" 
        src="/my_module/static/lib/three.min.js" 
        defer="defer"/>

Method 2: Dynamic Import (OWL/ES6)

Load the library only when the component mounts.

/** @odoo-module */
import { loadScript } from "@web/core/assets";

export class Product3DViewer extends Component {
    setup() {
        onWillStart(async () => {
            // Only downloads the 1MB file when this specific widget is needed
            await loadScript("/my_module/static/lib/three.min.js");
        });
    }
}

Your Action Items

Audit Your Manifests

Check Production Mode

Analyze Size