Performance Tuning in Theme Builder 3.x

Page under construction

We've done some of it for you!

Whilst most performance tuning will be specific to the way you are using Theme Builder, there are certain elements that we can deal with within the theme itself.

Building on the existing Theme Builder 2.x performance tweaks, we've built in even more enhancements:

• The average theme design now only uses 8 external JavaScript files instead of 11

... more to follow ...

Use fewer macros

It turns out that every macro has an overhead caused by the work Confluence has to do to process it.

The more macros you add in to your theme layouts, the slower the theme will be regardless of how fast those macros are.

However, you probably wouldn't be adding macros to the layout if there wasn't a need for them. So what can you do to solve this dilemma? Well, there are a number of solutions...

Use the cache macro

The cache macro allows you to cache the output of a macro. On subsequent views of the same page, if a cache is found then it's used instead of reprocessing the macro (or other wiki notation encapsulated by the cache macro).

But be careful - if you've got macros that output different things based on user privileges, you could end up caching the output for one user and then showing it to everyone else. For a much more detailed explanation with examples, see Menu Performance Tuning.

Only show when required

There are numerous macros that can show and hide content only when it's needed based on factors such as location within the wiki, labels, user privileges, etc.

Wrapping your panel content, as applicable, in these macros means that you can still display the macros when required, but not on every single page thus reducing the strain on the server and bandwidth.

The most common macros are:

• builder-show macro and builder-hide macro
• show-to macro and hide-from macro
• show-if macro and hide-if macro

Use compound menu items

If you use the menuitem macro, menulink macro and menuicon macro a lot, try converting your markup to use the new compound-menuitem macro which can reduce the number of macros used by one third!

When you consider the number of menu items in the default view and edit menus alone, you can quickly imagine how this will have a very noticeable beneficial effect on performance. You can make most menu items three times faster simply by using the new compound-menuitem macro!

The default menu notation output by the viewmenu macro and editmenu macro has been updated in Theme Builder 3.0 and above, however if you've altered the notation or moved links out in to other locations, etc., you should certainly consider converting your notation over to the new compound format.

See Also: View Menu 3.x and Edit Menu 3.x

Avoid CSS imports

In earlier versions of Theme Builder, it was difficult to have one master CSS file that would be used across multiple spaces so many of our clients created a css file and imported it in to the Custom CSS using the CSS @import directive.

Well, due to the new Layout Inheritance feature on Theme Builder 3.x you can now easily define a master CSS file directly within the Custom CSS (and IE CSS) settings then re-use and even extend that CSS across multiple spaces and theme layouts. We've even made the CSS text boxes resizeable for easier editing!

Start by creating a "master layout" (in the Layout Manager) that will contain your main style sheet. Using the CSS Tab, paste in your CSS and then save the layout.

You can immediately apply that layout to multiple spaces (personal and global) and also at global level (dashboard, etc). If you change the CSS in the layout, everywhere that uses the layout will use the updated CSS.

Furthermore, you can easily re-use that CSS in other layouts if required by creating a "child layout" in the Layout Manager. The child layouts will automatically inherit the CSS from their parent layout. If you change the CSS in the parent layout, the CSS in the child layouts is automatically updated.

Note: Ensure you have the "Merge this layout's CSS with it's parent's CSS" option ticked to ensure the child layout inherits the CSS from the parent layout.

You can now add CSS that's specific to the child layout and it will be output along with the CSS from the parent layout (the parent CSS is output first allowing the child CSS to override bits of the parent CSS if desired).

See Also

Most of the content of earlier performance tutorials are still applicable to Theme Builder 3.x:

• Performance Tuning 1.x
• Performance Tuning 2.x