Skip to end of metadata
Go to start of metadata

Hi,

I really like your new design of the adaptavist website. Curious as I am, a couple of questions rise:

  1. The new site seems a lot faster than the old one. Is it only a different way of using ATB, or has the hardware improved? If ATB, what changes did contribute to better performance?
  2. What did you do in order to show the watchmenu icon on IE6? The previous website didn't show that.
  3. Is there any reason why you choose not to use pulldown menu's?

Thanks in advance, regards,

Herman.

  • No labels

3 Comments

  1. 1. The hardware is still the same, however the layout is more efficient and there have been some changes in the theme to optimise the way that some files are cached & generated. Also the 'flag' code allows you to perform complex checks once and then store the result in a flag, this has allowed us to cut down on the work that the theme needs to do.

    2. Thats a bugfix added to 3.3.4, we have prevented the PieNG script from applying the filters to the 8 bit menuicon PNG's since IE6 has a bug whereby when you apply alpha filters to 8 bit png's to get them to display correctly IE6 decides to hide them completely .. sigh!

    3. We are using pulldown menus, for instance the cog to the right of the watch menu is a menubar containing tools, also the spaces tab displays a dropdown of spaces.

  2. Unknown User (gfraser)

    The performance improvements came from the following:

    • Removal of about 30 image files - current theme layout only has 2 (excluding icons, logo, etc).
    • Flag logic - huge simplification in the way we decide what navigation to show, to who, and where, etc.
    • Much cleaner panel content - less work for the wiki renderer

    Essentially we applied all the knowledge we've gained over the past year from constantly pushing the limits of what Confluence can do. (smile)

    It's still not as fast as a hard-coded Java theme would be (eg. default Confluence theme), however when you consider the added functionality, flexibility and maintainability of the implementation it's been well worth it.

    As for pull-down menus, we wanted to allow the section links (those between tabs and breadcrumbs) to be right- or middle-clickable (eg. to open in new tab, copy URL, etc).

    There's actually two menus in use in the new design - the tabs at the top of the page (because we wanted a drop-down list of bookmarked spaces on the Spaces tab) and the links/icons to the right of the page title (new topic, favourite menu, etc). We completely hide the latter menu (new topic, favourite, etc) from anonymous visitors (via flag logic) to reduce load on the server.

    We're hoping to convince Atlassian to make some modifications to Confluence that will help improve performance further, particularly the removal or simplification of the veritable herd of JavaScript and CSS files that Confluence spews out - there's literally dozens of them:

    <link rel="stylesheet" href="/s/1517/1/8/_/styles/main-action.css?spaceKey=Builder" type="text/css">
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/master.css" title="Confluence Master Stylesheet" media="all"/>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/wiki-content.css" media="all"/>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/tabs.css" media="all"/>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/menu.css" media="all"/>
    <!--[if IE]>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/menu-ie.css" media="all"/>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/tables.css" media="all"/>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/panels.css" media="all"/>
    <!--[if IE]>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/master-ie.css" title="Master-IE" media="all"/>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/renderer-macros.css" media="all"/>
    
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/content-types.css" media="all"/>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/information-macros.css" media="all"/>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Amaster-styles/layout-macros.css" media="all"/>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Ajquery/jquery.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Ajquery/jquery-compatibility.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Ajquery/jquery.dimensions.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Aajs/atlassian.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Adrop-down/drop-down.js" ></script>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Adrop-down/drop-down.css" media="all"/>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Acontentnamesearch/contentnamesearch.js" ></script>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Acontentnamesearch/contentnamesearch.css" media="all"/>
    
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Aprototype/prototype.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Ascriptaculous/effects.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Ascriptaculous/dragdrop.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Ascriptaculous/controls.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Ascriptaculous/util.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Adwr/engine.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Adwr/util.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Alabels-editor/AddLabeltoEntity.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Alabels-editor/RemoveLabelFromEntity.js" ></script>
    
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Alabels-editor/SuggestedLabelsForEntity.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Alabels-editor/GenerateAutocompleteLabelsListForEntity.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Alabels-editor/uberlabels.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Alabels-editor/labels-editor.js" ></script>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Alabels-editor/autocomplete.css" media="all"/>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Alabels-editor/labels.css" media="all"/>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Aanimation/animation.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Acomments/comments.js" ></script>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Acomments/comments.css" media="all"/>
    <!--[if IE]>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Acomments/comments-ie.css" media="all"/>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Apage-editor/page-editor.css" media="all"/>
    
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Apage-editor/dwr-wysiwyg-converter.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Apage-editor/dwr-user-profile-editor.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Apage-editor/dwr-draft.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Apage-editor/dwr-heartbeat.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Apage-editor/page-editor.js" ></script>
    <script type="text/javascript" src="/s/1517/1/2.10.1/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-src.js" ></script>
    <script type="text/javascript" src="/s/1517/1/2.10.1/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-confluence-formatter.js" ></script>
    <script type="text/javascript" src="/s/1517/1/2.10.1/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-adapter.js" ></script>
    <script type="text/javascript" src="/s/1517/1/2.10.1/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-themes-advanced.js" ></script>
    
    <script type="text/javascript" src="/s/1517/1/2.10.1/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-plugins-table.js" ></script>
    <script type="text/javascript" src="/s/1517/1/2.10.1/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-plugins-paste.js" ></script>
    <script type="text/javascript" src="/s/1517/1/2.10.1/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-plugins-emotions.js" ></script>
    <script type="text/javascript" src="/s/1517/1/2.10.1/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-plugins-fullscreen.js" ></script>
    <script type="text/javascript" src="/s/1517/1/2.10.1/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-plugins-confluence.js" ></script>
    <link type="text/css" rel="stylesheet" href="/s/1517/1/2.10.1/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-editor.css" media="all"/>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Abreadcrumbs/breadcrumbs.js" ></script>
    <script type="text/javascript" src="/s/1517/1/1.0/_/download/resources/confluence.web.resources%3Aatlassian-effects/atlassian-effects.js" ></script>
    

    If Atlassian could further de-cruft their UI, simplify their CSS and JS, and merge multiple files in to single files, there would be a dramatic performance improvement.

  3. Unknown User (hboer1965)

    Hi Alain, Guy,

    thanks for the answers. Much appreciated!

    Regards, Herman