Fix Divi CLS Score [Tutorial Series] – Introduction

by | Jan 20, 2021 | Divi Hacks, Wordpress Optimization

Quick Summary – In this 5 part tutorial series, I will walk you step by step through the process needed to fix poor Divi CLS scores, using my website redevelopment as a real life trial and error case study. Over the next 5 weeks, we will cover everything you need to know to fix Divi CLS on your site.

How to Fix Divi CLS Scores

I use Elegant Theme’s Divi builder for most of my projects. I love its flexibility and ease of use. I created my maiden business website with Divi, perhaps going a bit (a lot?) overboard with creative customization of modules, layouts, and design elements. Looks great, BUT…

I realized too late in the game that my Page Speed Cumulative Layout Shift score absolutely sucks. Turns out that Divi’s creative flexibility is also a major pitfall. To make matters worse, with the implementation of Google’s Web Vitals last year, the Cumulative Layout Shift (CLS) score has become a major player in Googles’ assessment of your website’s projected user experience and consequently PageSpeed scoring.

Time for a website redevelopment me thinks, with the goal of reducing my CLS top of mind.

In this 5 part tutorial series, I will walk you step by step through the process needed to fix Divi CLS scores, using my website redevelopment  as a real life trial and error case study. Over the next 5 weeks, we will cover everything you need to know to fix Divi CLS on your site including:

As an added bonus, I will also provide you access to some custom plugins I developed that will help you get the job done, such as automatically adding missing width and height dimensions to Divi Image modules as described in my article How to Add Width and Height Dimensions to Divi Images.

Although my case study focuses on the fix for Divi CLS, the same approach can be used for any WordPress theme, page builder or plugin. After following this tutorial series, you will have all the tools and knowledge needed to fix Divi CLS, and achieve results like my case study as shown below:

Before:

Fix Divi CLS | Before

After:

Fix Divi CLS | After

 


 

Before we dive deep, it’s important that you understand exactly what CLS is, what it isn’t, and why its important.

What is CLS?

In my own words, CLS refers to a non-user initiated shift of any webpage element above the fold (user’s initial viewport) caused by a repositioning of the element in the browser. Non-user initiated means the shift did not occur as a result of a visitor clicking a button, hovering over an element, etc (these are OK), but instead due to a styling repaint of the element. For a more technical explanation, read Google Developers’ article on the topic.

Why is fixing Divi CLS important?

In a nutshell, CLS scores are reflective of poor user experience. Poor user experience can not only be frustrating for your visitors (leading to inevitable page bounces), but it also negatively affects your PageSpeed score. Poor PageSpeed scores means lower search engine rankings. You get the point. So if you care about your site’s ranking, you should care about CLS. For a more detailed read, take a look at Googles 2020 article on Core Web Vitals.

That’s it for now. to ensure you don’t miss Part 1 of the series: The root causes of Divi CLS.

Happy Optimizing!

About The Author

Lee Kierstead

Lee Kierstead

Founder/Owner, Studio 6AM - Websites That Work!

Lee has over 12 years experience as a full stack developer and specializes in WordPress design, development and optimization for small business and partnering website designers. Lee lives with his loving family in Whitby, Ontario, Canada.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

JOIN 6AM NATIONPlenty Insightful. Awfully Helpful. Always Free.

Put your website ahead of the digital marketing game!  Become a member of 6AM Nation to receive exclusive bonus offers and free monthly web marketing tips and tricks.  No blood contract needed.  Just great free advice straight into your inbox courtesy of your friendly neighbourhood web designer! Easy-Peasy.

Win The Battle Against Google's 'Public Badge Of Shame'!Significantly Improve Your Website's Loading Speed For Only $249.00 (15% Off)

Protect your brand, improve your page rank, increase traffic, and avoid Google's public "Badge of Shame" with a Studio 6AM WordPress Speed Optimization Package.

You get:

  • Free Website Speed Assessment
  • Page & Browser Caching Configuration
  • Site-wide Java Script and CSS Optimization
  • Deep Optimization of Homepage (Including Images)
  • Before & After Report
  • 15% Off Standard Pricing of $300.00

Submit this form to get your free website speed assessment and a 15% discount upon purchase. 100% Money Back Satisfaction Guarantee.