[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 · Post by **aleha** » Fri May 23, 2014 7:44 pm

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

brunoais · 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.

PayBas · 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).

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

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

Will this be implemented before or after HTTP2 is released?

Post by **MattF** » 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.

callumacrae · 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

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

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

@callumacrae How would we execute gulp? Any suggestions?

Development Discussion Board

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

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

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

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

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

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

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

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

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

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

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