Metawerx Java Hosting Small Logo

Confluence - Combining JS and CSS Files

Author: Neale Rudd

Date: 20-Feb-2009

Intro

This is a guide for increasing performance in Confluence.

The guide will show how to combine JS and CSS files used by Confluence for faster page loads. JavaScript and CSS components of each page will then load much faster on first-accesses, reloads, and whenever the CSS/JS isn't already cached by the browser. (eg: 2-4 javascripts instead of 14).

The guide is written for Confluence 2.8.2, but is relevant for all versions of Confluence. In other versions, you may need to record the list of JS and CSS files to make sure you don't miss any.

How it works

In a high-latency network, or even on a local system, a page will load more quickly if there are less objects to retrieve. A multi-threaded browser will typically only try to retrieve 4 objects at a time, so if your site visitor is on the other side of the world, the wait for 2-3 lots of 4 objects may add approx 160-200ms per batch. Even if the objects are already cached, the browser will ask the server whether the object's timestamp has changed. This latency adds up, and can cause around 600ms of extra time per page view.

What we will do

  • Review the current output and new expected results
  • Unzip the web-resources plugin file from the Confluence jar file
  • Modify the web-resources plugin file
  • Copy our new file into the WEB-INF/classes/plugins folder, so it overrides the one in the jar
  • Create new combination JS and CSS files
  • Test

Review the current output and new expected results

Here is the system-resources section from a View Source of the dashboard.action page:

<!-- include system resources -->
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/master.css" title="Confluence Master Stylesheet" media="all"/>
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/wiki-content.css" media="all"/>
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/tabs.css" media="all"/>

<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/menu.css" media="all"/>
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/menu-ie.css" media="all"/>
<![endif]-->
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/tables.css" media="all"/>
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/panels.css" media="all"/>
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/master-ie.css" title="Master-IE" media="all"/>
<![endif]-->
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/renderer-macros.css" media="all"/>
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/information-macros.css" media="all"/>
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/layout-macros.css" media="all"/>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:yui-core/yahoo-dom-event.js" ></script>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:ajs/atlassian.js" ></script>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:breadcrumbs/breadcrumbs.js" ></script>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:jquery/jquery.js" ></script>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:jquery/jquery-compatibility.js" ></script>

<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-scripts/master.js" ></script>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-scripts/menu.js" ></script>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-scripts/PageNotification.js" ></script>
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:print-styles/print.css" media="print"/>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:atlassian-effects/atlassian-effects.js" ></script>

<!-- end system resources -->

As you can see, there are 21 files included.

After this change, the result will look like this:

<!-- include system resources -->
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/master-styles.css" media="all"/>
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-styles/master-styles-ie.css" media="all"/>
<![endif]-->
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:yui-core/yahoo-dom-event.js" ></script>

<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:ajs/atlassian.js" ></script>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:breadcrumbs/breadcrumbs.js" ></script>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:jquery/jquery-combo.js" ></script>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-scripts/master-scripts.js" ></script>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:master-scripts/PageNotification.js" ></script>
<link type="text/css" rel="stylesheet" href="/s/1325/11/1.0/_/download/resources/confluence.web.resources:print-styles/print.css" media="print"/>
<script type="text/javascript" src="/s/1325/11/1.0/_/download/resources/confluence.web.resources:atlassian-effects/atlassian-effects.js" ></script>

<!-- end system resources -->

In the case of the dashboard page, there will be 10 objects included after the change instead of 21.

Unzip the web-resources plugin file

First, let's set the path for the confluence folder. This will be used in later steps to save time and make this tutorial easier to follow.

# Specify the path to our confluence WEB-INF folder
# Edit this line for your real confluence WEB-INF path
export WEBINF=/confluence/tomcat/webapps/ROOT/WEB-INF

Next we'll copy the confluence jar to a different location, and unzip the file we need.

cd /tmp
cp $WEBINF/lib/confluence-2.8.2.jar confluence-2.8.2.zip
unzip confluence-2.8.2.zip plugins/web-resources.xml

Modify the web-resources plugin file

Now we'll modify the web-resources.xml file. For this example, we will modify 4 sections only. There are other sections such as the labels-editor which you can also modify for faster display of editing pages.

nano plugins/web-resources.xml

First, the master-styles section. Remove it, and replace this this: (11 scripts into 2, one for general CSS, one for IE-specific CSS):

<web-resource key="master-styles" i18n-name-key="admin.web.resources.plugin.master.styles.name">
    <resource type="download" name="master-styles.css" location="/includes/css/master-styles.css">
        <param name="source" value="webContext"/>
    </resource>
    <resource type="download" name="master-styles-ie.css" location="/includes/css/master-styles-ie.css">
        <param name="source" value="webContext"/>
        <param name="ieonly" value="true"/>
    </resource>
</web-resource>

Next, master-scripts, remove and replace with: (3 scripts into 2)

<web-resource key="master-scripts" i18n-name-key="admin.web.resources.plugin.master.scripts.name">
    <resource type="download" name="master-scripts.js" location="/includes/js/master-scripts.js">
        <param name="source" value="webContext"/>
    </resource>
    <resource type="download" name="PageNotification.js" location="/dwr/interface/PageNotification.js">
        <param name="source" value="webContext"/>
    </resource>
</web-resource>
  • NB: I found that /dwr is not in the standard web path, and seems to be dynamic, so in this case I've left PageNotification.js as it is.

Next, scriptaculous, remove and replace with: (4 scripts into 1)

<web-resource key="scriptaculous" name="Scriptaculous" i18n-name-key="admin.web.resources.plugin.scriptaculous.name">
    <resource type="download" name="scriptaculous-combo.js" location="/includes/js/scriptaculous/src/scriptaculous-combo.js">
        <param name="source" value="webContext"/>
    </resource>
</web-resource>

And finally, JQuery, remove and replace with: (2 scripts into 1)

<web-resource key="jquery" name="JQuery" i18n-name-key="admin.web.resources.plugin.jquery.name">
    <resource type="download" name="jquery-combo.js" location="/includes/js/jquery-combo.js">
            <param name="source" value="webContext"/>
    </resource>
</web-resource>

Copy our new file into WEB-INF/classes/plugins, to override the one used in the jar

In this step, we will simply copy our new web-resources.xml file into correct place in the Tomcat classpath. This will override the one used in the Confluence jar file.

# Copy the new jar back
mkdir $WEBINF/classes/plugins
cp plugins/web-resources.xml $WEBINF/classes/plugins
# set permissions/ownership here if necessary, to make the file readable by Tomcat

Create new combination JS and CSS files

Now we need to create the new files we referenced in the web-resources.xml file:

# Specify the path to our confluence CSS folder
# Edit this line for your real confluence CSS path
export INCLUDESFOLDER=/confluence/tomcat/webapps/ROOT/includes

# Note that we use a cp -a to create each file, make sure permissions/ownership remain the same as the other files.
# This saves having to chown/chmod the files later.

# master-styles.css
cd $INCLUDESFOLDER/css
cp -a master.css master-styles.css
cat wiki-content.css >>master-styles.css
cat tabs.css >>master-styles.css
cat menu.css >>master-styles.css
cat tables.css >>master-styles.css
cat panels.css >>master-styles.css
cat renderer-macros.css >>master-styles.css
cat information-macros.css >>master-styles.css
cat layout-macros.css >>master-styles.css

# master-styles-ie.css
cd $INCLUDESFOLDER/css
cp -a menu-ie.css master-styles-ie.css
cat master-ie.css >>master-styles-ie.css

# master-scripts.js
cd $INCLUDESFOLDER/js
cp -a master.js master-scripts.js
cat menu.js >>master-scripts.js

# jquery-combo.js
cd $INCLUDESFOLDER/js
cp -a jquery/jquery-1.2.3.min.js jquery-combo.js
cat jquery-compatibility.js >>jquery-combo.js

# scriptaculous-combo.js
cd $INCLUDESFOLDER/js/scriptaculous/src
cp -a effects.js scriptaculous-combo.js
cat dragdrop.js >>scriptaculous-combo.js
cat controls.js >>scriptaculous-combo.js
cat util.js >>scriptaculous-combo.js

Test

Ok, all done!
  • Next, restart Confluence and check the View Source of some of the pages.
  • You should notice it is using our new combination files.
  • Make sure everything is working properly, then document, document, document etc.. for the next time you upgrade Confluence.

navigation
metawerx specific
search
Share
tools
help

referring pages

Share