Skip to content

Instantly share code, notes, and snippets.

@brunoais
Created March 11, 2012 09:17
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save brunoais/e586eed0e76b48a499d9 to your computer and use it in GitHub Desktop.
Conversation about using assetic and compressing .js and .css files
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