On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • This extra is a MODx version of SmartOptimizer by Ali Farhadi :

    " SmartOptimizer (previously named JSmart) is a PHP library that enhances your website performance by optimizing the front end using techniques such as minifying, compression, caching, concatenation and embedding. All the work is done on the fly on demand. "

    To know more about SmartOptimizer : http://farhadi.ir/works/smartoptimizer

    Documentation: http://rtfm.modx.com/display/ADDON/SmartOptimizer
    Package : http://modx.com/extras/package/smartoptimizer
    Github : https://github.com/omycode/smartoptimizer

    There is 3 different ways to use SmartOptimizer :

    #1 : Using the snippet SmartOptimizer


    Replace :
    <link rel="stylesheet" href="assets/css/file1.css"/>
    <link rel="stylesheet" href="assets/css/file2.css"/>
    <script src="assets/js/file.js"></script>
    By :
    <link rel="stylesheet" href="[[SmartOptimizer? &files=`assets/css/file1.css,file2.css`]]"/>
    <script src="[[SmartOptimizer? &files=`assets/js/file.js`]]"></script>



    #2 : Using the output filter smartoptimizer


    Replace :
    <link rel="stylesheet" href="[[+link_to_css]]"/>
    <script src="[[+link_to_js]]"></script>
    By :
    <link rel="stylesheet" href="[[+link_to_css:smartoptimizer]]"/>
    <script src="[[+link_to_js:smartoptimizer]]"></script>


    #3 : Using an .htaccess


    Add this at the end of your .htaccess :

    <IfModule mod_expires.c>
    	<FilesMatch "\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt|ico)$">
    		ExpiresActive On
    		ExpiresDefault "access plus 10 years"
    	</FilesMatch>
    </IfModule>
    <IfModule mod_rewrite.c>
    	RewriteEngine On
    	
    	RewriteCond %{REQUEST_FILENAME} !-f
    	RewriteCond %{REQUEST_FILENAME} !-d
    	RewriteRule ^(.*\.(js|css))$ assets/components/smartoptimizer/connector.php?$1
    	
    	<IfModule mod_expires.c>
    		RewriteCond %{REQUEST_FILENAME} -f
    		RewriteRule ^(.*\.(js|css|html?|xml|txt))$ assets/components/smartoptimizer/connector.php?$1
    	</IfModule>
    
    	<IfModule !mod_expires.c>
    		RewriteCond %{REQUEST_FILENAME} -f
    		RewriteRule ^(.*\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt|ico))$ assets/components/smartoptimizer/connector.php?$1
    	</IfModule>
    </IfModule>
    <FilesMatch "\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt|ico)$">
    	FileETag none
    </FilesMatch>


    If you enabled friendly URLs, add also :
    RewriteCond %{REQUEST_FILENAME} !(\.css)$
    RewriteCond %{REQUEST_FILENAME} !(\.js)$
    Before :
    RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]


    Finally, call your stylesheets and scripts this way :
    <link rel="stylesheet" href="assets/css/file1.css,file2.css"/>
    <link rel="stylesheet" href="assets/css/file1.css,file2.css"/>
    [ed. note: ben_omycode last edited this post 7 years, 10 months ago.]
    • Great =), have to test it (I'm using booster @ https://github.com/Schepp/CSS-JS-Booster right now with modx for the same purpose, but the integration is not very nice [because I made it...]).

      how about passing a whole folder as &files=`assets/js` ?? would that work, if not, how could this be added?

      Another technical question: Does SmartOptimizer also the dataURI stuff with css images?
      • Thanks lluuuk, all the credit goes to Ali !

        1/ No you can't pass a whole folder but you can pass several files of the same folder :
        [[SmartOptimizer? &files=`assets/css/file1.css,file2.css`]]

        2/ Yes SmartOptimizer can embed images. You can enable this feature in the system settings.
        • Maybe this is a question for the author of SmartOptimizer, but is there any way to prevent it from fiddling with URLs in the stylesheets. For some reason, SmartOptimizer prepends all my URLs with the web root value (or something like that), so instead of getting
          #selector {background-image: url(/gui/img/file.png);}

          I get
          #selector {background-image: url(/web/users/name//gui/img/file.png);}


          smartoptimizer.base_dir is empty in the system settings and I have also tried using only a / for value, to no avail.
          • Having a similar issue here.

            I created an issue for this bug at https://github.com/omycode/SmartOptimizer/issues/1

            Would love to get this working.
            • @frippz, @MokoJumbie :
              Indeed I think path were prepared for embedding even if the functionality was disabled. I fixed it in version 1.0.0-beta2 : http://modx.com/extras/package/smartoptimizer
              • I think it is not working with relative urls in the css-files.
                • @chrisissorry :
                  Ben is sorry too wink I answered on GitHub : https://github.com/omycode/SmartOptimizer/issues/1#issuecomment-3446454
                  • Great Plugin! Got it working except for embedding css image files sad

                    As far as I understand, smartOptimizer is able to embed images called from a css file, into? the css file, right? Except for sprites. So setting 'smartoptimizer.embed' to 'true' and optionally 'smartoptimizer.embed_max_size' to '0' should do it. And those images wouldn't generate http requests anymore.

                    Did all that, yet all the css images are still requested individually. Am I missing something?

                    SmartOptimizer Beta 3.0.0 (htaccess method + FURL)
                    Revo 2.2.0-pl2
                    MAMP
                    • I'm having to retrospectively optimize a website for performance. I have a large number of JS files to concat and minifiy.

                      I'm noticing a few issues during minification and concat with errors in the JS. Is there a max limit on the number of files/size of files that can be processed by this Package?

                      Also would re-minifiying scripts that have been downloaded in their minified form cause issues?

                      Any help much appreciated.