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