/gist:e586eed0e76b48a499d9 Secret
Created
March 11, 2012 09:17
Star
You must be signed in to star a gist
Conversation about using assetic and compressing .js and .css files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Mar 07 09:32:50 <@nn-> if you have third-party libraries using jquery and not using defer they will break | |
Mar 07 09:33:16 <brunoais> I'm suggesting not using defer with jQuery, also | |
Mar 07 09:33:35 <@nn-> then the difference is going to be not worth the effort | |
Mar 07 09:33:41 <@nn-> jquery is 300 kb | |
Mar 07 09:33:48 <@nn-> minified | |
Mar 07 09:33:50 <brunoais> as long as we don't have more than 3 script tags without defer there is no noticeable impact | |
Mar 07 09:34:37 <@nn-> ^ that does not make any sense at all | |
Mar 07 09:34:45 <@nn-> 300 kb of jquery in 2 tags has no impact? | |
Mar 07 09:34:59 <brunoais> sorry misspelled | |
Mar 07 09:35:07 <@nn-> and what is it, 50 kb that we have if that, is going to have an impact? | |
Mar 07 09:35:12 <brunoais> as long as we don't have more than 3 script tags without defer there is no noticeable impact agaist using defer | |
Mar 07 09:35:33 <@nn-> if there is no difference we should not use defer as defer breaks third-party code | |
Mar 07 09:35:37 <brunoais> so if we could have a system in phpbb3 that joins, & minimizes js files and place them in the cache folder, we would get only 3 script files in the system | |
Mar 07 09:35:45 <@nn-> and everyone who happens to just put a script tag without defer on their board | |
Mar 07 09:35:57 <@nn-> which we can expect to be nearly all of our users | |
Mar 07 09:35:59 <brunoais> the problem is that phpbb uses 5/6 .js files | |
Mar 07 09:36:23 <brunoais> we could join all into just 3 .js files | |
Mar 07 09:36:26 <@nn-> this is an entirely separate issue | |
Mar 07 09:36:35 <brunoais> jQuery, jQuery UI and the rest | |
Mar 07 09:36:42 <@nn-> since we are going to require php 5.3 for 3.1 you should look into whether assetic will do this | |
Mar 07 09:36:46 <brunoais> if we do that we don't need defer to get it optimized | |
Mar 07 09:36:50 * erik|sleep has quit (Ping timeout: 248 seconds) | |
Mar 07 09:37:00 <brunoais> that's also in my test results post | |
Mar 07 09:37:07 <brunoais> that was a seperate test I made | |
Mar 07 09:37:24 <@nn-> ok, the conclusion is then you should investigate assetic | |
Mar 07 09:37:31 <brunoais> This happens soo well 'cause the way browser optimize this | |
Mar 07 09:37:57 <brunoais> *This happens soo well 'cause the way browser optimizes this | |
Mar 07 09:38:22 <brunoais> FF 3.5, in my tests, downloads script files in series | |
Mar 07 09:39:20 <brunoais> FF3.6+ downloads script files in parallel, with some limitations (same for the current Opera version and IE). If we reduce the number of .js files to 3, those limitations are not met | |
Mar 07 09:39:45 <brunoais> so we get the same results as using defer with FF 3.5 | |
Mar 07 09:39:59 <@nn-> we should not care for performance on fx 3.5 | |
Mar 07 09:40:04 <brunoais> yep | |
Mar 07 09:40:13 <@nn-> even i run 3.6 | |
Mar 07 09:40:17 <@nn-> who still runs 3.5? | |
Mar 07 09:40:20 <@nn-> and why? | |
Mar 07 09:40:23 <brunoais> dunno | |
Mar 07 09:40:36 <brunoais> it's about 0.5% of the ppl that use firefox, I think | |
Mar 07 09:40:50 <brunoais> does not make sense to give support | |
Mar 07 09:41:00 <@nn-> support we will | |
Mar 07 09:41:05 <@nn-> optimizing for it we will not | |
Mar 07 09:41:12 <brunoais> oh, right ;) | |
Mar 07 09:41:46 <brunoais> that's why if we reduce the number of script tags to 3 we do not need the defer to keep it optimized (as using defer or not is basicly the same. The difference is negligible) | |
Mar 07 09:42:56 <brunoais> we have the INCLUDEJS that I think that is has the probability of 99% (or so) that it will merged | |
Mar 07 09:43:08 <@nn-> please look into what assetic does | |
Mar 07 09:43:19 <@nn-> and whether it can accomplish this and how | |
Mar 07 09:43:23 <brunoais> we can use that in our advantage to merge the .js and place into the cache folder. I'll take a look at assetic,then | |
Mar 07 09:43:34 <brunoais> do we have already assetic in our system? | |
Mar 07 09:44:37 <brunoais> BTW, currently my ping to phpbb.com is 400ms | |
Mar 07 09:44:58 <brunoais> I already measured 900ms during a high traffic time :) | |
Mar 07 09:47:00 <@nn-> no | |
Mar 07 09:47:04 <@nn-> assetic is php 5.3 | |
Mar 07 09:47:12 <@nn-> we could not use it until very recently | |
Mar 07 09:47:27 <brunoais> I mean... Is it already in the develop branch? | |
Mar 07 09:47:33 <@nn-> no | |
------------------------------------ LATER --------------------- | |
Mar 08 08:23:11 <@nn-> did you want something? | |
Mar 08 08:23:29 <brunoais> I already did some investigation in ass**** | |
Mar 08 08:23:55 <brunoais> how it it called? | |
Mar 08 08:24:02 <@nn-> assetic | |
Mar 08 08:24:07 <brunoais> yes | |
Mar 08 08:24:21 <brunoais> it has the YUI and LESS | |
Mar 08 08:24:43 <brunoais> YUI for .js and .css compressing and LESS for CSS (LESS) precsssing | |
Mar 08 08:24:54 <brunoais> mixing them can create something really optimized | |
Mar 08 08:25:03 <brunoais> with YUI we can compress al to 1 file. | |
Mar 08 08:25:19 <brunoais> I didn't find if there's a way to use assetic to join the files | |
Mar 08 08:26:26 <brunoais> anyway, we can load all files and then concatenate | |
Mar 08 08:26:35 <brunoais> after that we can execute YUI over it | |
Mar 08 08:36:19 <@nn-> you do realize that yui compressor requires a java runtime | |
Mar 08 08:37:40 <brunoais> it does? I was thinking that it has the Java and that there were other processors for YUI (like there's the LESS js processor and the LESSphp the php processor) | |
Mar 08 08:37:47 <brunoais> I'll do more investigation | |
Mar 08 08:37:49 <@nn-> which 1. is not going to be present on your run of the mill php host, 2. you may be unable to invoke on a shared host, 3. will take about 20 seconds just to bootstrap (this is while user is waiting for your index page to load), 4. will consume 10x as much memory as the rest of your hosting account put together (got memory limits on your shared hosting?) and this is before it even does anything | |
Mar 08 08:38:19 <@nn-> but i am curious what it does do there | |
Mar 08 08:39:02 <@nn-> yui compressor is awesome but as soon as you have to run it it kind of ruins your day | |
Mar 08 08:39:16 <@nn-> honestly i'm yet to use it in any of my deployment pipelines | |
------------------------------------ LATER --------------------- | |
Mar 11 08:28:13 <brunoais> I have made some throughput (I think that's how it's written) on the js minimizer and CSS minimizer and assetic | |
Mar 11 08:28:49 <brunoais> for minimizing CSS, assetic has all we have ready. We can use LESSphp and CSSMin. | |
Mar 11 08:29:03 <brunoais> They are the best ones from the code written in php | |
Mar 11 08:29:16 <brunoais> in the js counterpart | |
Mar 11 08:29:58 <brunoais> I found a great tool but I didn't find if it is direclty integrable with assetic (even though it has a way to work without assetic) | |
Mar 11 08:30:09 <brunoais> it's the minify project | |
Mar 11 08:30:17 <brunoais> I already contacted its maker | |
Mar 11 08:31:58 <@nn-> very good | |
Mar 11 08:32:07 <@nn-> remind me what issue we are solving with assetic right now? | |
Mar 11 08:32:13 <brunoais> the system has now 3 interfaces. One for direct access from the user (the first one and the most widely used, at the moment, not that useful for phpbb). One in CLI, requires exec() so, no way, and there's also the interface used by both of those systems to access the inner CSS/js compressor | |
Mar 11 08:32:25 <brunoais> (let me finish ;)) | |
Mar 11 08:33:09 <brunoais> minify is considered to have a great js compressor, still most programmers thing the CSS compressor needs improvement | |
Mar 11 08:33:36 <brunoais> we could use CSSMin from assetic and js compressor from minify | |
Mar 11 08:33:39 * YuriyRusko has quit (Disconnected by services) | |
Mar 11 08:33:48 * Marshalrusty (~Marshalru@phpbb/manager/pdpc.21for7.marshalrusty) has joined #phpBB-dev | |
Mar 11 08:33:49 * ChanServ gives channel operator status to Marshalrusty | |
Mar 11 08:34:20 <brunoais> I just need to know if I may continue to investigate the minify project about its uses. It'll take time and if it's not worth it it's better to waste less time | |
Mar 11 08:36:04 <@nn-> (04:32:07) nn-: remind me what issue we are solving with assetic right now? | |
Mar 11 08:36:14 <brunoais> I don't know what is the main purpose of assetic in phpbb3, anyway, I was told by you to investigate assetic about solving the CSS compression issue and, most importantly, the js merging and compressing issue so that we could obtain the same performance in loading pages like there was the use of defer | |
Mar 11 08:37:12 <@nn-> with assetic we can put all scripts in the footer and you will be ok with that, correct? | |
Mar 11 08:37:43 <brunoais> correct | |
Mar 11 08:38:20 <brunoais> the bad implementation (or no implementation) or 2 browsers removes the sense of having the scripts at the top | |
Mar 11 08:38:42 <@nn-> so then the next question is which scripts are we going to combine | |
Mar 11 08:38:49 <brunoais> all | |
Mar 11 08:38:56 <brunoais> no problem conbining | |
Mar 11 08:39:12 <@nn-> we serve jquery from google optionally though | |
Mar 11 08:39:14 <brunoais> just append them in the same correct order they appear in the page | |
Mar 11 08:39:21 <brunoais> oh, that | |
Mar 11 08:39:27 <brunoais> we will have 3 scripts | |
Mar 11 08:39:38 <brunoais> jQuery, jQuery UI and the rest | |
Mar 11 08:40:16 <brunoais> there's a notification system that requires the jQuery UI | |
Mar 11 08:40:25 <@nn-> now are you talking about combining scripts that are referenced on a particular page, or all scripts we ship? | |
Mar 11 08:40:38 <brunoais> combining the scripts by page | |
Mar 11 08:40:58 <brunoais> that can be changed if you want | |
Mar 11 08:41:12 <brunoais> we could have the whole pack in a single file | |
Mar 11 08:41:15 <@nn-> so suppose page A requests scripts X and Y | |
Mar 11 08:41:21 <@nn-> and page B requests scripts Y and Z | |
Mar 11 08:41:41 <@nn-> does assetic support building two combined scripts, XY and YZ? | |
Mar 11 08:41:48 <@nn-> does it support building a single combined script XYZ? | |
Mar 11 08:42:39 <brunoais> good topic investigation | |
Mar 11 08:42:46 <brunoais> I've just noted that | |
Mar 11 08:43:00 <@nn-> also any of X Y and Z may come from extensions | |
Mar 11 08:43:09 <brunoais> anyway | |
Mar 11 08:43:17 <brunoais> I'm relying on INCLUDEJS | |
Mar 11 08:44:07 <@nn-> with respect to specific js/css compressor | |
Mar 11 08:44:20 <@nn-> my expectation is we will be compressing those while user is waiting for the page to load | |
Mar 11 08:44:24 <@nn-> therefore compression must be fast | |
Mar 11 08:44:30 <brunoais> I was thinking on using the INCLUDEJS backend system to obtain the various files combine them and then place where INCLUDEJS is told to | |
Mar 11 08:44:51 <brunoais> compressing should take 1s tops | |
Mar 11 08:45:18 <brunoais> much like the template interpretation and caching | |
Mar 11 08:45:26 <@nn-> ok | |
Mar 11 08:45:31 <@nn-> includejs is orthogonal to asset combination | |
Mar 11 08:45:43 <@nn-> all includejs does is it moves scripts in the produced markup | |
Mar 11 08:45:43 <brunoais> othogonal(?) | |
Mar 11 08:45:53 <@nn-> ~independent | |
Mar 11 08:46:08 <brunoais> hehe.... | |
Mar 11 08:46:11 <@nn-> you kind of need includejs for combination to work | |
Mar 11 08:46:20 <@nn-> but includejs will function correctly by itself | |
Mar 11 08:46:48 <@nn-> what is the status of includejs? | |
Mar 11 08:46:48 <brunoais> If INCLUDEJS is approved, preparing the files for minimizing will be easy | |
Mar 11 08:46:55 <brunoais> almost ready | |
Mar 11 08:47:05 <brunoais> I'm not participating in it | |
Mar 11 08:47:17 <brunoais> it's owner is saying that it is already functional | |
Mar 11 08:47:25 <@nn-> owner being? | |
Mar 11 08:47:32 <brunoais> arty | |
Mar 11 08:47:37 <@nn-> right | |
Mar 11 08:48:26 <@nn-> and we'll probably need something combination for stylesheets also | |
Mar 11 08:48:31 <@nn-> s/something// | |
Mar 11 08:48:48 <brunoais> well... | |
Mar 11 08:49:00 <brunoais> assetic comes prepared for LESSphp and CSSMin | |
Mar 11 08:49:19 <brunoais> we can just pass it through LESSphp and then CSSMin and it should be ready | |
Mar 11 08:49:33 <@nn-> alright | |
Mar 11 08:49:37 <@nn-> another thing | |
Mar 11 08:50:02 <@nn-> can combined js and css files be prepared in an offline process | |
Mar 11 08:50:14 <@nn-> such that during normal board operation they are not built at all? | |
Mar 11 08:50:42 <brunoais> explain what do you want to mean by offline, pls | |
Mar 11 08:50:43 <@nn-> in this case you would obviously need to know ahead of time what files you are going to combine | |
Mar 11 08:51:00 <@nn-> basically you run a command which builds all the combined files | |
Mar 11 08:51:16 <@nn-> then when someone goes to your board assetic simply references prebuilt files | |
Mar 11 08:51:21 <brunoais> minify has an CLI interface | |
Mar 11 08:51:46 <brunoais> (I'm trying to understand the question) | |
Mar 11 08:52:03 <brunoais> we could create a record of js dependencies | |
Mar 11 08:53:00 <brunoais> but that would require updating in that place after altering the template files | |
Mar 11 08:53:11 <brunoais> does not seem a good idea | |
Mar 11 08:53:30 <@nn-> that is fine because template files would never be modified in this use case | |
Mar 11 08:53:44 <brunoais> anyway | |
Mar 11 08:54:23 <@nn-> maybe that is something i need to check myself | |
Mar 11 08:54:58 <brunoais> it's in thought that the compressed js files should go to the cache folder and live peacefully with the rest of the compiled .php files | |
Mar 11 08:55:31 <@nn-> there are some issues with that, currently we do not serve anything from cache to the web | |
Mar 11 08:55:49 <@nn-> naturally we would have to add a web-servable cache for most boards | |
Mar 11 08:56:04 <@nn-> here is what i would suggest | |
Mar 11 08:56:16 <@nn-> 1. record everything we talked about in the relevant rfc topic | |
Mar 11 08:56:22 <@nn-> if we don't have an assetic rfc please create one | |
Mar 11 08:56:37 <@nn-> 2. finish includejs and have it merged | |
Mar 11 08:57:00 <@nn-> 3. add assetic and implement one operation with it, e.g. combining includejs-specified files | |
Mar 11 08:57:24 <@nn-> 4. continue investigation of specific details of assetic |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment