Support/Comments for SmartOptimizer

76 Posts

Ben Reply #1, 12 years, 9 months ago

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 12 years, 9 months ago.]

534 Posts

exside Reply #2, 12 years, 8 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?

76 Posts

Ben Reply #3, 12 years, 8 months ago

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.

109 Posts

frippz Reply #4, 12 years, 8 months ago

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.

81 Posts

MokoJumbie Reply #5, 12 years, 8 months ago

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.

76 Posts

Ben Reply #6, 12 years, 8 months ago

@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

65 Posts

chrisissorry Reply #7, 12 years, 8 months ago

I think it is not working with relative urls in the css-files.

76 Posts

Ben Reply #8, 12 years, 8 months ago

@chrisissorry :
Ben is sorry too wink

I answered on GitHub : https://github.com/omycode/SmartOptimizer/issues/1#issuecomment-3446454

36 Posts

yogoo Reply #9, 12 years, 6 months ago

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

3 Posts

getdave Reply #10, 12 years, 2 months ago

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.