Instant downloads • Annual updates
S
Sera.guru
DocsPlugin GuidesSera CLS Guard: Setup & Configuration

Sera CLS Guard: Setup & Configuration

2026-03-016 min read

Sera CLS Guard: Setup & Configuration Guide

Sera CLS Guard is a free, lightweight plugin that prevents Cumulative Layout Shift (CLS) caused by ads, images, and dynamic content. It works with zero JavaScript overhead and under 1KB of CSS.

What is CLS?

Cumulative Layout Shift (CLS) is a Core Web Vital metric that measures visual stability. When elements on your page move unexpectedly — like an ad loading and pushing content down — that is layout shift. Google uses CLS as a ranking factor, so a poor CLS score can hurt your search rankings.

How CLS Guard Works

CLS Guard injects minimal CSS rules that:

  1. Pre-size ad containers — Reserves space for ads before they load, preventing the page from jumping when ads appear
  2. Stabilize anchor ads — Prevents bottom-anchored ads from pushing page content up
  3. Protect against vignette overlays — Stops full-screen interstitial ads from causing layout shift
  4. Prevent container resizing — Locks container dimensions to prevent dynamic content from changing layout

Installation

  1. Download sera-cls-guard.zip from sera.guru
  2. Go to Plugins > Add New > Upload Plugin
  3. Upload and activate

CLS Guard works immediately after activation with sensible defaults. No configuration required.

Configuration

Navigate to Settings > CLS Guard (or Sera > CLS Guard if Sera Core is installed):

Ad Container Settings

  • Enable ad pre-sizing — Toggle on/off (default: on)
  • Default ad height — Set the reserved height for ad containers (default: 250px)
  • Ad selectors — CSS selectors for your ad containers (auto-detects AdSense by default)

Anchor Ad Settings

  • Stabilize anchor ads — Prevents bottom-anchored ads from shifting content (default: on)
  • Anchor ad height — Reserved height for anchor ads (default: 100px)

Vignette Protection

  • Block vignette shift — Prevents full-screen overlay ads from causing CLS (default: on)

Sera Core Integration (Optional)

If Sera Core is installed, CLS Guard will:

  • Register itself in the Hub Registry
  • Send CLS alerts to the Alert Center
  • Be manageable from the Sera Dashboard

This integration is optional — CLS Guard works perfectly fine as a standalone plugin.

When to Upgrade to CLS Guard Pro

Consider upgrading if you need:

  • Real-time CLS monitoring dashboard
  • Historical analytics and trend charts
  • Per-page override system
  • Google PageSpeed API integration
  • Automatic CSS fix generation
  • Learning mode that adapts to your site