Fix CLS Issues on Bookmark (Layout Shift) | OpsBlu Docs

Fix CLS Issues on Bookmark (Layout Shift)

Stabilize Bookmark AI-builder layouts by sizing hero images, preloading custom fonts, and constraining AiDA-generated section containers.

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. Bookmark sites built with the AiDA AI engine suffer CLS from image-heavy sections loading at unknown heights, font swaps, and widget injection.

Bookmark-Specific CLS Causes

  • AiDA section height variability -- AI-generated sections render at different heights depending on content and images, causing shifts as each section loads
  • Background images loading late -- full-width section background images cause the section to resize once the image dimensions are known
  • Widget loading delays -- third-party widgets (maps, social feeds, chat) inject content after initial render
  • Font loading flicker -- Bookmark loads Google Fonts that swap with system fonts, causing text reflow across all sections
  • Mobile menu animation -- Bookmark's mobile navigation transition can shift page content

Fixes

1. Constrain Section Heights via Custom CSS

Use Bookmark's custom CSS feature (Settings > Custom Code) to set minimum heights on AI-generated sections:

/* Reserve space for hero section */
.section-hero,
[data-section-type="hero"] {
  min-height: 600px;
  contain: layout;
}

/* Standard content sections */
.section-content,
[data-section-type="features"] {
  min-height: 400px;
  contain: layout;
}

/* Image gallery sections */
[data-section-type="gallery"] {
  min-height: 500px;
  contain: layout;
}

/* Prevent all sections from collapsing during load */
section {
  contain: layout style;
}

2. Fix Background Image Shifts

Bookmark sections often use CSS background images that load after layout is calculated:

/* Add to custom CSS -- prevent background image reflow */
.section-with-bg {
  background-size: cover;
  background-position: center;
  /* Set aspect ratio to prevent height change when bg loads */
  min-height: 50vw;
  max-height: 80vh;
}

/* For inline images within sections */
.section img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

3. Handle Widget Loading CLS

Wrap widget areas in fixed-size containers using custom code:

<!-- Add in Bookmark's custom code for widget containers -->
<style>
  /* Google Maps widget */
  .widget-map {
    min-height: 400px;
    contain: layout;
    background: #e5e5e5; /* Placeholder color */
  }

  /* Social feed widgets */
  .widget-social {
    min-height: 300px;
    contain: layout;
  }

  /* Chat widget button -- ensure fixed positioning */
  .chat-widget,
  #tidio-chat,
  .livechat-widget {
    position: fixed !important;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
  }
</style>

4. Fix Font Loading Shifts

<!-- Add to Bookmark custom header code -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<style>
  /* Force font-display swap on all @font-face declarations */
  @font-face {
    font-display: swap !important;
  }

  /* Set fallback font metrics to minimize shift */
  body, p, span, li {
    font-synthesis: none;
  }
</style>

5. Prevent Mobile Menu CLS

Bookmark's mobile navigation can push page content when it opens:

/* Ensure mobile menu overlays rather than pushes content */
@media (max-width: 768px) {
  .mobile-nav,
  .nav-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .mobile-nav.active,
  .nav-mobile-menu.open {
    transform: translateX(0);
  }

  /* Reserve consistent header height */
  header, .site-header {
    height: 60px;
    min-height: 60px;
  }
}

Measuring CLS on Bookmark

  1. PageSpeed Insights -- check both mobile and desktop; Bookmark sites often have different CLS on each
  2. Chrome DevTools Performance tab -- record a page load and look at layout-shift entries in the Experience lane
  3. Test AiDA pages specifically -- AI-generated pages tend to have more sections and therefore more CLS opportunities than manually-built pages
  4. Scroll test -- some CLS occurs during scrolling as lazy-loaded sections appear; use the Web Vitals extension to monitor CLS throughout the session

Analytics Script Impact

  • Bookmark Analytics (built-in) -- minimal CLS impact, runs server-side
  • Google Analytics via Bookmark integration -- no CLS impact when loaded async
  • Chat widgets -- the biggest CLS risk; Tidio, LiveChat, and similar tools inject floating buttons that can shift footer content if not position: fixed
  • Cookie consent banners -- if added via custom code, ensure position: fixed overlay positioning
返回顶部