DEV Community

Cover image for Using Browser Profiler Tools to Fix Layout Shifts in WordPress Themes
Martijn Assie
Martijn Assie

Posted on

Using Browser Profiler Tools to Fix Layout Shifts in WordPress Themes

#corewebvitals #cls #wordpress #chromedevtools

Client complains: "Content jumps around when page loads - looks super janky!!"

Their CLS score: 0.42 (HORRIBLE - Google penalizes above 0.1)

Me opening DevTools: Found 8 layout shifts in 3 seconds!! Header image loading without dimensions, web fonts causing text reflow, lazy-loaded ads pushing content down.

After fixes using Performance Profiler: CLS 0.03!!

  • Identified exact elements shifting
  • Traced timing of each shift
  • Fixed with reserve space CSS
  • Zero guesswork, pure data!!

Here's how to use browser profiler tools to hunt down and eliminate layout shifts:

What is Cumulative Layout Shift (CLS)?

Layout shift = visible content moving unexpectedly

Examples:

  • Reading article → image loads → text jumps down (you lose your place!)
  • About to click button → ad loads → click wrong thing!!
  • Header loads → pushes content → annoying!!

CLS score:

  • Good: <0.1
  • Needs improvement: 0.1-0.25
  • Poor: >0.25

Google uses CLS as ranking factor!! High CLS = lower search rankings.

Opening Chrome DevTools Performance Panel

Step 1: Open DevTools

Three ways:

Right-click page → Inspect
Or press F12
Or Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows)
Enter fullscreen mode Exit fullscreen mode

Step 2: Navigate to Performance Tab

Click "Performance" tab in DevTools

Or faster:

Cmd+Shift+P (Mac) / Ctrl+Shift+P (Windows)
Type "Performance"
Select "Show Performance"
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Capture Settings

Click gear icon ⚙️ in top-right

Enable:

  • ✅ Screenshots (see visual timeline)
  • ✅ Web Vitals (track CLS/LCP/FID)
  • ✅ Enable advanced paint instrumentation

CPU throttling:

  • No throttling (fast testing)
  • 4x slowdown (simulates mobile)
  • 6x slowdown (simulates low-end devices)

Network throttling:

  • No throttling
  • Fast 3G
  • Slow 3G (exposes timing issues!)

Pro tip: Use "Slow 3G + 6x CPU" to make layout shifts OBVIOUS!!

Recording a Performance Profile

Method 1: Reload and Profile

Click ⟳ icon (Start profiling and reload page)

DevTools:

  1. Starts recording
  2. Reloads page
  3. Stops automatically when page settles

Use this for initial page load testing

Method 2: Manual Recording

Click ● Record button

Interact with page:

  • Scroll down
  • Click buttons
  • Open menus
  • Lazy load content

Click ■ Stop when done

Use this for interaction testing

Analyzing Layout Shifts in Performance Timeline

The Experience Lane

Look for purple bars labeled "LS" (Layout Shift)

Timeline view:
------------------------------------
| Screenshots                      |
| Experience: [LS][LS]    [LS]    |
| Frames                           |
| Interactions                     |
| Network                          |
------------------------------------
Enter fullscreen mode Exit fullscreen mode

Each purple diamond = one layout shift

Size of diamond = severity of shift

Inspecting Individual Shifts

Click purple diamond:

Bottom panel shows details:

Layout Shift
Score: 0.175
Cumulative Score: 0.23
Had Recent Input: false

Moved from: [coordinates]
Moved to: [coordinates]

Affected Nodes: 3
Enter fullscreen mode Exit fullscreen mode

Hover over "Moved from/to":

DevTools highlights affected elements on page screenshot!!

Reading the Summary

Key fields:

Score: Individual shift impact (0-1 scale)

Cumulative Score: Running total CLS

Had Recent Input:

  • false = counts toward CLS
  • true = within 500ms of user action (ignored!)

Affected Nodes: Number of elements that moved

startTime: When shift occurred (milliseconds)

Common WordPress Layout Shift Culprits

1. Images Without Dimensions

Problem:

<img src="header.jpg">
Enter fullscreen mode Exit fullscreen mode

Browser doesn't know size → reserves 0 space → image loads → content shifts down!!

DevTools shows:

Layout Shift
Score: 0.28
Element: img.wp-post-image
Enter fullscreen mode Exit fullscreen mode

Fix:

<img src="header.jpg" width="1200" height="600">
Enter fullscreen mode Exit fullscreen mode

Or CSS:

img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}
Enter fullscreen mode Exit fullscreen mode

Verify in DevTools:

  • Record again
  • Layout shift GONE ✅

2. Web Fonts Loading (FOIT/FOUT)

Problem: Text invisible → font loads → text appears → layout shifts

DevTools shows:

Layout Shift  
Score: 0.12
Element: h1.entry-title
Timing: 847ms (after font load)
Enter fullscreen mode Exit fullscreen mode

Fix with font-display:

@font-face {
    font-family: 'CustomFont';
    src: url('/fonts/custom.woff2');
    font-display: swap; /* Show fallback immediately */
}
Enter fullscreen mode Exit fullscreen mode

Better: Preload fonts

<link rel="preload" 
      href="/fonts/custom.woff2" 
      as="font" 
      type="font/woff2" 
      crossorigin>
Enter fullscreen mode Exit fullscreen mode

Verify:

  • Record profile
  • Check Experience lane
  • Font-related shift eliminated ✅

3. Ads and Embeds

Problem: Content loads → ad/embed loads → content pushed down

DevTools shows:

Layout Shift
Score: 0.35 (HUGE!)
Element: div.ad-container
Timing: 1,240ms
Enter fullscreen mode Exit fullscreen mode

Fix: Reserve space

.ad-container {
    min-height: 250px; /* Ad size */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
}

.ad-container::before {
    content: 'Advertisement';
    color: #999;
}
Enter fullscreen mode Exit fullscreen mode

For dynamic ad sizes:

.ad-container {
    aspect-ratio: 16 / 9;
    min-height: 250px;
}
Enter fullscreen mode Exit fullscreen mode

4. Lazy-Loaded Content

Problem: Scroll → content loads → page jumps

DevTools Interaction Recording:

  1. Click Record ●
  2. Scroll down slowly
  3. Click Stop ■

See shifts in timeline as you scroll

Fix: Intersection Observer with placeholder

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            // Set dimensions BEFORE loading
            img.width = img.dataset.width;
            img.height = img.dataset.height;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
});

document.querySelectorAll('img[data-src]').forEach(img => {
    observer.observe(img);
});
Enter fullscreen mode Exit fullscreen mode

5. Dynamic Content Injection

WordPress culprit: Plugins injecting content after page load

DevTools shows:

Layout Shift
Score: 0.19
Element: div.injected-content
Timing: 980ms
Source: notification-bar.js
Enter fullscreen mode Exit fullscreen mode

Fix: Reserve space or animate in

.notification-bar {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.notification-bar.loaded {
    height: 60px; /* Known height */
}
Enter fullscreen mode Exit fullscreen mode

JavaScript:

// Bad: Just inserting
document.body.insertAdjacentHTML('afterbegin', notificationHTML);

// Good: Set height first
const bar = document.createElement('div');
bar.style.height = '60px';
bar.innerHTML = notificationHTML;
document.body.insertBefore(bar, document.body.firstChild);
Enter fullscreen mode Exit fullscreen mode

Advanced: Layout Shift Regions Visualization

Enable Real-Time Highlighting

DevTools → More tools (⋮) → Rendering

Enable:

  • ✅ Layout Shift Regions

Now interact with page:

Blue rectangles flash on elements that shift!!

Use this to:

  • Spot shifts visually
  • Test live as you develop
  • Verify fixes immediately

Performance Insights Panel (New!)

Access Insights

After recording, click Insights tab (sidebar icon)

Shows:

Layout Shift Culprits
━━━━━━━━━━━━━━━━━━━━━━━
Worst cluster: 0.31
  ↳ img.header-image (0.18)
  ↳ div.ad-slot (0.13)

Total shifts: 5
Cumulative score: 0.42
Enter fullscreen mode Exit fullscreen mode

Click culprit → jumps to element in timeline

Shift Clusters

What is cluster?

Multiple shifts within 1 second + within 5 seconds of previous shift = cluster

Why clusters matter:

Google scores clusters, not individual shifts!!

DevTools shows:

Cluster 1: Score 0.25
  - Shift 1: 0.12 (847ms)
  - Shift 2: 0.08 (912ms)
  - Shift 3: 0.05 (1,103ms)
Enter fullscreen mode Exit fullscreen mode

Fix entire cluster together for max impact

Measuring CLS with JavaScript

Real User Monitoring Script 

/**
 * Track CLS in real WordPress sessions
 */
let cls = 0;
const clsEntries = [];

const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        // Ignore shifts from user input
        if (!entry.hadRecentInput) {
            cls += entry.value;
            clsEntries.push({
                value: entry.value,
                time: entry.startTime,
                sources: entry.sources.map(source => ({
                    node: source.node,
                    previousRect: source.previousRect,
                    currentRect: source.currentRect
                }))
            });

            console.log('Layout Shift:', {
                score: entry.value,
                cumulative: cls,
                element: entry.sources[0]?.node
            });
        }
    }
});

observer.observe({ type: 'layout-shift', buffered: true });

// Report CLS on page unload
window.addEventListener('beforeunload', () => {
    console.log('Final CLS:', cls);
    console.log('Total shifts:', clsEntries.length);

    // Send to analytics
    if (typeof gtag !== 'undefined') {
        gtag('event', 'cls_score', {
            value: Math.round(cls * 1000), // Convert to integer
            metric_id: 'cls'
        });
    }
});
Enter fullscreen mode Exit fullscreen mode

Add to WordPress:

<?php
function enqueue_cls_monitor() {
    if (current_user_can('administrator') && WP_DEBUG) {
        wp_enqueue_script(
            'cls-monitor',
            get_stylesheet_directory_uri() . '/js/cls-monitor.js',
            array(),
            '1.0.0',
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_cls_monitor');
Enter fullscreen mode Exit fullscreen mode

Debugging Specific WordPress Themes

Twenty Twenty-Four

Common issues:

  • Query block lazy loading
  • Featured image dimensions missing
  • Navigation menu height changes

DevTools findings:

Shift at 340ms: nav.wp-block-navigation (0.08)
Shift at 680ms: img.wp-block-cover (0.15)
Enter fullscreen mode Exit fullscreen mode

Fixes:

/* Reserve nav height */
.wp-block-navigation {
    min-height: 60px;
}

/* Set cover image aspect ratio */
.wp-block-cover {
    aspect-ratio: 16 / 9;
}
Enter fullscreen mode Exit fullscreen mode

Astra Theme

Common issues:

  • Custom header height dynamic
  • Mobile menu toggle
  • Sticky header activation

DevTools process:

  1. Record with mobile viewport
  2. Toggle menu
  3. Check Experience lane

Fix:

/* Prevent header height change */
.ast-main-header-wrap {
    height: 80px;
}

/* Reserve space for mobile menu */
.ast-mobile-menu-buttons {
    width: 50px;
}
Enter fullscreen mode Exit fullscreen mode

GeneratePress

Common issues:

  • Slideout navigation
  • Dynamic spacing
  • Widget areas

Fix in Customize:

Layout → Container → Set fixed width (1200px)
Colors → Background → Set before content loads
Enter fullscreen mode Exit fullscreen mode

Testing Workflow

1. Baseline Test 

1. Open DevTools Performance
2. Enable Slow 3G + 6x CPU throttling
3. Record reload
4. Note CLS score and culprits
Enter fullscreen mode Exit fullscreen mode

2. Identify Issues 

1. Check Experience lane for purple diamonds
2. Click each shift
3. Note affected elements
4. Screenshot or export trace
Enter fullscreen mode Exit fullscreen mode

3. Implement Fixes 

1. Add image dimensions
2. Preload fonts
3. Reserve space for dynamic content
4. Set aspect ratios
Enter fullscreen mode Exit fullscreen mode

4. Verify Fixes 

1. Hard refresh (Cmd+Shift+R / Ctrl+Shift+F5)
2. Record new profile
3. Compare CLS scores
4. Confirm shifts eliminated
Enter fullscreen mode Exit fullscreen mode

5. Real-World Testing 

1. Test on actual mobile device
2. Test with real network (not throttled)
3. Use PageSpeed Insights for field data
4. Monitor real user CLS with analytics
Enter fullscreen mode Exit fullscreen mode

Exporting and Sharing Traces

Save profile for later:

Performance panel → Click Download (⬇️)

Saves as .json file

Load trace:

Performance panel → Click Upload (⬆️)

Share with team:

  • Send .json file
  • Teammates load in their DevTools
  • Everyone sees exact same data!!

Bottom Line

Stop guessing at layout shift causes!!

Browser profiler tools show:

  • Exact elements shifting
  • Precise timing
  • Severity scores
  • Visual timeline
  • Everything you need to fix CLS!!

My workflow:

  1. Record performance profile (30 seconds)
  2. Identify shifts in Experience lane (2 minutes)
  3. Implement fixes (10 minutes)
  4. Verify improvements (30 seconds)

Total time: 15 minutes to fix critical UX issue!!

vs old way:

  • Guess at problems
  • Try random fixes
  • Hope it works
  • Users still complain
  • Complete waste of time!!

DevTools Performance panel = surgical precision for layout shift debugging!! 🎯

This article contains affiliate links!

Top comments (0)