Ways of CSS improvements

Ways of CSS improvements

by Jordi Pujol-Ahulló -
Number of replies: 5
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Hello all,

I have just visit this project: https://github.com/mrmrs/cssstats, with the site http://cssstats.com/. I find it very useful. If you want to try it, just type your Moodle site URI (without http://), and let it work. You can find very useful information, and, more importantly, the end of the page: this will show you the ratio among the total number of CSS definitions, and the total UNIQUE number of CSS definitions.

I think this kind of tools should be considered too in our developments, more importantly in theme development. Moodle builds cache of js and css, and in addition modern web browsers simplify them a lot before its processing. However, if we could build less CSS rules, all would be easier and faster.

I attach that ratio from our Moodle site (2.4), so you can give it a look.

Total vs unique CSS rules from our Moodle site


Best!

Jordi

Average of ratings: Useful (1)
In reply to Jordi Pujol-Ahulló

Re: Ways of CSS improvements

by Hartmut Scherer -

Hi Jordi,

Thanks a lot for posting such an interesting link. I did the test for our site with Moodle 2.8.1 installed and using Shoehorn as theme. This is the result:

css stats total vs unique declarations








Any comments are welcome.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Ways of CSS improvements

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

What page was that on Hartmut?

Doesn't look right to me - it seems unusual that there are only a total of 7 css declarations for the whole page?

I know switching to bootstrap and minified files should improve things a lot from Jordi's 2.4 example - Jordi, you don't say what theme that is based on or what page of the site? - but that seems a little extreme.

Average of ratings: -
In reply to Richard Oelmann

Re: Ways of CSS improvements

by Jordi Pujol-Ahulló -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Hi!

You are right!

I asked for it, and the theme was the standard for 2.4, but with some modifications. This changes can be the reason for this odd numbers. Anyway, that was just an example for the comment. We will upgrade to 2.8 soon, to a Moodle theme without custom modifications, so that we should no longer have this kind of problems (at least due to custom changes tongueout).

Thanks for your comments!

Jordi

Average of ratings: -
In reply to Richard Oelmann

Re: Ways of CSS improvements

by Hartmut Scherer -

Hi Richard,

I went to http://cssstats.com/, the site which Jordi mentioned in his first post. I added http://pibc-edu.com as URL. So the above screenshot is probably just about the front page.

Today, I logged in again at http://cssstats.com/ and added the URL of a main course page. This is what I got for a customized version of the theme Shoehorn in Moodle 2.8.1 (Shoehorn with Custom CSS)

css stats total vs unique declarations Course main page









The screenshot below shows Shoehorn without Custom CSS.

css stats total vs unique declarations Course main page-NO Custom CSS








Comments are welcome.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Ways of CSS improvements

by Jordi Pujol-Ahulló -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Hi Hartmut!

It seems that themes on 2.8 (at least the one you used) is not so optimezed from source as it could be. 

Good point! Thanks for sharing and discussing!

Jordi

Average of ratings: -