9 Easy Strategies to Avoid Large Layout Shifts [No Dev Required]

Large layout shifts on your website can lead to a poor user experience, potentially causing visitors to leave. They occur when elements unexpectedly move while the page loads, leading users to click the wrong buttons or links.

This can also affect your Cumulative Layout Shift score, an important metric in Google’s Core Web Vitals initiative.

Fortunately, you can improve loading times and ensure a stable layout by implementing best practices like assigning dimensions and using structural placeholders.

In this article, we’ll explore the causes, their impact, and easy strategies to avoid large layout shifts.

What Are Layout Shifts?

A large layout shift happens when a website isn’t optimized properly, causing things on the page to move a lot as it loads.

This causes images, videos, fonts, or buttons to move unexpectedly, making it hard for visitors to use the site. It can even make them leave before they can check out the content.

Losing visitors due to a bad user experience is already tough. Cumulative Layout Shift (CLS) makes it worse by harming your Google Core Web Vitals score. Remember, visual stability directly impacts a website’s Core Web Vitals score and SEO.

Tools like PageSpeed Insights, Lighthouse, or Chrome DevTools can identify large layout shifts and pinpoint the problematic elements.

Running a WordPress performance audit can provide valuable insights into any issues causing Large Layout Shifts on your site. This lets you pinpoint and fix problematic elements to improve your site performance.

Explaining CLS (Cumulative Layout Shift)

The term CLS stands for Cumulative Layout Shift, which is a metric in Core Web Vitals used to measure unexpected layout shifts, and it’s a part of Google’s Page Experience update.

The CLS score of a website reflects how well it handles unexpected layout shifts by assessing content stability and measuring the distance affected elements have moved in the viewport.

This data is used to calculate an accurate CLS score.

What is a passing CLS score?

Well, here are Google’s scores for CLS:

• Good – Less than or equal to 0.1 seconds
• Needs Improvement – Less than or equal to 0.25 seconds
• Poor – More than 0.25 seconds.

A good CLS score is crucial for ranking well in Google SERPs and meeting the Core Web Vitals criteria.

Avoid Large Layout Shift with Cloudways WordPress Hosting

Ensure consistent website performance and eliminate layout shifts with our optimized stack. Achieve low CLS scores for fast load speeds and high SERP rankings.

TRY NOW

How Do Layout Shifts Affect Page Performance?

When users visit a webpage, they expect to quickly interact with various elements such as buttons, contact forms, images, and videos. However, unexpected layout shifts can cause these elements to move, adjust, or relocate as the page loads.

This can lead to users accidentally clicking or tapping on unintended content, especially on mobile devices with limited screen space. Such layout shifts make the page visually unstable.

Since CLS is part of Web Vitals, which reflects the overall page experience, reducing layout shifts and improving CLS scores is essential for enhancing user satisfaction and optimizing page performance.

How to Avoid Large Layout Shifts?

Once you’ve identified layout shifts affecting your CLS scores, it’s time to fix them. Here are some methods to avoid large layout shifts.

1. Avoid Inserting New Content Above Existing Content

To prevent unexpected layout shifts, avoid inserting dynamic content like banners or forms above existing content unless prompted by user interaction.

For example, a banner loading slower than the page can cause a significant layout shift, leading to a poor user experience and higher CLS scores.

One possible solution: Initiate the loading of new content with user interaction:

• Use buttons like “Load more” or “Refresh” to trigger content loading.
• Prefetch content before user interaction to ensure immediate display.

Example: Chloé website’s “Load More” feature dynamically loads additional content without causing unexpected layout shifts.

2. Manage How Fonts Load on Your Site

Optimizing font loading on your website is crucial to prevent issues like Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT), which can lead to large layout shifts (CLS).

To solve this issue, you can use two strategies like:

1. Preloading Web Fonts:

• Preloading web fonts ensures they’re readily available during page load. You can achieve this by adding a link tag to the HTML header and specifying the font name, format, and cross-origin attribute.

For example, check out the code below:

<link rel="preload" href="/yourwebfont" as="font" type="font/format" crossorigin>

Here:

• “/yourwebfont” specifies the name of the web font you’re loading.
• “format” specifies the particular web font format (e.g., ttf, woff, woff2, etc.).

You can use optimization plugins such as the Cloudways Breeze cache plugin to preload web fonts and links.

With Breeze, you can enhance the speed of your WordPress website through its remarkable features. It utilizes internal caching to accelerate page loading speeds, ensuring viewers don’t have to wait long to access your content.

2. Using font-display Attribute:

• The font-display attribute controls how fonts are displayed during loading. Options like auto, block, swap, fallback, and optional allow you to manage text visibility based on font loading status.

For example, if you’re a WordPress user, here’s how you can use the font-display: swap property in your CSS:

If you’re using the Astra theme like me, follow these steps to add the font-display: swap attribute to your theme file:

• Log in to your WordPress Dashboard.
• Go to Appearance → Theme File Editor.
• Here, locate the style sheet where you can make the necessary changes. For the Astra theme, the CSS files are typically located in the assets/css/ directory.

• Access these files using an FTP client with your FTP login credentials obtained from your hosting provider.
• Navigate to wp-content/themes/astra/assets/css/ directory.

• Look for a file containing the @font-face declaration.

• Download the file and open it in a text editor.

• Add font-display: swap to the @font-face declaration for the font.

• Save your changes and upload the updated file to the server, replacing the existing one.
• Once completed, the warning “Ensure Text Remains Visible During WebFont Load” should no longer appear in your Google PageSpeed Insights report, indicating successful optimization of your website’s font loading.

Additional Font Management Strategies:

1. Optimizing Font Files:

Customize font files by specifying which characters will be applied. This is particularly useful for elements like logos or headings, where specific characters are known in advance.

For example, in a logo for “ABC Corporation,” only including “A”, “B”, “C”, “&”, and “-“ in the font file reduces its size, optimizing loading speed. We have a guide on how to use custom Google Fonts in WordPress that you might find useful.

2. Define Minimum Height Properties:

Additionally, consider setting appropriate minimum height properties for website sections to mitigate font-induced layout shifts. For example, applying a height to elements like <h1> can stabilize layouts, preventing content below from shifting when different fonts load.

header {
  min-height: 60px;
}
@media (min-width: 700px) {
  header {
    min-height: 220px;
  }
}

While this approach may not be universally applicable, combining it with other optimization techniques like font preloading and using font-display attributes can enhance the user experience by minimizing disruptions caused by font loading.

3. Connect to Font Sources Early: 

If your fonts are hosted elsewhere on the internet (for example, on a content delivery network or a font service), you can set up a quick connection to those sources. This helps your website find the fonts faster, getting everything ready sooner.

3. Avoid Non-composited Animations

Use composited animations whenever you can. This helps lessen the main-thread work, prevents repainting pixels as the page loads, and reduces layout shifts.

You can address the “Avoid non-composited animations” issue by implementing simple changes like adding the “Will-Change Property.”

Let me share a quick example to make it easier for you to understand how I can implement the Will-Change Property. If I access my WordPress Dashboard and navigate to Appearance > Customize, under the “Additional CSS” section, I can see some CSS code that may not be optimized for animations.

Due to unoptimized CSS, I’m encountering the “Avoid non-composited animations” error in Page Speed Insights, as shown in the screenshot below.

Now, let’s try to optimize the CSS file by implementing the “Will-Change Property.”

Add the Will-Change Property

This lets the browser know about upcoming animation changes, which helps improve rendering performance.

.my-animation {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    will-change: transform, opacity; /* New line */
    animation: complexMove 5s linear infinite;
}

After optimization, replace the old code with the new optimized CSS in your additional CSS section.

This adjustment won’t alter the animation but should resolve the error. Check to confirm the error is resolved. Optimizing the code may also enhance your website’s performance score.

4. Make Sure User Actions Finish Within 500ms

When working on your website, it’s important to ensure that when users interact with your content, things don’t suddenly jump around on the screen. This can be really frustrating for them.

To avoid this, you need to ensure that any changes to the layout happen within a quick timeframe—specifically, within 500 milliseconds of the user’s action. If it takes longer than that, your Cumulative Layout Shift (CLS) score could suffer.

You can check this using Chrome DevTools. Record your page performance and look for sudden shifts after user interactions. If the shift occurs more than 500 milliseconds after the interaction, it could negatively impact your CLS score.

In the screenshot above of Apple.com, you can see that we got a score of 0.0004175 — which is under the 0.1 threshold.

If your score goes over the threshold, like 0.4004175, make sure to speed up processing or content loading to minimize delays.

For example, if you’re fetching content from the network, try to allocate space for it beforehand. This way, you won’t be penalized for it even if it takes longer than 500 milliseconds to load.

Another thing to watch out for is animations. Ensure they’re brief—no longer than 500 milliseconds—to avoid affecting your CLS score. We already covered how to avoid non-composite animations earlier in this blog. Feel free to revisit that section for a quick refresher.

By optimizing for CLS, you’re not just improving your website’s performance but also providing a better user experience overall.

5. Use JavaScript Synchronously

Synchronous JavaScript executes code sequentially, blocking further execution until the current task finishes.

Here’s how it’s applied: Initially, you conceal problematic content using CSS. Then, you utilize render-blocking JavaScript to populate and reveal the content, preventing layout shifts until it’s fully settled.

However, this approach may impact metrics like LCP and First Contentful Paint since it delays rendering. Nonetheless, it’s a worthwhile consideration when no other solution exists to prevent layout shifts.

For implementation, ensure CSS is inlined within HTML to maintain proper order. Alternatively, JavaScript can be used to reveal the content, but inline CSS guarantees visibility even if JavaScript fails or is disabled.

<style>
.cls-inducing-div {
    display: none;
}
</style>

<div class="cls-inducing-div"></div>

<script>
// Your render-blocking JavaScript goes here to populate the div
...
</script>

<style>
.cls-inducing-div {
    display: block;
}
</style>

This technique can also be extended to external JavaScript but may introduce additional delay as scripts are requested and downloaded. To mitigate this, preload the JavaScript resource in your HTML’s <head> section.

Although it goes against common advice you’d hear from developers, synchronous JavaScript can be helpful in situations where content shifts are unavoidable, even though it may delay rendering.

Fastest Managed WordPress to Avoid Large Layout Shifts

Experience blazing fast server speeds with Cloudways LAMP + NGINX hybrid stack. Improve your Core Web Vitals to avoid pesky WordPress layout shifts.

TRY NOW

6. Specify Image and Video Dimensions

For modern browsers like Firefox and Chrome, setting precise dimensions for images and videos is crucial to prevent them from shifting during website loading. Unexpected movement can frustrate users, tarnishing your website’s appearance and perceived speed.

In ecommerce stores, where products feature multiple images of varying sizes, it’s common to encounter this issue.

However, specifying the width and height of each element informs the browser about the space they require, ensuring smooth loading without disruptive layout shifts.

To remedy this:

• Select your image from the Media Library or Upload it and add it to any page or post.

• Select the image with your cursor to reveal the Settings Panel.

• Once your image is uploaded, Click on Edit image.

Note: You can view the image size and default dimensions in the settings panel.

• Locate the Scale Image option in the Settings panel.
• Update your desired image dimensions.
• Click Scale to save your changes.

For anyone using themes like WoodMart or any other theme for WordPress, simply adding the correct size information for your images and videos can make a big difference in reducing your website to the CLS on WoodMart website pages to 0.

7. Have Dedicated Space for Advertisements

Setting specific sizes for ads on your website is crucial. By deciding in advance the dimensions of each ad, you inadvertently prevent other elements on your page from shifting around.

This is particularly helpful because ads may not appear immediately, potentially disrupting your website’s layout and causing users frustration.

For instances where an ad might not load immediately due to limited ad inventory, employing placeholders or alternative banners that fit these reserved dimensions can maintain the stability of your page’s layout.

This method ensures the user experience remains consistent, even when actual ads take longer to load or fail to display.

To further reduce the impact of ads, embeds, and iframes on your site’s layout:

Utilize Placeholders: Implement placeholders for ad slots when ads are unavailable, maintaining layout consistency and preventing shifts.

Preload Sizes: Before you add ads to your website, decide on the biggest size an ad might be and make space for it. This way, you ensure there’s already room for the ad, and your website doesn’t have to move things around unexpectedly when the ad shows up.

Positioning: Consider putting ads that won’t bother people too much, like at the bottom of the page or off to the side. This helps keep your website looking good and working smoothly because ads won’t get in the way or change how your page is set up.

By integrating these strategies, you can significantly improve your website’s layout stability, enhancing the overall user experience.

8. Optimize Dynamic Content

Ensuring a seamless user experience on your website involves careful management of dynamic content such as ads, pop-ups, and notifications.

Reserving space for these elements is key to maintaining visual stability and preventing annoying layout shifts. This approach allows your site to accommodate dynamic content without disrupting the layout. For automatic pop-ins, like cookie notices, slide them in from the bottom edge. It’s less in-your-face and keeps the content above unshuffled.

9. Reducing Third-Party Dependencies

To enhance your website’s performance and security, minimizing reliance on third-party dependencies is essential.

• Start by auditing all external scripts, iframes, and other services to understand their impact on your site.
• Prioritize them based on necessity and consider removing those that aren’t crucial.
• Switch to self-hosted alternatives to reduce external requests, improve load times, and control your data.

For the remaining third-party services:

• Implement lazy loading so they don’t hinder your site’s initial load time.
• Streamline third-party integrations to ensure a faster, more secure, and user-friendly website experience.

Results Before Implementing the Above Strategies:

Results After Implementing the Above Strategies:

You can see that by relying less on third-party tools, we improved our site’s performance score from 59 to 93 and reduced CLS from 0.024 to 0.

Conclusion

Large layout shifts can be annoying, leading to user errors or causing people to lose their place on a page. Avoiding them is essential for improving the user experience on your website and can also help you rank higher in Google SERPs.

Implementing the actionable tips we’ve shared in this article can put you in a better position to avoid large layout shifts and enhance your site’s user experience. For further optimization, check out our guide on WordPress caching.

Lastly, keep in mind that web hosting can affect SEO rankings. Therefore, choose a reliable WordPress hosting solution like Cloudways.