Instant downloads • Lifetime updates
S
Sera.guru
DocsPlugin GuidesSera AI CLS Guard: Complete Feature Guide

Sera AI CLS Guard: Complete Feature Guide

2026-03-0110 min read

Sera AI CLS Guard: Complete Feature Guide

Sera AI CLS Guard is the AI-powered upgrade to Sera CLS Guard, adding a real-time monitoring dashboard, deep analytics, intelligent auto-fixer, learning mode, and per-page overrides. It requires Sera Core.

Dashboard

The Sera AI CLS Guard dashboard (Sera > AI CLS Guard) provides:

  • Current CLS Score: Real-time CLS measurement for your site
  • Score History: Trend chart showing CLS score over time (daily, weekly, monthly)
  • Top Offenders: Pages with the highest CLS scores
  • Recent Shifts: Timeline of detected layout shift events

Analytics

Historical Data

Sera AI CLS Guard records CLS data over time, allowing you to:

  • Track CLS improvements after making changes
  • Identify patterns (e.g., CLS spikes during high-traffic periods)
  • Compare CLS scores before and after plugin updates

Per-Page Analysis

View CLS data for individual pages:

  • CLS score and breakdown by element
  • Shift sources (ads, images, fonts, dynamic content)
  • Recommendations for fixing each shift source

Google PageSpeed API Integration

Connect your Google PageSpeed API key to get lab-based CLS data alongside your field data:

  1. Go to Sera > AI CLS Guard > Settings
  2. Enter your PageSpeed API key
  3. Enable scheduled PageSpeed checks

Sera AI CLS Guard will periodically test your pages through the PageSpeed API and compare results with real-user CLS data.

Learning Mode

Learning Mode monitors your site for a configurable period (default: 7 days) and:

  1. Records all layout shift events
  2. Identifies the CSS selectors causing shifts
  3. Generates targeted CSS fixes
  4. Presents fixes for your review before applying

This is the recommended way to set up Sera AI CLS Guard on a new site. Let it learn your site's behavior before applying fixes.

Auto-Fixer

The Auto-Fixer automatically generates and applies CSS rules to prevent detected layout shifts:

  • Image dimension enforcement: Adds width/height attributes to images missing them
  • Ad container pre-sizing: Generates precise container sizes based on observed ad dimensions
  • Font display optimization: Adds font-display: swap rules to prevent font-loading shifts
  • Dynamic content stabilization: Locks container heights for elements that load asynchronously

You can review, edit, or revert any auto-generated fix from the dashboard.

Per-Page Overrides

Create custom CLS rules for specific pages:

  1. Go to AI CLS Guard > Overrides
  2. Enter the page URL or select from a list
  3. Configure page-specific settings (ad heights, selectors, exclusions)

This is useful for pages with unique layouts that need different CLS prevention rules.

Rescue Mode

If a CLS fix causes visual issues, Rescue Mode lets you:

  1. Disable all auto-generated fixes with one click
  2. Revert to the last known good configuration
  3. Selectively re-enable fixes one at a time

Access Rescue Mode from AI CLS Guard > Settings > Rescue Mode or by adding ?sera-rescue=1 to any page URL.

Export/Import Settings

Transfer your Sera AI CLS Guard configuration between sites:

  • Export: Downloads a JSON file with all settings, overrides, and custom rules
  • Import: Upload a JSON file to apply settings from another site

Scheduled Scans

Set up automated CLS scans:

  • Frequency: Daily, weekly, or custom schedule
  • Pages: Scan all pages, specific URLs, or pages matching a pattern
  • Alerts: Get notified when CLS score exceeds a threshold