Beaver Builder Layout Shifts happen when page content moves after the initial rendering has already started. Visitors see buttons jumping down, text moving sideways, or images appearing where nothing was before. Beaver Builder layouts sometimes experience this problem when certain resources load later than others. Google measures these layout shifts through a metric called Cumulative Layout Shift (CLS). Poor CLS scores negatively affect search engine rankings and user experience on the website.
Why Beaver Builder layouts shift during page loading
Web fonts often cause layout shifts because they take time to download from external servers. When a font loads, the text size may change, pushing other elements around the page unexpectedly.
Images without explicit width and height attributes can also cause shifts when they finally load. Lazy loading images reserve no space initially, so content jumps when images appear later. Embeds like YouTube videos and Google Maps also create empty space that fills after loading.
How to measure layout shifts on Beaver Builder websites
Google PageSpeed Insights provides a CLS score that measures layout shift problems on pages.
A score below 0.1 is considered good, while scores above 0.25 are considered poor.
Use browser developer tools with the Layout Shift Regions feature enabled for visual debugging.
This feature highlights elements that shift during loading with a blue overlay on the screen.
Recording a video of the page loading helps identify which elements shift and when they move.
Step by step guide to fixing Beaver Builder layout shifts
Follow these steps to reduce or eliminate layout shifts on Beaver Builder pages completely.
- Add explicit width and height attributes to all images in Beaver Builder modules
- Enable the “Preserve space for images” option in Beaver Builder image module settings
- Host web fonts locally instead of loading them from Google Fonts or other external services
- Use font-display: swap CSS property to show fallback fonts while custom fonts load
- Reserve space for embeds by wrapping them in containers with fixed aspect ratios
- Set minimum heights for lazy-loaded sections to prevent content from jumping around
- Avoid inserting content above existing content after the page has started loading
- Use CSS to define dimensions for any element that might load after the initial render
- Test all changes using Google PageSpeed Insights to measure CLS score improvements
- Repeat the process until the CLS score falls below 0.1 for all pages on the website
How to reserve space for lazy loaded images in Beaver Builder
In Beaver Builder image module settings, look for the “Lazy Load” option under the Advanced tab.
Enable the “Preserve space” or “Aspect Ratio” setting if available in the Beaver Builder version.
Set a fixed aspect ratio like 16:9 or 4:3 that matches the image dimensions being loaded.
Add custom CSS to set minimum heights for lazy-loaded sections if module settings are not available.
.fl-module-lazy-image { min-height: 200px; background: #f5f5f5; }
Beaver Builder layout shift troubleshooting reference table
Here is a reference table for diagnosing layout shift problems in Beaver Builder layouts.
| Symptom | Most likely cause | Recommended solution |
|---|---|---|
| Text jumps after page loads | Web fonts loading after fallback fonts | Host fonts locally or use font-display: swap |
| Images cause content to shift down | No width or height attributes on images | Add explicit dimensions to all image modules |
| Embeds cause large layout shifts | YouTube or Maps embed loads late | Wrap embeds in responsive container with aspect ratio |
| Lazy loaded content shifts everything | No space reserved before lazy loading | Enable preserve space for lazy loaded elements |
| Buttons or menus shift after fonts load | Font size changes when custom font applies | Use font-display: swap and reserve space for text |
For more information about optimizing Beaver Builder for Core Web Vitals, visit the Beaver Builder page on wpwizzy.com.
Preventing Beaver Builder layout shifts in the future
- Always set explicit dimensions for every image uploaded to the Beaver Builder media library.
- Test every page after publishing using Google PageSpeed Insights to catch layout shift problems early.
- Host all web fonts locally instead of relying on external font loading services for better performance.
- Use responsive embeds with fixed aspect ratios for all external content like videos and maps.
- Avoid inserting dynamic content above existing content after the initial page load completes.
- Monitor CLS scores regularly as part of ongoing website maintenance and optimization routines.