Unfortunately, unlike improving Largest Contentful Paint on WordPress, fixing your Cumulative Layout Shift can get a little technical. Many of these fixes involve digging into the code. Unfortunately, it’s hard to avoid looking at code here, but we will try to include plugin solutions where possible.

Let us look at some of the most well-known ways to optimize cumulative layout shift in WordPress websites.

1. Always Set Image Dimensions

If you don’t set image dimensions in your site’s code, your images can cause the rest of your content to shift as they load.

Thankfully, if you add images via the WordPress editor, WordPress will automatically do this for you (and set up responsive images with the srcset attribute). However, if you manually add images to your site via code, you’ll want to include the dimensions. You should see the height and width attributes in the image HTML.

For example:

<img src=”https://wplift.com/wp-content/uploads/2017/02/wordpress-smtp-tutorial-1-1024×874.webp” alt=”SendGrid API keys” width=”1024″ height=”874″>

2. Always Set Dimensions for Embeds/iframes

Just as with images, you’ll also want to make sure to set dimensions for any embeds/iframes that you’re using.

For example, if you’re embedding a YouTube video or Google Maps, specify the height and width. You can also consider loading a placeholder before the embed, which is generally a good practice for performance.
You can find many solutions that let you replace the YouTube embed with a placeholder image (until a user clicks to play the video). Some good options are WP Rocket (our review) or the free Lazy Load plugin from the WP Rocket team.

3. Reserve Space for Ads

Ads are basically just another type of embed, but they deserve a special mention because ads are one of the biggest contributors to Cumulative Layout Shift. As we discussed, you’ve been on a site where the content kept jumping around because of late-loading ads.

The solution is to reserve space for your ads in your site’s code. By doing this, you can improve your website’s cumulative layout shift score. For example, you want to display a 160×600 skyscraper ad in your sidebar. Rather than just adding the ad code directly, you could place it inside a <div> with the ad’s dimensions. That way, the space is reserved even if the ad content hasn’t loaded yet. When the ad content does load, it won’t cause any shift.

You should also be careful with placing ads near the top of a visitor’s viewport, as these placements are the ones most likely to cause layout shift.

4. Fix Issues With Font Loading

One big issue with layout shift is how your custom fonts load. For example, if you’re using fonts from Google Fonts or Adobe Fonts, those can cause layout shift in two ways:

Flash of Invisible Text (FOIT)
Flash of Unstyled Text (FOUT)

Basically, the issue is that a visitor’s browser might try to display the text before the custom font loads. Once the custom font loads, it will then update the text’s styling, which can cause it to shift as it changes from, say, unstyled text to your custom font.

There are a few ways to solve this issue and improve the cumulative layout shift of your website. One option is to preload important font files. It forces visitors’ browsers to download the font file immediately, eliminating the chance of FOIT/FOUT. However, be careful that you’re only preloading the most critical resource (e.g., the font for your above-the-fold content). Using preloading too much will slow down your site.

You can set up a list of font assets to preload with the free Autoptimize plugin in the Extra section:

For Google Fonts, you can also consider hosting the font file locally and preloading it that way. You can set this up with the free OMGF plugin, which includes a nice feature to preload above-the-fold fonts automatically.
If you want to really dig in, Google also has a good article on combining preload with font-display: optional to really optimize your font loading and avoid layout shift.

And if you really want to avoid issues, consider using a system font stack. Not only does this solve font loading issues, but it will also reduce the number of HTTP requests and speed up your site. Some themes, like GeneratePress, make it super easy to use a system font stack.

However, the downside is that you have much less flexibility regarding style/design.

5. Be Careful With Dynamically Injecting Content

If you’re dynamically injecting content for things like email opt-in forms, related content, GDPR notices, etc., then you need to be especially careful to avoid layout shift.

Generally, a good practice here is never to dynamically inject content above existing content unless it comes from user interaction (e.g., a user clicking a button).
For example, if you dynamically inject some CTA element, try to put it below your blog post instead of at the top or in the middle.

6. Use CSS Transform Property in the Animations

If you have generated the performance report of the web page and found non-composited animations, it can also result in layout shifts.

Google recommends leveraging the CSS transform property to animate elements on the website without thinking about layout shifts. Here are two things you need to consider.

Rather than modifying the height & width properties on the web page, utilize the transform: scale().
To shift the position of the elements on any page, don’t change the top, right, bottom, or left properties. Instead, utilize the transform: translate().

In the end, using the CSS transform property can help you optimize your WordPress site’s cumulative layout shift score.

7. Delay JavaScript

Delaying JavaScript postpones the layout shifts happening due to the JS files. This results in CLS optimization.

There are numerous plugins available in the market that you can leverage to delay the JavaScript on the website. Some of the most popular plugins are WP Rocket, Flying Scripts, LiteSpeed Cache, etc.

Here, the common practice is to delay the third-party code and particular plugins that loads below the fold, such as the comments or the social sharing plugins.

Lastly, the best thing you can do is go to PageSpeed Insights, look at the report, and dealy JS files as needed.