As part of our ongoing efforts to help publishers improve Core Web Vitals, we’re sharing key best practices to reduce Cumulative Layout Shift (CLS) and deliver a smoother, more stable browsing experience for your audience.

These recommendations are based on observations across multiple sites and focus on optimizing how elements load and render.

1. Define Height and Width for the Header Logo

• Set fixed dimensions for your site logo via Page Builder → Header Settings → Logo.
• Using defined values prevents the header from resizing during load.
• Ensure dimensions are reasonable (avoid extreme values) for a balanced layout across devices.
   

2. Set Widget Height for Mobile and Desktop

• Widgets without defined heights can cause visible content jumps when they load.
• Assign fixed heights for both desktop and mobile views in Page Builder.
• This ensures the layout remains stable even while data or images are loading.

3. Use Widgets Instead of Ad Slots for Leaderboard Ads

• Whenever possible, configure leaderboard ads as widgets in Page Builder.
• Widgets allow you to control and reserve a fixed height, reducing unexpected layout shifts.

4. For Responsive Leaderboard Ads, Reserve Space for the Largest Size

• If responsive ads are required, set the maximum widget height to accommodate the largest possible ad size.
• This avoids shifts when ads resize to fill space dynamically.
• Consider using a billboard or custom widgets with a defined max height for more control.
• For first-fold ads, define a fixed height for both mobile and desktop to maintain layout stability.
• For pop ads, set a fixed height and configure them to appear with a 6-second delay.

5. Integrate Third-Party Scripts via Page Builder

• Where possible, add integrations like Google Analytics, Google Tag Manager, or Google Ad Manager directly through Page Builder’s settings instead of manually adding custom code.
• This ensures better loading behaviour and consistent performance compared to manually inserting scripts.