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

Sera CLS Guard Pro: Complete Feature Guide

2026-03-0110 min read

Sera CLS Guard Pro: Complete Feature Guide

CLS Guard Pro is the premium version of CLS Guard, adding a real-time monitoring dashboard, analytics, auto-fixer, learning mode, and per-page overrides. It requires Sera Core.

Dashboard

The CLS Guard Pro dashboard (Sera > CLS Guard Pro) 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

CLS Guard Pro 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 > CLS Guard Pro > Settings
  2. Enter your PageSpeed API key
  3. Enable scheduled PageSpeed checks

CLS Guard Pro 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 CLS Guard Pro 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 CLS Guard Pro > 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 CLS Guard Pro > Settings > Rescue Mode or by adding ?sera-rescue=1 to any page URL.

Export/Import Settings

Transfer your CLS Guard Pro 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