Ideas about automatic css/js compression

[Alexander Obuhovich]

Together with Sergey G. we came across very elegant and simple implementation (doesn't exist yet) of solving problems with large javascript, css files being sent on every page load.
 
Instead of
<script type="text/javascript" src="<inp2:m_TemplatesBase/>js/script.js"></script>
we should use
<script type="text/javascript" src="<inp2:m_Script file="js/script.js"/>"></script>.

Tag Script would:
1. get compressed version of given file based on current theme (compressed versions could be stored under "/system/cache")
2. if given file was changed after compressed file was created, then create compressed file with file modification time in it's name and return url to compressed file
3. if given file wasn't changed after compressed file was created, then return url to compressed file

There would not be any additional calls to index.php to load every compressed javascript, because of tag implementation is being used. What ever compression is made or not could be determined by new configuration variable. Compression could be turned off automatically, when debug mode is turned on for example. What compressor to use would be determined based on given file extension. What compressor engine to use will be determined in later development stages of this feature (command-line, php, java etc.).

Any suggestions would be appreciated.

--
Best Regards,

http://www.in-portal.org
http://www.alex-time.com

[Dmitry]

Great idea for addressing this compression issue. I know we where looking for good solution for some time without success.

I do agree with proposed Tag logic. Here are some examples for compressing the JS / CSS in PHP:

- http://exscale.se/archives/2008/01/21/javascript-compression-php-class
- http://code.google.com/p/jsmin-php/
- http://davidwalsh.name/css-compression-php

-- -- Best Regards, Dmitry V. Andrejev

--

You received this message because you are subscribed to the Google Groups "In-Portal Development" group.
To post to this group, send email to in-por...@googlegroups.com.
To unsubscribe from this group, send email to in-portal-de...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/in-portal-dev?hl=.

[Alexander Obuhovich]

1st link is broken, css compression is ok. About javascript I don't know what to use: minification or compression. I know for sure, that minification doesn't rename variable names. But compression renames them. In case if global variables are used, then compressed code won't work. If we could solution, that compressed javascript, but keeps global variable names untouched, then this would be the best solution.

[Dmitry A.]

Yes, sorry for a broken link... :)

I don't think it's super crucial now about the method - I'll research
more and post here with good options shortly.

Anyone else has an opinion on this topic? Good, not good?! :)


DA.

On Nov 12, 12:35 pm, Alexander Obuhovich <aik.b...@gmail.com> wrote:
> 1st link is broken, css compression is ok. About javascript I don't know
> what to use: minification or compression. I know for sure, that minification
> doesn't rename variable names. But compression renames them. In case if
> global variables are used, then compressed code won't work. If we could
> solution, that compressed javascript, but keeps global variable names
> untouched, then this would be the best solution.
>
>
>
>
>
> On Thu, Nov 12, 2009 at 6:35 PM, Dmitry <dandre...@gmail.com> wrote:
> >  Great idea for addressing this compression issue. I know we where looking
> > for good solution for some time without success.
>
> > I do agree with proposed Tag logic. Here are some examples for compressing
> > the JS / CSS in PHP:
>
> > -http://exscale.se/archives/2008/01/21/javascript-compression-php-class
> > -http://code.google.com/p/jsmin-php/

> > -http://davidwalsh.name/css-compression-php

>
> >   --
>
> > --
> > Best Regards,
>
> > Dmitry V. Andrejev
>
> > -----Original Message-----

> > *From*: Alexander Obuhovich <aik.b...@gmail.com<Alexander%20Obuhovich%20%3caik.b...@gmail.com%3e>
>
> > *Reply-To*: in-por...@googlegroups.com
> > *To*: in-por...@googlegroups.com
> > *Subject*: Ideas about automatic css/js compression
> > *Date*: Thu, 12 Nov 2009 18:18:41 +0200

>
> > Together with Sergey G. we came across very elegant and simple
> > implementation (doesn't exist yet) of solving problems with large
> > javascript, css files being sent on every page load.
>
> > Instead of

> > *<script type="text/javascript"
> > src="<inp2:m_TemplatesBase/>js/script.js"></script>*
> > we should use
> > *<script type="text/javascript" src="<inp2:m_Script
> > file="js/script.js"/>"></script>*.

> > in-portal-de...@googlegroups.com<in-portal-dev%2Bunsubscribe@goog­legroups.com>
> > .

> > For more options, visit this group at
> >http://groups.google.com/group/in-portal-dev?hl=.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "In-Portal Development" group.
> > To post to this group, send email to in-por...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > in-portal-de...@googlegroups.com<in-portal-dev%2Bunsubscribe@goog­legroups.com>
> > .

> > For more options, visit this group at
> >http://groups.google.com/group/in-portal-dev?hl=.
>
> --
> Best Regards,
>

> http://www.in-portal.orghttp://www.alex-time.com- Hide quoted text -
>
> - Show quoted text -

[Phil]

Hello mates,

I've allready though about CSS compression, and this could be a good
idea to integrate it as an inportal function, thus we can still keep a
readable css, thanks for our brain!

But to talk frankly about pages loading, I wanted to install it on a
website wich encounter visits peaks, and my tests results, on my
browser, were... the same speed, while I didn't had a chance to test
it on a peak time yet.

For your info, I use a nice plugin for Firefox to control loading
times, called Extended Status Bar, meters loading with 3 digits after
the decimal point :)

Cheers
Phil.

> >http://www.in-portal.orghttp://www.alex-time.com-Hide quoted text -

[Dmitry A.]

Anyone else has more input here or it's time to file a new task?


DA.

> > >http://www.in-portal.orghttp://www.alex-time.com-Hidequoted text -

[Dmitry A.]

New Feature Request has been filed:


457: Automatic CSS / JS Compression

http://tracker.in-portal.org/view.php?id=457


DA.

> > > >http://www.in-portal.orghttp://www.alex-time.com-Hidequotedtext -

[Alexander Obuhovich]

New info from Sergey about this:

not so scan every css file, that was compressed on every page run, but only do that on complete theme scan. This problem about css/js file being aggressively cached by browser becomes more annoying every day. I (Alex) say let's move it to 5.1.0 release.

To unsubscribe from this group, send email to in-portal-de...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/in-portal-dev?hl=en.

--
Best Regards,

http://www.in-portal.com
http://www.alex-time.com

[Dmitry Andrejev]

Hi Sergey, Alex,

I am all for 5.1.0 for this, but after reviewing original Task, I'd
like to add major feature note - I believe we should be able to
process multiple JS files (and probably CSS) in a single minimized
version.

Let's say I want something like this <script type="text/javascript"
src="<inp2:m_Script file="js/script.js|js/another_jq.js"/>"></script>

I did see it a few times like this - can't remember the software /
website, but will find this and put examples here.

What you think?

DA.

[Alexander Obuhovich]

We really were talking about this like comma separated files. I completely agree.

--
To unsubscribe, reply using "remove me" as the subject.

[Dmitry A.]

Updated task and moved to 5.1.0.

DA.

On Apr 8, 9:11 am, Alexander Obuhovich <aik.b...@gmail.com> wrote:
> We really were talking about this like comma separated files. I completely
> agree.
>
>
>
>
>
> On Thu, Apr 8, 2010 at 4:46 PM, Dmitry Andrejev <dandre...@gmail.com> wrote:
> > Hi Sergey, Alex,
>
> > I am all for 5.1.0 for this, but after reviewing original Task, I'd
> > like to add major feature note - I believe we should be able to
> > process multiple JS files (and probably CSS) in a single minimized
> > version.
>
> > Let's say I want something like this <script type="text/javascript"
> > src="<inp2:m_Script file="js/script.js|js/another_jq.js"/>"></script>
>
> > I did see it a few times like this - can't remember the software /
> > website, but will find this and put examples here.
>
> > What you think?
>
> > DA.
>

> > On Thu, Apr 8, 2010 at 8:41 AM, Alexander Obuhovich <aik.b...@gmail.com>

> > wrote:
> > > New info from Sergey about this:
>
> > > not so scan every css file, that was compressed on every page run, but
> > only
> > > do that on complete theme scan. This problem about css/js file being
> > > aggressively cached by browser becomes more annoying every day. I (Alex)
> > say
> > > let's move it to 5.1.0 release.
>

> > Alexander%20Obuhovich%20%3caik.b...@gmail.com<Alexander%2520Obuhovich%2520%253caik.b...@gmail.com>

[Alexander Obuhovich]

Here are what I've got by implementing this task (all numbers are from administrative console):

• all css: 16,133 kb compressed vs 23,301 kb uncompressed
• all js (except for jquery): 192,676 kb vs 272,411 kb uncompressed

Not much improvements for js unfortunately, but still we use one file instead of ~10 files.

[Phil -- wbtc.fr --]

the difference is not so big on file sizes (and that's why I had the same loading times on my tests posted here), but "all in 1 file" will surely faster page loads, the less dns lookup we have the better it is.

2010/5/2 Alexander Obuhovich <aik....@gmail.com>

[Dmitry Andrejev]

Hi guys,

Yes, while it can look like look minor improvement - actually it's huge considering it's going to be 1 single file - which is cached by the browser and is smaller size now.

Anyway - good stats and let's make it automatic when we change one of the files it will update the output in way so Browser knows it's been changed.

Also, I suppose it's the same idea for the Front end.

Thanks and let's have a good work moving.

DA.

[Alexander Obuhovich]

No automatic change detections, since we need to scan all source files for compressed file to check if they were changed on every page load. That's why you need to press "Refresh" on themes list or "Rebuild Theme Files" on "System Tools" section to re-compile that compressed css/js files.

[Dmitry Andrejev]

Yes, I see this as an option - Refresh.

Here is another idea is it too bad to check for Lat Modified and if any is older then previous file regenerate automatically with new time-stamp?

http://php.net/manual/en/function.filemtime.php

DA.

[Phil -- wbtc.fr --]

why not, but anyway file change happens on dev time, and developpers will have to click on refresh to see their modification, or wait for this file check...

Could File compression could check everytime using a dev-option-checkbox somewhere in admin for dev purposes? (avoiding to keep a page opened on "Tools" section and clic refresh after each modification)

2010/5/3 Dmitry Andrejev <dand...@gmail.com>

[Dmitry Andrejev]

Good idea Phil!

We can have auto-check for Last Modified enabled once we are in Debug mode OR Theme or Tools clicked.

Guys, what you think?

DA.

[Phil -- wbtc.fr --]

yes, in Debug mode, but I proposed a check-box because it's more user's friendly than enabling debug mode, for a new user :)

2010/5/3 Dmitry Andrejev <dand...@gmail.com>

[Dmitry Andrejev]

Hi Phil,

For now let's keep Debug mode enabled via debug.php file.

By itself it's for Developers and as simple as changing 0 to 1 or uncommenting a PHP line in debug.php file which simple enough. I see NO need to move this to Admin interfaces which would just add more issues - believe me. 

Cheers!

Da. 

[Phil -- wbtc.fr --]

you misunderstoud me, I meant activate the auto-check of css/js files via a check-box, no change to debig mode.
But activating a debug mode is another step in dev, and I'd like newbie being able to start developping onto inportal with ease.

2010/5/3 Dmitry Andrejev <dand...@gmail.com>

[Dmitry Andrejev]

Hi Phil,

Actually, I understood your point :).

I still don't think it's a good idea to have 3 places to do 1 thing. For those who is afraid of DEBUG mode (which actually harmless) they can user Refresh and so on. Those who is advanced enough to work with the Theme should be okay to copy one file which actually will help them to learn even more about In-Portal.

One other technical note - if we add a new Configuration Value in Admin which would check for this - it will be additional SQL on every newly visited page.

Trust me it's better this way :)

DA.

[Phil -- wbtc.fr --]

Lightening SQL request is the best thing, ok I agree for your solution :)

[Dmitry Andrejev]

This task is completed and committed into In-Portal 5.1.x development branch.

DA.

[Phil -- wbtc.fr --]

great :)

2010/5/6 Dmitry Andrejev <dand...@gmail.com>