[Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The next feature release of phpBB 3 will be 3.2/Rhea followed by 3.3.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.1. If you need support for phpBB 3.1 please visit the 3.1.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 788
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

[Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by hanakin » Fri May 23, 2014 3:37 pm

*Note This is part 9 of a series found here

When it comes to the client side of things their are several considerations that need to be made to ensure that the application is rendering as fast as possible on their end. Their are tools that assist us with this one of which is an extension called Page Speed for Google Chrome.

The following is a screenshot of the results for this page on my IMAC
Screen Shot 2014-05-23 at 5.26.38 PM.png
(102.95 KiB) Downloaded 905 times
as you can see it lists several areas in which we could improve the render speeds. some are marked as High and others as Low.

I am not going to cover all of these in one topic I will have topics for all of these or at least try to.

The ones I am refering to here are
  • Avoid CSS Import
  • Minify CSS
  • Minify JS
  • Optimize order of styles and scripts
  • Minimize requests
We really need to consider with a new theme that all the JS/CSS should be abstracted and combined into as few files as possible and then a min version should be created which is what is served/cached. This would require some sort of minification built into phpbb or at least be able to leverage some sort of minification services. Then upon purging of cache the current min files would be overwritten with new ones.

Also keep in mind that this is just for this page they way the template is broken out we would need to run it on all the individual pages to get a full picture.

Ticket: https://tracker.phpbb.com/browse/PHPBB3-14149
Thoughts and Suggestions

aleha
Registered User
Posts: 143
Joined: Tue Mar 26, 2013 2:19 am

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by aleha » Fri May 23, 2014 7:44 pm

Minification could be done even now for package distributions I guess.

User avatar
brunoais
Registered User
Posts: 958
Joined: Fri Dec 18, 2009 3:55 pm

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by brunoais » Sat May 24, 2014 9:29 am

IMO we should do most of those! but server-side and only on compile time.
My original idea was to use assetic to manage this and to execute these steps but I got no real answer if it was a go-to feature or just something that would be getting more dust.

IMO, we should not ship phpBB with all these minified because the forum owner may want to customize his own installation.
Besides, that means that we would have to make tests for the prepacked minimized version. If we just have a single package like this, it is much easier while the performance impact is nill, compared to the core code changes that have been happening.

About minimizing requests... There has been a lot of work on that department. For example, phpBB is moving away from icons where correct HTML + CSS can do the job just right. It's a PR somewhere... I'm not sure if it will be actually merged in phpBB 3.1 or not.

With all that, what would happen is that all the @import are directly imported to the single minimized .css file. I don't say the same for the .js for what I think to be obvious reasons (if you need explanation, just ask).

Ofc, there should be a "dev" mode that allows none of that to happen so that the devs can debug CSS and js (specially js).
hanakin wrote:Optimize order of styles and scripts
I don't think that there's any way of doing that well enough, unfortunately. <style> has to go on the <head> and they insist <script> to go to the bot.
They also enforce that <script> must not be placed with the defer (nor async, in that matter) attribute.
As for nº of .js files, I believe that phpBB is made with 3 .js file + jQuery. We could join 2 of them but, by license and efficiency, we should not join any other file.
Last edited by brunoais on Sat May 24, 2014 7:47 pm, edited 1 time in total.

User avatar
PayBas
Registered User
Posts: 305
Joined: Tue Jul 29, 2008 6:08 pm
Contact:

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by PayBas » Sat May 24, 2014 9:53 am

We could definitely use a smarter way than using @import, especially now we are using template events and it will be very likely that many styles will use style inheritance from proSilver.

I myself are already running into IE8/IE9 CSS limit problems: http://blogs.msdn.com/b/ieinternals/arc ... 64546.aspx (@import nesting supports up to 4 levels deep).

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 788
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by hanakin » Sat May 24, 2014 7:37 pm

@ brunoais too the order of assests you are still thinking of the confines of prosilver it can be done to an extent with a new theme especially if we can start using ajax properly

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by callumacrae » Sat May 24, 2014 8:51 pm

Will this be implemented before or after HTTP2 is released?
Made by developers, for developers!
My blog

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 670
Joined: Mon Mar 08, 2010 9:18 am

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by VSE » Sat May 24, 2014 11:10 pm

I've just begun working with Grunt.js and with that in mind, we could easily write CSS in LESS or SASS, in a fully modular way (by board components like notifications, posting, profiles, etc. instead of by colors, links, content as it is now) and Grunt.js would compile, lint, concatenate, and minify it all into one perfect little CSS file for distribution during the build stage of each release. It's so easy and useful it's totally worth looking into for phpBB. And of course, for style authors, phpBB could also package the 'src' CSS LESS/SASS files and distribute that too, say in a separate 'src' directory or in the 'docs' directory even.
Has an irascible disposition.

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by callumacrae » Sat May 24, 2014 11:26 pm

VSE wrote:I've just begun working with Grunt.js and with that in mind, we could easily write CSS in LESS or SASS, in a fully modular way (by board components like notifications, posting, profiles, etc. instead of by colors, links, content as it is now) and Grunt.js would compile, lint, concatenate, and minify it all into one perfect little CSS file for distribution during the build stage of each release. It's so easy and useful it's totally worth looking into for phpBB. And of course, for style authors, phpBB could also package the 'src' CSS LESS/SASS files and distribute that too, say in a separate 'src' directory or in the 'docs' directory even.
Try Gulp. It's way better—not only is faster, but it's not horrifically overconfigured like Grunt is. I can write entire configuration files without consulting the reference or previous code.

I wrote an article about it for Smashing Magazine which should be published soon :-)
Made by developers, for developers!
My blog

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 788
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by hanakin » Sun May 25, 2014 5:26 am

yeah I like gulp too as I suck with grunt like you said its to bloated and the code for gulp is a lot cleaner and easier to work with

User avatar
brunoais
Registered User
Posts: 958
Joined: Fri Dec 18, 2009 3:55 pm

Re: [Define New Theme] 9. The css/js that is served and cached should be minified/compressed/gzipped.

Post by brunoais » Mon May 26, 2014 10:25 am

@callumacrae How would we execute gulp? Any suggestions?

Post Reply