Performance guidelines for themes and skins

Performance guidelines for themes and skins

After installation, WebSphere Portal provides a default theme and skin that demonstrate the rich set of portal functions. If site does not require all of the functionality provided by the shipped themes and skins, you can realize performance benefits by selectively removing some of those functions. Some of the features, items, and functions described in the tables below may be available only in themes and skins created for releases prior to the current release. Also, some features, items, and functions described may only be available in the current release and not present in older themes and skins.
If you choose to remove the links for signing up, forgetting passwords, or editing profiles, see the topic about Registration, Edit My Profile and Login.

Guidelines
Use the following guidelines when making decisions that affect the development of custom themes and skins. These guidelines describe the relative pathlength involved with the inclusion of various components of themes and skins. A number of the following changes are already implemented in the Portal theme. However, the functionality described is still supported and may have an impact on design choices for theme. To further aid in design decisions, the Portal theme's approach to each guideline is listed in the following table:

Guideline Effect on functionality Effect on performance Portal theme approach
Remove Show tools icon from the toolbar Prevents users from displaying icons on pages and portlets used to arrange or remove content on the page. High impact on pathlength required to generate the page Show tools options are included through asynchronous menus.
Remove enrollment icon from the toolbar Prevents new visitors to the site from creating a new account for themselves. High impact on pathlength required to generate the page Enrollment included through asynchronous menu.
Remove self care icon from the toolbar Prevents users from updating account information. High impact on pathlength required to generate the page Edit Profile included through asynchronous menu.
Remove AdminLinkBarInclude.jsp Removes context-sensitive links that allow authorized users to create a new page, edit the current page, or assign permissions to the current page. High impact on pathlength required to generate the page These options are included through asynchronous menu.
Remove <portal:favoritesLoop/> and supporting code Removes the ability for users to bookmark pages in the portal High impact on pathlength required to generate the page Not included in the theme.
Shrink lines of text to remove white space With some editors, white space might be used to aid in readability during theme development Low impact on bandwidth required to transmit the page. JSPs are not compacted for readability.
Change all HTML comments to JSP comments None Low impact on bandwidth required to transmit the page. Mostly JSP comments used.

As noted earlier, not all of the above guidelines for the Portal theme may apply to all the available themes for WebSphere Portal. For example, the following guidelines do not apply to the Tab Menu - Page Builder theme:

Remove Show tools icon from the toolbar

Remove AdminLinkBarInclude.jsp

Remove <portal:favoritesLoop/> and supporting code
Table 2. Guides for a lightweight skin

Guideline Effect on functionality Effect on performance IBM Skin approach
Remove minimize, restore, and maximize buttons Prevents users from manipulating the size and state of the portlets on the page High impact on pathlength required to generate the page These options are included through asynchronous menu.
Place the JSP tags for the Back, Edit, and Configure icons inside the <portal-logic:if loggedIn="yes"> tag. No impact to users. Prevents unauthenticated (anonymous) users from attempting to access resources that are protected. For users that are logged in, this adds an extra JSP tag for processing. Processing of the <portal-logic:if loggedIn> tag has much less impact on performance than the access control checks to determine if a user has access to Edit and Configure portlet modes. Medium impact on pathlength required to generate the page None.
Shrink lines of text to remove white space With some editors, white space might be used to aid in readability during skin development Low impact on bandwidth required to transmit the page. JSPs are left uncompacted for readability.
Remove drag and drop tags. Users will be unable to drag and drop portlets on a page or from the Portlet Palette onto a page. Medium impact on bandwidth required to transmit the page. None.
Change all HTML comments to JSP comments None Low impact on bandwidth required to transmit the page. Mostly JSP comments are already used.

As noted earlier, not all of the above guidelines for the IBM skin may apply to all the available skins for WebSphere Portal. For example, the Tab Menu - Page Builder theme does not use drag and drop tags. It uses the Dojo drag and drop framework. Hence, the Remove drag and drop tags guideline does not apply to the Tab Menu - Page Builder and the corresponding skins. If starting point is the IBM skin, remember that portlet menus are loaded asynchronously and the changes to the options available mentioned below (removing window state choices, surrounding in <portal-logic:if loggedIn> tag) will not affect the initial page size. The changes will affect the size of the page required to generate the contents of the portlet menu.

Static resources
If possible, any CSS or JavaScript that is included either in a theme, skin, portlet application, widget, or by any other extension should be built together either at buildtime or runtime, and then minimized and compressed to remove comments and unnecessary whitespace. This decreases the overall size of these files, reduces the number of HTTP requests the browser must make to aggregate the page, and reduces the load on the Web servers and Portal server. Using CSS sprites in themes, skins, and portlets can improve performance as well for the same reasons.

Parent
Customize the portal
Portal style classes
Work with portal navigation
Use JSTL tags in the portal JSPs
Registration/Edit My Profile and Login portlets

Related tasks

Import a theme
Deploy the theme
Create a new skin
Enable automatic JSP reloading
Add support for new clients
Add support for new markup languages
Change banner text
Use the color palette in themes

Change the page help

+
Search Tips | Advanced Search

Guideline	Effect on functionality	Effect on performance	Portal theme approach
Remove Show tools icon from the toolbar	Prevents users from displaying icons on pages and portlets used to arrange or remove content on the page.	High impact on pathlength required to generate the page	Show tools options are included through asynchronous menus.
Remove enrollment icon from the toolbar	Prevents new visitors to the site from creating a new account for themselves.	High impact on pathlength required to generate the page	Enrollment included through asynchronous menu.
Remove self care icon from the toolbar	Prevents users from updating account information.	High impact on pathlength required to generate the page	Edit Profile included through asynchronous menu.
Remove AdminLinkBarInclude.jsp	Removes context-sensitive links that allow authorized users to create a new page, edit the current page, or assign permissions to the current page.	High impact on pathlength required to generate the page	These options are included through asynchronous menu.
Remove <portal:favoritesLoop/> and supporting code	Removes the ability for users to bookmark pages in the portal	High impact on pathlength required to generate the page	Not included in the theme.
Shrink lines of text to remove white space	With some editors, white space might be used to aid in readability during theme development	Low impact on bandwidth required to transmit the page.	JSPs are not compacted for readability.
Change all HTML comments to JSP comments	None	Low impact on bandwidth required to transmit the page.	Mostly JSP comments used.

Guideline	Effect on functionality	Effect on performance	IBM Skin approach
Remove minimize, restore, and maximize buttons	Prevents users from manipulating the size and state of the portlets on the page	High impact on pathlength required to generate the page	These options are included through asynchronous menu.
Place the JSP tags for the Back, Edit, and Configure icons inside the <portal-logic:if loggedIn="yes"> tag.	No impact to users. Prevents unauthenticated (anonymous) users from attempting to access resources that are protected. For users that are logged in, this adds an extra JSP tag for processing. Processing of the <portal-logic:if loggedIn> tag has much less impact on performance than the access control checks to determine if a user has access to Edit and Configure portlet modes.	Medium impact on pathlength required to generate the page	None.
Shrink lines of text to remove white space	With some editors, white space might be used to aid in readability during skin development	Low impact on bandwidth required to transmit the page.	JSPs are left uncompacted for readability.
Remove drag and drop tags.	Users will be unable to drag and drop portlets on a page or from the Portlet Palette onto a page.	Medium impact on bandwidth required to transmit the page.	None.
Change all HTML comments to JSP comments	None	Low impact on bandwidth required to transmit the page.	Mostly JSP comments are already used.