Skip to main content ↑ ↓
Topic: Minifying js (Read 5414 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Minifying js

Maybe not very important and I usually don't look at statistics, but I've had a look at Google Page Insights. It seems like the theme js files can be compressed. It's only few KiBs, but I just thought that I'll let you know here, from my point of view this isn't important.

You can access the live page here

Re: Minifying js

Reply #1 –

Do you have minification / combining activated in the admin panel ?

Re: Minifying js

Reply #2 –

I do now, never seen that option. Proves ElkArte to be great and modern again!

Re: Minifying js

Reply #3 –

Funny thing about google page speed thingy is that js is never compact enough. xD
They always complain about saving 2 bites or so... to me it looks pointless after a certain level. :-\
Bugs creator.
Features destroyer.
Template killer.

Re: Minifying js

Reply #5 –

The minify option included into elkarte is for both css and js "Minify Javascript and CSS files "
sorry for my bad english

Re: Minifying js

Reply #6 –

I covered that option in MESFA addon too. But I haven't got time to look at it for quite some times. Sighed

To note, all forums e.g. elkarte.sch.my or x-mans.sch.my that is using MESFA, got 77/100 score. Not bad at all.
Last Edit: May 15, 2016, 06:31:59 am by ahrasis

Re: Minifying js

Reply #7 –

On yslow I got 87 points on my forum index, on the homepage is a little lower as I got some images resized in html. Not bad ;)
sorry for my bad english

Re: Minifying js

Reply #8 –

That is high. Which forum is that?

Re: Minifying js

Reply #9 –

By the way, talking about minifying css, is there any possibility for us to add css files for addons in that process so they can be compiled together in one combined css rather than injecting them on its own to the respective page header?

Re: Minifying js

Reply #10 –

The easiest way is in your sources do:

Code: [Select]
		loadCSSFile('filename.css');
		loadJavascriptFile('filename.js');
And the system will take it from there ... lots of options on those functions as well, but thats the short and sweet version

Re: Minifying js

Reply #11 –

Thanks spuds. Will test that later. (Hope I don't forget and have time to test the addons with that).

The solution for JS, seems easy. Just add defer to script just before "></script>" like this: " defer></script>".

The following simple but unfinished[1] addon (Defer.v100) can do the trick too.

To cover leverage expiry thingy, do enable mod_expires in your server. Then add this to your htaccess:
Code: [Select]
# BEGIN Expire headers
<ifModule mod_expires.c>
	# Add correct content-type for fonts
	# AddType application/vnd.ms-fontobject .eot
	AddType application/x-font-ttf .ttf
	AddType application/x-font-opentype .otf
	AddType application/x-font-woff .woff
	AddType image/svg+xml .svg

	# Compress compressible fonts
	#  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

	ExpiresActive on

	# Add a far future Expires header for fonts
	# ExpiresByType application/vnd.ms-fontobject "access plus 2592000 seconds"
	ExpiresByType application/x-font-ttf "access plus 2592000 seconds"
	ExpiresByType application/x-font-opentype "access plus 2592000 seconds"
	ExpiresByType application/x-font-woff "access plus 2592000 seconds"
	ExpiresByType image/svg+xml "access plus 2592000 seconds"

	ExpiresDefault "access plus 5 seconds"
	ExpiresByType image/x-icon "access plus 2592000 seconds"
	ExpiresByType image/jpeg "access plus 2592000 seconds"
	ExpiresByType image/png "access plus 2592000 seconds"
	ExpiresByType image/gif "access plus 2592000 seconds"
	ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
	ExpiresByType text/css "access plus 604800 seconds"
	ExpiresByType text/javascript "access plus 648000 seconds"
	ExpiresByType application/javascript "access plus 648000 seconds"
	ExpiresByType application/x-javascript "access plus 648000 seconds"
	ExpiresByType text/html "access plus 600 seconds"
	ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

The above have increased the speed score for both mobile and desktop  to 85 and 95 respectively.
1 unfinished as I intend to add htaccess injection to cover leverage expiry thingy...↵

Re: Minifying js

Reply #12 –

TBH I'm not so sure deferring everything is a good idea: most of the scripts (still) rely on inline javascript and may expect some code to be run in the js files present in the head to the page, so defer these script may cause issues.
Bugs creator.
Features destroyer.
Template killer.

Re: Minifying js

Reply #13 –

It was suggested that defer is what google pagespeed prefers but we can change that to async [1]. I will update the simple addon later.

Those who have access to their server might want to try this as well: https://developers.google.com/speed/pagespeed/module/download
1 I think async will also work as well↵