I don't understand why minifying slows things down

Question

This might be my mistake somewhere, but anyway, I am using the fat free framework which has an inbuilt function to minify multiple css/js into a single file, and I thought that this would be good for optimization, but it turns out the opposite. If I keep the js files separately(and they are at the end of my html), the total size if added, comes to around 364kb, and seems to load in parallel within 1.5 secs. If I try to load the combined version however, the single file size becomes around 343kb, but takes around 10secs to load.

My minifying logic is a bit different though. First in the template I call a function to load the files:

<script type="text/javascript" src="{{ @BM->minify('js','js/',array(
                                    'vendor/jQui/jquery-ui-1.10.4.custom.min.js',
                                    'vendor/datatables/jquery.dataTables.min.js',
                                    'vendor/bootstrap.min.js',
                                    'vendor/smartmenus-0.9.5/jquery.smartmenus.min.js',
                                    'vendor/smartmenus-0.9.5/addons/bootstrap/jquery.smartmenus.bootstrap.min.js',
                                    'vendor/smartmenus-0.9.5/addons/keyboard/jquery.smartmenus.keyboard.min.js',
                                    'plugins.js',
                                    'main.js'
                                )) }}"></script>

The function sets the appropriate session variables and returns a path.

public function minify($type='',$folderpath='css/',$files=array()){
        $filepaths = implode(",",$files);
        $this->f3->set('SESSION.UI_'.$type,$this->themeRelFolder().'/'.$folderpath); 
        $this->f3->set('SESSION.ReplaceThemePath_'.$type,$this->themeRelFolder());
        $this->f3->set('SESSION.m_'.$type,$filepaths);
        return($this->f3->get('BASE').'/minify/'.$type);
    }

The path maps to a controller which calls the minify method and spits out the actual minified content.

public function index($f3, $params) {
        $f3->set('UI',$f3->get('SESSION.UI_'.$params['type'])); 
        if($params['type']=='css'){
            echo str_replace("<<themePath>>","../".$f3->get('SESSION.ReplaceThemePath_'.$params['type'])."/",\Web::instance()->minify($f3->get('SESSION.m_'.$params['type'])));
        }else
        {
            echo \Web::instance()->minify($f3->get('SESSION.m_'.$params['type']));
        }
    }

I did it this way so that I can minify as many files as the template needed, and also be able to maintain file paths no matter what folder nesting structure inside a theme.

What am I doing wrong?

PS: I am testing this on my local wamp setup, not an actual server, so the load times are obviously different than a actual web server.

Answer 1

Seems like the engine is re-minifying every time. I'll bet you just need to setup caching - http://fatfreeframework.com/web#minify :

To get maximum performance, you can enable the F3 system caching and F3 will use it to save/retrieve file(s) to minify and to save the combined output as well. You can have a look at the Cache Engine User Guide for more details.

http://fatfreeframework.com/quick-reference#cache :

Cache backend. F3 can handle Memcache module, APC, WinCache, XCache and a filesystem-based cache.

For example: if you'd like to use the memcache module, a configuration string is required, e.g. $f3->set('CACHE','memcache=localhost') (port 11211 by default) or $f3->set('CACHE','memcache=192.168.72.72:11212').

Answer 2

You're making it minify those files on the fly every single time a page is loaded. This, obviously, takes time.

Consider minifying once, then just linking to that one file.