Fix Oracle WebCenter Sites CLS Issues | OpsBlu Docs

Fix Oracle WebCenter Sites CLS Issues

Stabilize Oracle WebCenter layouts by reserving asset template containers, sizing managed images, and preloading portal 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. Oracle WebCenter Sites generates CLS from Satellite Server fragment assembly (page sections load asynchronously via ESI/AJAX), BlobServer images without dimensions, slot-based layout templates with variable-height content, and personalization content swaps via Maxymiser.

Oracle WebCenter Sites-Specific CLS Causes

  • Satellite Server fragment assembly -- fragments rendered via <satellite:include> load after the initial page frame, pushing content around
  • BlobServer images without dimensions -- images served via BlobServer URLs have no width/height in the generated HTML
  • Slot-based layout variability -- WCS Layout templates define slots that render different asset types with unpredictable heights
  • Maxymiser personalization swaps -- Oracle Maxymiser replaces default content with targeted variants after initial render
  • Recommendation widget loading -- WCS Engage (recommendations) injects product/content cards after page load

Fixes

1. Size Images in Detail Templates

Add explicit dimensions when rendering BlobServer images:

<%-- In your Detail template JSP --%>
<%
  // Get image dimensions from the asset's metadata
  String width = ics.GetVar("imageWidth");
  String height = ics.GetVar("imageHeight");
  if (width == null) width = "1200";
  if (height == null) height = "630";
%>
<div class="hero-image" style="aspect-ratio: <%= width %>/<%= height %>; overflow: hidden;">
  <img
    src="/cs/BlobServer?blobkey=id&blobwhere=<%= imageId %>&blobcol=urldata"
    width="<%= width %>" height="<%= height %>"
    alt="<%= assetName %>"
    style="width: 100%; height: 100%; object-fit: cover;"
  >
</div>

2. Reserve Space for Slot Containers

Set minimum heights for each slot type in your Layout template:

/* Slot container containment */
.slot-header { min-height: 64px; contain: layout; }
.slot-hero { min-height: 500px; aspect-ratio: 16/6; contain: layout; }
.slot-sidebar { min-height: 300px; contain: layout; }
.slot-content-list { min-height: 400px; contain: layout; }
.slot-footer { min-height: 200px; contain: layout; }

/* Generic WCS slot containment */
[data-wcs-slot] {
  contain: layout;
}

In the Layout template JSP:

<%-- Wrap satellite:include calls in sized containers --%>
<div class="slot-sidebar" style="min-height: 300px; contain: layout;">
  <satellite:include pagename="Sidebar/Render"
    c="<%= ics.GetVar("c") %>"
    cid="<%= ics.GetVar("cid") %>"/>
</div>

3. Handle Satellite Fragment CLS

When using ESI or AJAX fragment inclusion, reserve space:

<%-- In Layout template --%>
<div class="fragment-container" style="min-height: 250px; contain: layout;">
  <%-- ESI include --%>
  <esi:include src="/cs/Satellite/site/fragment?c=Widget&cid=<%= widgetId %>"/>
</div>

/* Fragment loading state */
.fragment-container {
  contain: layout;
  min-height: 100px;
}

.fragment-container:empty::before {
  content: '';
  display: block;
  min-height: inherit;
}

4. Constrain Personalization Slots

If using Oracle Maxymiser or WCS Engage:

/* Maxymiser recommendation containers */
[data-maxymiser-zone] {
  contain: layout;
  min-height: 200px;
}

/* Engage recommendation widgets */
.wcs-engage-recs {
  min-height: 350px;
  contain: layout;
}

/* Transition instead of instant swap */
[data-maxymiser-zone] {
  transition: opacity 0.2s ease;
}

5. Preload Theme Fonts

<%-- In Layout template <head> --%>
<link rel="preload" href="/cs/Satellite/theme/fonts/brand.woff2"
      as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'BrandFont';
  src: url('/cs/Satellite/theme/fonts/brand.woff2') format('woff2');
  font-display: swap;
  size-adjust: 103%;
}

Measuring CLS on Oracle WCS

  1. Chrome DevTools Performance tab -- record page load and filter for layout-shift entries, especially during fragment assembly
  2. Test pages with multiple slots -- Layout templates with sidebar + content + recommendation slots have the highest CLS risk
  3. Test with Maxymiser disabled -- compare CLS with personalization active vs. bypassed (?maxymiser=off if configured)
  4. Satellite Server timing -- check fragment render order; fragments that load significantly after the page frame cause the worst shifts

Analytics Script Impact

  • Oracle Maxymiser is the biggest CLS risk from the analytics/personalization side -- always reserve container space
  • WCS Engage recommendations should render in fixed-height containers
  • GTM/GA scripts should load with async in the Layout template footer
  • Avoid synchronous third-party scripts in slot templates
शीर्ष पर वापस जाएँ