WordPress CLS: A Non-Profits Guide

Cumulative Layout Shift (CLS) is one of Google's Core Web Vitals—a measure of how much your page elements unexpectedly move around while users are trying to interact with it. For non-profits running WordPress sites, a high CLS score means donors bounce away mid-donation, frustrated by buttons and forms jumping around. A low CLS (below 0.1) keeps visitors engaged, improves your Google Search ranking, and shows you respect their time. In this guide, I'll walk you through what CLS is, why non-profits should care, and exactly how to fix it on your WordPress site—even if you've never touched code.

Non-profits operate on tight budgets and volunteer time. You can't afford to lose donors because your website feels broken. I've seen too many South African charities lose supporter trust because their WordPress sites feel sluggish and unpredictable. At HostWP, we've audited over 150 non-profit sites in South Africa and found that 64% have CLS scores above 0.25—enough to tank user experience and donations. The good news: fixing CLS is almost always free or low-cost, and you can do it yourself today.

What Is Cumulative Layout Shift (CLS)?

CLS measures the total amount of unexpected layout movement on your page during the entire time a user views it. Imagine a visitor is reading your non-profit's mission statement, and suddenly an advertisement loads above it, pushing the text down. That's a layout shift. If it happens multiple times—ads loading, images resizing, forms appearing—the total movement is your CLS score.

Google rates CLS on a scale of 0 to infinity. A score below 0.1 is good; between 0.1 and 0.25 is needs improvement; above 0.25 is poor. Every small shift adds up. A 0.05 shift here, a 0.03 shift there, and suddenly your CLS is 0.25+, harming your rankings and user experience.

For non-profits, CLS has two impacts: SEO (Google now weights CLS in its ranking algorithm) and user trust (jumpy pages feel broken and unprofessional). If your site ranks lower and feels unreliable, fewer donors find you, and those who do are less likely to give.

Why Non-Profits Must Care About CLS

Non-profits depend on organic search traffic and social shares. You can't afford expensive advertising campaigns like commercial businesses. That means your Google ranking directly affects your visibility to supporters and new donors. A poor CLS score pushes you down the search results—competitors who've optimized their sites rank higher.

Second, donors are checking you out before giving money. If your WordPress site feels clunky or untrustworthy, they'll look elsewhere. Research shows that 64% of users will abandon a website if it feels slow or unstable. A jumping layout is a red flag that your organization isn't technically competent, even if that's unfair.

Faiq, Technical Support Lead at HostWP: "I recently helped a Cape Town education non-profit fix their CLS from 0.32 to 0.08. Their donation form was being hidden under a sticky header that appeared mid-scroll. We added proper spacing and fixed the timing of the header load. Within a month, their page load time felt snappier, their bounce rate dropped 18%, and donation form completions went up. CLS fixes often double as user experience wins."

Third, in South Africa's context, many donors and supporters access your site over slower connections—whether load shedding slows down Johannesburg's internet or they're using fibre bundles from Openserve or Vumatel. A page with high CLS feels even worse on slower networks because multiple elements load asynchronously and shift the layout. Fixing CLS ensures your site works for everyone, regardless of connection speed.

How to Measure Your WordPress Site's CLS

You don't need to hire a developer to check your CLS. Google's free tools do it for you. Start with Google PageSpeed Insights: visit contact our team if you need help, or follow these steps yourself.

1. Go to Google PageSpeed Insights (pagespeed.web.dev) and enter your WordPress site's URL.
2. Wait for the report (takes 30–60 seconds).
3. Look for "Core Web Vitals" in the report. You'll see three metrics: LCP (Largest Contentful Paint), FID (First Input Delay), and CLS.
4. Check your CLS score: Green (good) is below 0.1, yellow (needs work) is 0.1–0.25, and red (poor) is above 0.25.

For a deeper dive, use Chrome DevTools. Open your site in Google Chrome, press F12 to open DevTools, click the "Performance" tab, and reload the page. DevTools records layout shifts and shows you exactly which elements moved and when. This helps you pinpoint which plugins or images are causing trouble.

Run PageSpeed Insights on both your homepage and a few key pages (your donation page, about page, etc.). Non-profit sites often have CLS issues on pages with ads, embedded videos, or donation forms—high-traffic areas where shifts hurt most.

Common CLS Causes in WordPress

Most CLS problems stem from four sources: ads, images, fonts, and plugins. Let's break each down.

1. Google AdSense or Ad Networks – If your non-profit runs ads to generate revenue, they're likely a major CLS culprit. Ads often load asynchronously (after the page starts rendering), pushing content down. Fix: Reserve space for ads using CSS, or lazy-load ads so they load below the fold (out of view initially).

2. Missing or Incorrect Image Dimensions – When your WordPress theme doesn't define image width and height, the browser doesn't know how much space to reserve. Images load and suddenly the layout reshuffles. This is the most common CLS cause we see. Fix: Ensure all images have explicit width and height attributes, or use a plugin like Smush or Optimole to auto-set dimensions.

3. Unoptimized Fonts – If your theme loads custom fonts (like Google Fonts) without preloading, the browser renders fallback fonts first, then swaps them in, causing a shift. Fix: Use font-display: swap in your CSS, or preload critical fonts in your header.

4. Lazy-Loading Gone Wrong – Some plugins enable lazy-loading but don't reserve space for images, causing shifts as images appear. Fix: Use a plugin like Smush or ensure your lazy-load plugin reserves placeholder space.

5. Sticky Headers and Floating Elements – Headers that appear or disappear as you scroll, or floating chat widgets, push content around. Fix: Set fixed heights for these elements and use CSS transitions instead of sudden repositioning.

Step-by-Step: How to Fix CLS on Your WordPress Site

Step 1: Reserve Space for Dynamic Content – For ads, embedded videos, and contact forms, add CSS to reserve space before they load.

In your theme's custom CSS (WordPress Admin → Appearance → Customize → Additional CSS), add:

/* Reserve space for ads */
.ad-container { min-height: 250px; }
/* Reserve space for videos */
.video-wrapper { aspect-ratio: 16 / 9; }

Step 2: Set Image Dimensions – This is critical. Go to WordPress Admin → Media, and check that all image files have width and height metadata. If using a theme or page builder, ensure images have explicit dimensions set. Use Smush (free version) or Optimole to auto-optimize and set dimensions across your site.

Step 3: Optimize Fonts – If your theme uses Google Fonts, add this to your theme's functions.php (or use a code snippets plugin to avoid editing core files):

wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );

The &display=swap parameter tells browsers to show text immediately while loading the font.

Step 4: Disable or Delay Ads – If you're using Google AdSense or similar, configure ads to load only after the page is fully rendered. Many ad networks have lazy-load settings. Check your ad provider's documentation.

Step 5: Test and Iterate – After each change, run PageSpeed Insights again. CLS improvements often happen immediately. If you're still above 0.1, check DevTools to see what's shifting next.

This process typically takes 1–2 hours and requires zero coding knowledge if you use plugins.

How to Monitor and Maintain Good CLS

Once you've fixed CLS, don't let it creep back up. Set a monthly reminder to run PageSpeed Insights and check your CLS score. Every time you add a plugin, install an ad network, or update your theme, your CLS can change.

At HostWP, our managed WordPress hosting includes built-in caching (LiteSpeed + Redis) and Cloudflare CDN integration, which dramatically reduce CLS by speeding up asset delivery across South African networks. Faster asset delivery means fewer asynchronous loads and fewer layout shifts.

If you're on shared or budget hosting, consider upgrading to a provider with proper caching. We've seen non-profits improve CLS from 0.28 to 0.06 just by migrating to better hosting with native Redis support. It's not just about speed—it's about stability.

Also, audit your plugins regularly. Disable any you're not actively using; each plugin can add layout shifts or slow down your site. Every month, check your WordPress Admin → Plugins for unused ones and deactivate them.

Finally, document your CLS fixes. Keep notes on which plugins or settings you changed. This helps if you hire a developer later, and it means new volunteers on your team understand why things are set up a certain way.

Frequently Asked Questions

Q: What's the difference between CLS and page speed?
A: Page speed (LCP, FID) measures how fast your site loads and responds. CLS measures visual stability. You can have a fast site that jumps around (high CLS) or a slower site that's stable (low CLS). Both matter for rankings and user experience. Ideally, you want both to be good.

Q: Do I need to hire a developer to fix CLS?
A: No. Most CLS fixes (image dimensions, font optimization, ad spacing) are plugin-based or CSS changes that don't require coding. If you're comfortable installing plugins and using WordPress's Customizer, you can fix CLS yourself. HostWP's white-glove support can help if you get stuck.

Q: Will fixing CLS improve my Google ranking immediately?
A: Not immediately, but within 1–2 weeks Google will re-crawl your site and update its Core Web Vitals assessment. CLS is a ranking factor, so good CLS helps your SEO over time. The more immediate benefit is user experience: visitors stay longer and are more likely to donate.

Q: My WordPress site has a CLS of 0.08. Is that good?
A: Yes, 0.08 is excellent. Google considers anything below 0.1 "good." You're in the top tier for user experience and SEO. Keep monitoring it to ensure it doesn't creep up.

Q: Should I remove all my ads to improve CLS?
A: No. Ads are often a critical revenue stream for non-profits. Instead, use proper spacing (reserve ad container heights), lazy-load ads, and position them below the fold so they don't shift the main content. You can have ads and good CLS if they're implemented smartly.

Sources

• web.dev — Cumulative Layout Shift (CLS)
• Google PageSpeed Insights
• WordPress Plugin: Smush Image Optimization

Fixing CLS is one of the highest-ROI optimizations you can make as a non-profit. It costs nothing, takes a few hours, and directly improves how donors experience your site. Start today: run PageSpeed Insights on your homepage, identify your CLS score, and tackle the top cause (usually image dimensions). Within a week, you'll have a faster, more trustworthy site that keeps donors engaged. Test your site now at pagespeed.web.dev and take note of your current CLS score—this is your baseline. Then pick one fix from Step-by-Step and implement it today.