How Divi’s Critical CSS Feature Boosts Site Speed

Posted on August 22, 2021 by in Divi Resources | 8 comments

How Divi’s Critical CSS Feature Boosts Site Speed

It goes without saying that speed is one of the most important things to keep an eye on when building a website using any tool of your choice. At Elegant Themes, we’ve prioritized making speed something that sets us apart from all the other WordPress themes and/or builders out there. In our recent performance update, we’ve covered many improvements that help you improve page speed scores. One of those improvements is the use of critical CSS. In this post, we’ll dive a little deeper into this topic and show you how exactly this improvement will help you reach the highest page speed results. This flaming fast result will quickly result in better search engine ranking and overall user experience.

Let’s dive into it!

Understanding Critical CSS

When you visit a website, you want to lay your eyes on a page as soon as possible. It’s a matter of seconds and preferably even milliseconds. A popular trick that is used to show content as soon as possible is called critical CSS. Critical CSS doesn’t load the entire page’s stylesheet all at once. Rather, it’s very selective with it. It shows what needs to be shown at first sight and loads the rest after the initial interaction.

How it Works

Usually, the first things you see on a page are the header and hero. Depending on the design, we’re most likely talking about up to three sections. If you compare the CSS used for those sections to the CSS used for the entire page, you’ll realize that it’s only a fraction of it. So why load all the CSS at once, if the biggest part of the page isn’t immediately seen by visitors? Critical CSS prioritizes all the CSS that is needed at first interaction. It allows you to act upon user experience by loading the CSS that affects “above the fold” content. This means that only the CSS involved in what immediately shows up on your screen is loaded, and with screen, we mean the ratio created between the viewport width and height.

If your above-the-fold content consists of a title, paragraph, button and image, only the CSS relevant to those elements will be loaded as soon as your visitors load the page.

divi critical css

The rest of the CSS needs to be loaded too, of course, but not at first interaction, that’s what’s called non-critical CSS. There’s no reason why non-critical CSS should affect the way your visitors, and search engines, enter your website. It’s not visible until visitors start scrolling, so giving it a delay will only help you boost your page speed and rank higher.

divi critical css

Critical CSS in Divi

One of the best things about the critical CSS performance inside Divi is its automatic detection. Usually, when developers want to use the critical CSS method for their websites, they’ll manually make a selection of the CSS, or use tools to help them get there. With Divi, it happens without you having to put in any effort. This allows you to focus on what’s most important; designing an intuitive website that reaches its goals.

This immensely differentiates Divi from its competitors. You give Divi the reigns over your page speed, and Divi doesn’t disappoint. We believe that’s the product your website deserves. If you want to take it even a step further, you can optimize your above-the-fold content too. You can find some practical tips here.

A Visual Example

Add a New Page

Let’s lay our eyes on a concrete example to help you understand the concept better. Add a new page to your WordPress website and switch over to Visual Builder.

divi critical css

Upload a Divi Premade Layout of Your Choice

We’re picking the Creative CV Landing page layout to illustrate critical CSS. Go ahead and use this layout on the page you’ve created.

divi critical css

Critical CSS: Above the Fold

What we see as soon as the layout has been added to the new page, without scrolling, is all part of critical CSS. This is the CSS that needs to be loaded right away, so we immediately get to interact with the website and the styling that goes with it.

divi critical css

On a practical level, that means these two section’s CSS, and their child elements’ CSS, are being loaded as soon as you enter the page. Of course, the header will be loaded too.

Non-Critical CSS: Below the Fold

As soon as we pass the second section of the page, we enter the ‘non-critical CSS’ zone. All the remaining CSS on the page will be rendered with a delay. By the time visitors explore your first two sections, the CSS needed for the other sections will fall in place.

divi critical css

Critical CSS in Divi—Allowing You to Design Smart Pages

This is only one part of the improvements that came with the performance update, but it’s a very important one. Once you become aware of critical CSS, it’ll change the way you design your pages too. Critical CSS allows you to design with user experience in mind. It helps you develop a sense of balance between design and optimization. In this post on how to build the fastest Divi page, you can learn more about ways to improve above-the-fold content. Enjoy!

Premade Layouts

Check Out These Related Posts

8 Comments

  1. Great explanation, thank you! So If I use Autoptimize with its ‘critical.css’ feature, should I turn that off now and just let the Divi update do its CSS thing?

  2. I’ve been a pretty long time life member of elegant themes.I am not a code trained individual but I made my law office website with Divi and I like it.I knew it was slow and I knew that you folks at Elegant themes knew it was slow but now it seems that The tipping point has been reached with Google SEO that is putting the pressure on elegant themes to get Divi up to speed up so to speak or face A mass migration of customers to other ways to have a site fast enough to rank with the new google algorithm. Good luck!

  3. Love the performance update but did notice the critical CSS option breaks the blog module if you have the blogs on a page in the grid layout. Disabling critical CSS fixes this issue.

  4. Hello, the new Divi 4.9.10x update critical CSS feature speeds up my Divi sites for clients and myself, which is awesome. All of the Divi sites are much faster. However, I’m still getting some CLS issues on mobile – desktop is generally not an issue. Would you please write an article about improving CLS on mobile specifically?

  5. My pages still loading non-essential css and fonts, I am seeing no significant difference since the update.

    • Hi Barb. That CSS is most likely coming from third party plugins. If you have Dynamic CSS enabled, then all Divi Theme and Divi Builder CSS will only be loaded when needed. Make sure you have Dynamic CSS enabled.

  6. I am using divi on my site and it works just fine. I am thinking to use it on my another website that is currently on weebly.

  7. Thanks for your huge performance update!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest