Easily Minify Your CSS and JS in Symfony with SensioLabs Minify Bundle

Page load speed directly affects your bottom line. According to RetailTouchPoints, a single second of delay reduces conversions by 7% and drops customer satisfaction by 16%.

Honestly, I always felt like having a slow website caused more damage than that. Anyway, no one wants a slow site. Fast websites feel better.

If your site is slow, minifying your CSS and JavaScript is an easy win. Minification strips out unnecessary whitespace and comments, reducing file size without changing functionality.

The easiest way I have found to minify css and javascript in Symfony is the Sensio Labs Minify Bundle. This bundle makes it so incredibly easy to minify your javascript and css that it's virtually no effort on your part.

To use MinifyBundle you will need be using Symfony AssetMapper. To install Minify Bundle run this: composer require sensiolabs/minify-bundle

After you install it, MinifyBundle works by downloading a binary and minifying your js and css. Its very simple. When you run php bin/console asset-map:compile minify bundle will now automatically minify your css and js.

However, I do have one caveat. The docs say that the minified js and css will only be served in prod mode,(after you run assetmap:compile) but that wasn't my experience. You will probably want unminfied css and js during dev mode so you can read it. Here is how I got unminified css/js in DEV mode, but minfied in PROD mode:

sensiolabs_minify:
    asset_mapper:
        # Exclude already minified assets
        ignore_paths:
            - '*.min.js'
            - '*.min.css'
    minify:
        # Use local binary if available
        # binary_path: 'auto'

        # Specify local binary path
        # binary_path: '/usr/bin/minify'

        # Download binary from GitHub
        download_binary: true

when@test:
    sensiolabs_minify:
        asset_mapper:
            enabled: false
when@dev:
    sensiolabs_minify:
        asset_mapper:
            enabled: false

I'm on Symfony 8.0.6, so I'm sure in future versions, the recipe will install it as expected, and js and css won't be minfied in dev mode. Please remember to get it to work in PROD mode, you have to run assetmap:compile first.

Thanks,
John