Fix IBM Web Content Manager CLS Issues | OpsBlu Docs

Fix IBM Web Content Manager CLS Issues

Stabilize IBM WCM layouts by reserving portlet containers, sizing DAM image components, and preloading DX theme fonts.

General Guide: See Global CLS Guide for universal concepts and fixes.

What is CLS?

Cumulative Layout Shift measures visual stability. Google recommends CLS under 0.1. IBM WCM on WebSphere Portal generates CLS from portlet container rendering, dynamic WCM content spots, and theme asset loading.

IBM WCM-Specific CLS Causes

  • Portlet container rendering -- portlets render independently and at different speeds, causing their containers to resize as content arrives
  • WCM content spot variability -- content spots render dynamic content of varying heights
  • DynaCache fragment loading -- cached fragments load at different times, shifting surrounding portlets
  • Theme font loading -- Portal themes load custom fonts that cause FOUT
  • Banner/notification portlets -- alert banners injected at the top of the page push all content down

Fixes

1. Reserve Space for Portlet Containers

Set minimum heights for portlet containers in your theme CSS:

/* Portal layout container sizing */
.wpthemeCol .component-container { min-height: 200px; contain: layout; }
.wpthemeBanner .component-container { min-height: 300px; contain: layout; }
.wpthemeSidebar .component-container { min-height: 150px; contain: layout; }

/* Specific portlet types */
.wpsPortletBody { contain: layout; }
.lotusContent { min-height: 100px; }

2. Fix WCM Content Spot Sizing

In WCM presentation templates, wrap content in fixed containers:

<!-- WCM presentation template with reserved space -->
<div class="wcm-content-area" style="min-height: 400px; contain: layout;">
  [Component name="main_content"]
</div>

<div class="wcm-sidebar" style="min-height: 300px; contain: layout;">
  [Component name="sidebar_content"]
</div>

3. Fix Image Dimensions in WCM Templates

<!-- In WCM image component or presentation template -->
<img
  src="[Component name='article_image' format='url']"
  width="800" height="450"
  alt="[Property field='title']"
  style="aspect-ratio: 800/450; width: 100%; height: auto;"
  loading="lazy"
/>

4. Handle Alert Banner CLS

/* Portal alert banners -- use fixed position overlay */
.portal-alert-banner, .wpthemeAlert {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* Reserve space if using push-down banners */
body.has-alert { padding-top: 50px; }

5. Preload Theme Fonts

<!-- In Portal theme head.jsp or theme.html -->
<link rel="preload" href="/portal_dojo/portal_theme/fonts/brand.woff2" as="font" type="font/woff2" crossorigin />

@font-face {
  font-family: 'PortalFont';
  src: url('/portal_dojo/portal_theme/fonts/brand.woff2') format('woff2');
  font-display: swap;
}

Measuring CLS on IBM WCM

  1. Chrome DevTools Performance tab -- look for layout shifts during portlet rendering
  2. Test portal pages with multiple portlets -- these have the highest CLS
  3. Test authenticated vs. anonymous -- authenticated pages may load different portlets with different CLS characteristics
  4. WebSphere Portal trace -- enable portlet render timing to identify slow portlets

Analytics Script Impact

  • IBM Digital Analytics loads async by default -- minimal CLS
  • Cookie consent banners should use fixed-position overlays
  • Custom portlet-based analytics widgets should be placed in fixed-height containers
Back to top