Advantages of Moodle core support for graphical rich themes

Advantages of Moodle core support for graphical rich themes

by Urs Hunkler -
Number of replies: 7
Picture of Core developers
Moodle 1.9 "custom_corners" theme speed test

Question A: Does the Moodle core implementation of custom_corners bring advantages over a JavaScript implementation?
Question B: Does the Moodle implementation need optimisation?

For this test I implemented a JavaScript version of custom_corners with the same CSS and graphics as the Moodle implementation.

Comparison of the Moodle implementation and the JavaScript implementation of custom corners (CC):
Computers: MacBook 2GHz Intel Dual Core and 1.8 GHz AMD PC
Browser: Firefox 2.0.12, IE7 on the PC
Times taken in a Moodle course page with the Firefox YAHOO YSLOW extension are averages of many repetitions.

Course reload
Mac
PC
JavaScript CC
2.1 sec
6.2 sec
Moodle CC
1.8 sec
5.8 sec
Standard theme
1.3 sec
2.9 sec
History back
Mac
PC
JavaScript CC
1 sec
3 sec
Moodle CC
0.6 sec
2.5 sec
Standard theme
0.3 sec
1.2 sec

On the slower PC the page display is slightly different with the JavaScript implementation: you see the page change when the graphics are shown after the page has loaded.

In IE7 the page load is remarkably interrupted with the JavaScript version.

Answer A: Yes, the Moodle implementation brings remarkable advantages. The Moodle implementation is faster. The JavaScript implementation suffers from a worse user experience - especially in IE browsers.

Answer B: Yes, the Moodle implementation needs to be optimised. The speed difference against the standard theme is too big - especially on slower computers.
Average of ratings: -
In reply to Urs Hunkler

Re: Advantages of Moodle core support for graphical rich themes

by Patrick Malley -
Thanks for the info, Urs.

Based on this, should I avoid theming on Custom Corners until you have optimized it a bit?
In reply to Urs Hunkler

Re: Advantages of Moodle core support for graphical rich themes

by Mauno Korpelainen -

Urs,

thank you for the performance testing. The graphics of Custom corners do make it a little slower but I noticed today one strange thing from README file - text:

You must not write hooks as comma separated lists of elements like

td#middle-column div.bt,
div#middle-column div.bt {
    ...
}

in Chameleon themes because the Chameleon engine can't handle these comma lists. Please write two seperate statements instead.
td#middle-column div.bt {
    ...
}
div#middle-column div.bt {
    ...
}

Both Chameleon and Custom Corners user_styles.css have several such tags - is this text "Chameleon engine can't handle these comma lists" valid or should those tags be changed?

In reply to Mauno Korpelainen

Re: Advantages of Moodle core support for graphical rich themes

by Andrew Walker -
Hi,

Chameleon should support comma separated selectors (at least if it isn't supporting them correctly, it's a bug that should be fixed wink). It's been a while since I looked at the code, but the function CSS.toObject (around line 645 in chameleon_js.php) handles the parsing of the selectors and it does split the string into individual selectors using the comma. Have you got a case where this isn't working?

Thanks
smile
In reply to Mauno Korpelainen

Re: Advantages of Moodle core support for graphical rich themes

by Urs Hunkler -
Picture of Core developers
Mauno, I decided to remove the Chameleon engine in the Custom corners theme. The CSS is somehow too complex to be easily handled in the Chameleon interface.
In reply to Urs Hunkler

Re: Advantages of Moodle core support for graphical rich themes

by Mauno Korpelainen -

Urs,

great performance info, thank you!

In fact I did exactly the same (dropped Chameleon engine) some weeks ago when I started testing different kind of corners. The main structure of Custom corners is more flexible I could at first imagine - not just for round corners but all types of corners and frames for boxes.

Excellent work again!!!smile

In reply to Urs Hunkler

Re: Advantages of Moodle core support for graphical rich themes

by Urs Hunkler -
Picture of Core developers

After further investigation I can show new facts and figures.

First the much slower page rendering on the PC in Firefox was caused by a broken extension. After I removed the extension page rendering takes only a little longer due to the slower CPU.

Second no need to worry about the theme "Custom corners" rendering speed. It's not significant slower than other themes. When files don't come from the cache the load times differ more. After some JavaScript enhancements it's performance got even better.

Page data

In my tests I wanted to know the page creating time and the time until the page is ready displayed in the browser. To get an overview I selected 6 pages: startpage, 2 course pages (one short and one longer with several images), a glossary, and 2 admin pages (frontpage settings and user settings.

Page data

Measuring

To get a good average I measured in Firefox:
_ 10 rounds loading the 6 pages with the standard theme as a reference
_ switch to the other theme
_ 10 rounds loading the 6 pages
_ closing the browser (to avoid slowing down due to eventual memory leaks)
_ 10 rounds loading the 6 pages with the other theme
_ switch to standard theme
_ 10 rounds loading the 6 pages with the standard theme as a reference

Therefore standard theme and the other theme alternate in the graphs.

The graph shows that there are only quite small differences in the loading time for different themes. The pages with a theme with several JavaScripts needs a bit longer, but not dramatically.

With text replacement filters active the server needs to work more, but the page load time is only minimal slower with the standard theme. (Shown in the middle before the numbers with the disabled cache)

The higher load times on the right show how much longer pages load when the browser cache is empty. (for example with first page loads or https connections).

Load time overview

(click to load big image)

Load times of the single pages comparing standard and custom corners theme

Quite interesting is also looking at the different generation and loading times of the 6 page types.

The graph for page generation time on the server with cache on and off

Page generation time overview

(click to load big image)

and the page loading time in Firefox with cache on and off

Page time

(click to load big image)