When it comes to building a website, you need to plan thoroughly, and of course, Speed is the key. 

Websites must look good and function properly as soon as they are finished. 

You need to research and test different themes until you find the perfect match for your business and your brand. 

It requires a lot of patience and research to create a site that is not only appealing but also helps your company build its brand and increase sales. 

After all, there’s no better tool than DIVI to do that! 

This tool takes the design process to a whole new level with a comprehensive web design framework that enables you to graphically design every part of your website.

However, this does not imply that Divi must be slow. Not at all.

With Divi’s built-in performance and speed optimization tools, you can quickly get your website to the top of the Google PageSpeed rankings.

For those who’re unaware of Divi, you must be thinking what exactly is divi and how to improve your website’s loading time and user experience with Divi speed optimization.

What is Divi?

Divi is a powerful page builder and a lightweight theme thanks to features like Dynamic Module Framework, Dynamic CSS, Dynamic JavaScript Libraries, and more.

It gives you the option to create multiple layouts from one theme by letting you control certain elements with ease. 

This makes page layouts speedier and easier to update on a regular basis.

Divi websites are built with the Divi theme by ElegantThemes. 

However, even though Divi is quick, there are still underlying elements that require tuning.

Because with great power comes a lot more code that needs to be loaded into the browser. 

When compared to other themes, Divi can be slower when it comes to website speed performance.

And if this problem is not fixed, your Divi site’s speed will suffer needlessly.

In this blog, we will explore Divi’s built-in performance optimization and I’ll be giving you some tips on what can be done to make it even faster.

How to Install this Theme?

I know some of you are tempted to try it out for your website, let’s check out how to install it with a few simple steps.

But before going down that road, you must have already set up your domain name, hosting, and WordPress installation.

Once the foundation is in place, you can install and activate the Divi Theme on your WordPress installation by following the steps below.

Step-1:

From the Downloads page on the Elegant Themes dashboard, download the Divi theme.

Step-2:

Activate your WordPress admin account.

Step-3:

Select “Appearance” and go to “Themes”.

Step-4:

Select Add New from the menu.

Step-5:

Then select the button for Upload Theme.

Step-6:

Download the Divi.zip file by clicking Browse and choosing it. (Don’t unzip the downloaded file.)

Step-7:

Once downloaded, activate Divi by clicking the activate button.

Grab some coffee and take some time to explore the wonders of Divi, but for now, let’s bring our focus back to the performance it incurs. 

Performance Effects on WordPress/Divi Site

I’d love to start from here because this is where the debate truly gets heated. 

Supposedly, Divi has gained a reputation for slowing down websites, which is definitely not good for user experience as well as SEO. 

However, if you ask any Divi experts, they’ll tell you that their sites load really quickly and receive a “green light” when put through a Google Pagespeed Insights test.

So I wanna know what the typical user’s actual experience is like.

Mostly, for people who aren’t like me (non-techy crowd) and who don’t put a lot of time into optimizing their pages and running them via site speed analyzers? 

So, usually, Divi is not the primary cause of how well your website performs. It is merely a component of the jigsaw. 

Additionally, you should also think about the fundamental optimization requirements for WordPress sites in general. 

Divi (the Divi Theme and/or the Divi Builder) lies on top of WordPress (the CMS), which resides on top of a stack of server software, and that sits on the top of hosting infrastructure. 

All of the pieces need to be tuned correctly, or else the jigsaw is a mess.

These include, as a starting point, elements like reliable hosting, caching, and a CDN. 

No matter how effectively we optimize Divi, a site will still load slowly if these fundamental optimizations aren’t in place. 

We must handle Divi’s performance optimization now that the fundamental optimization requirements for a WordPress website have been established. 

To do this, the Divi Theme and/or Divi Builder’s performance is improved, ensuring that it operates at its best in both the areas where it builds upon WordPress and where it functions within WordPress. 

When all of these components are tuned, we can create a Divi website that functions as quickly and effectively as possible.

Therefore, if your Divi website is running slowly, you also need to take into account these other jigsaw pieces. 

Built-In Speed and Performance features by Divi

1. Latest PHP Dynamic Framework

Only the content that is actually used on the page will be loaded by Divi’s new dynamic PHP framework. 

Other than that, it will forgo saving the size of each page, the number of processes used to comprehend the logic necessary to render the modules, and the characteristics employed on each page. 

Additionally, every page will be handled differently. 

The Dynamic Module Framework is a feature that has been added to Divi to support this new Dynamic PHP Framework. 

If it is activated, Divi will adhere to this new framework. 

One of the most potent components of our built-in Divi speed optimization is the Dynamic Module Framework. 

The function increases site speed by choosing and running PHP functions as needed.

2. Individual Dynamic CSS delivery 

You must mark the Dynamic CSS option as Enabled in order to allow Divi to handle dynamic CSS. 

The Divi Stylesheet’s CSS is dynamically applied using the same anti-bloat reasoning as the dynamic module structure. 

Every page must load a big stylesheet, which adds unneeded weight and slows website load times. 

Divi’s CSS is divided into thousands of tiny components using dynamic CSS. 

With this performance update, Divi won’t deliver large CSS files any longer. Instead, it discreetly processes each one into a separate stylesheet. 

It will only include the CSS elements required to style the specific page with respect to the modules, features, and theme layout preferences. 

As a result, it will reduce the size of the CSS files, and your website won’t bloat with extra CSS loads.

3. Duplicate Styles removed 

Divi no longer repeats the styles for more processes if two or more functions or features of modules are processing the same kind of style. 

The selectors will also be combined into a single list. Therefore, it might lessen the overall file size. 

Every constructed page is now very lightweight thanks to the new speed update’s optimization of the CSS provided by the page builder. 

Styles from other areas of the page may be shared by the functions. 

For instance, if you use Divi Presets, modules may share the styles from a single list of files rather than using their own separate block of styles.

4. Latest Critical CSS system for Above Fold

By detecting the CSS required to style content above the fold and delaying everything else, Divi’s Critical CSS methodology increases site speed. 

Because so little of the website header is left after Divi processes its CSS, content appears very immediately. 

This is why Google gives Divi websites such good rankings right out of the box. 

In order to employ the necessary styles to design the content above the fold, the new Critical CSS system automatically differentiates the critical and non-critical styles. 

As a result of this procedure, only a small portion of the minimal or optimized CSS is used during the first loading of the website. 

Divi can attain a fantastic page load time as a result.

5. JavaScript Load On Demand 

For a website to accomplish a variety of tasks, including the implementation of unique client-side scripts, JavaScript is necessary. 

When JavaScript is loaded repeatedly without being used, the site becomes bloated and loads slowly. 

Therefore, Elegant Themes modified the JavaScript file in Divi and created modules to only load each JavaScript library as needed. 

The default setting for Dynamic JavaScript Libraries is Enabled, which allows users to enable Divi to load JavaScripts on-demand. 

Because there is less code to perform when a website loads, the reduced base JavaScript file size along with the dynamic JavaScript libraries will undoubtedly increase site speed. 

Scripts that aren’t required anymore will be removed.

6. In-line google fonts caching 

When the Improve Google Fonts Loading option is selected, Google Fonts are cached and loaded directly into the header. 

This decreases requests that impede rendering and speeds up loading. 

To reduce the payload, this basically removes legacy font files. 

However, it will restrict Google Fonts’ support in some extremely old browsers. Enabling this option will reduce the size of Google Fonts and speed up load times. 

The Divi theme now caches and publishes the Google fonts in-line in the header, eliminating a render-blocking request and accelerating website load time. 

You must first enable the Improve Google Fonts Loading option before you can access this option, and it will then restrict legacy browser support.

7. Disable Native WordPress Emojis 

There’s no need to use WordPress assets to duplicate the functionality if browsers already support what you need to display. 

The Emoji display shows that to be the case. 

WordPress used to handle it on its level when the majority of browsers couldn’t display emojis if you used one on a WordPress site. 

But the majority of contemporary browsers now accept emojis because of recent changes and demands. 

Therefore, there is no need to manage them using WordPress’s assets. 

Divi gives you the choice to disable this feature in WordPress in order to conserve resources.

8. Load Dynamic In-line Stylesheet 

The last CSS optimization removes all render-blocking CSS requests: Load Dynamic In-Line Stylesheet. 

The fundamental Divi stylesheet may now be loaded in-line on the real page because Dynamic CSS has made it so much less! 

The removal of a render-blocking request and an increase in Google PageSpeed results from loading this CSS in-line. 

All render-blocking CSS queries are eliminated when the options Critical CSS, Dynamic CSS, and Load Dynamic In-Line Stylesheet are enabled.

9. Defer jQuery 

Divi will now shift jQuery and jQuery Migrate to the body or footer depending on the situation in order to save load time and eliminate a render-blocking request brought on by them at the beginning of the page. 

However, putting them in the body can lead to problems because they may occasionally be necessary in the header. 

When “Defer jQuery and jQuery Migrate” is enabled, the Divi Performance area also offers the “Defer Additional Third Party Scripts” option. 

If you wish to load scripts for plugins and themes in the body, you can turn it on because it is disabled by default.

Care should be used when enabling this option as later loading of third-party plugins and theme scripts may break or alter the functionality of the website.

10. Lazy Load Gutenberg 

By default, Divi will now lazy-load the Gutenberg block CSS on pages where you are using the Divi Builder when the Defer Gutenberg Block CSS option is active. 

It will not be limited to just render-blocking anymore, but still load just in case at the footer. 

Initialization delays the use of resources or objects. The footer now contains the CSS file for the Gutenberg block. 

As a result, building resources and the Gutenberg block will both be loaded slowly at first. Without a doubt, this will speed up initial loading.

11. Critical Threshold Height 

The Critical Threshold Height setting is associated with Critical CSS. 

Divi determines an “above-the-fold threshold” and defers any styles for elements below the fold when Critical CSS is enabled. 

This threshold, though, is only an estimate and may differ between devices. 

Fewer styles will be deferred as the threshold height is raised, resulting in somewhat longer load times but a lower likelihood of Cumulative Layout Shifts (CLS). 

Increase the threshold height if you are having CLS troubles.

12. Native SRCSET support for Images that are Responsive 

All of the photos in Divi have native SRCSET support, so Divi will automatically make your images responsive and provide the ideal-sized image to each device. 

You don’t need to work extra on this and simultaneously it’ll increase the loading rates significantly because small images are served to only smaller devices.

Now let’s get to the good part of our blog, you can follow these steps to perform the optimization.

12 Steps for Optimizing Speed and Performance on Divi Website

Both the User Experience and Search Engine Optimization of your Divi website depend heavily on speed optimization (SEO). Therefore, you should address the areas outside of Divi that further optimize your site for speed if you want your Divi site to perform effectively for visitors and Google.

Step-1: Level-up Your Hosting

It makes sense to select a hosting company that is geared for both Divi and WordPress if you want your Divi website to load quickly. 

Therefore, Divi Hosting is a fantastic new option for you if you’re seeking for fantastic WordPress hosting that integrates seamlessly with Divi and comes with automated Divi installation. 

Have a look at some of the qualities of Divi Hosting:

1. Divi is pre-installed on your website when you create it.

2. Your new website is automatically set up with your license key and connected to your Elegant Themes account so you can receive updates and support.

3. All of the PHP settings required by Divi will be set up in your hosting environment right out of the box. No modifications are required.

4. Your website will be powered by a quick and cutting-edge hosting architecture, resulting in quick load times and cutting-edge tools like CDNs and automated caching.

5. You’ll be hosted by a business that is well-versed in WordPress.

6. One of our partners will host you, so they’re committed to making sure Divi runs smoothly on their infrastructure.

Other excellent hosting options are available, and Divi will always perform well in excellent hosting conditions. 

The most popular hosting kinds are discussed in detail here so you can choose the best one for your Divi website.

• Traditional or Shared Hosting

• VPS Hosting

• Dedicated Hosting

• Cloud Hosting

• Managed WordPress Hosting

Step-2: Improve TTFB (Time to First Byte)

The time it takes for a user to get the first byte of website data from your host or server is known as the Time to First Byte (TTFB). 

TTFB delays on Divi sites are typically brought on by the following:

1. The quantity of dynamic content that must be obtained.

2. The current volume of traffic going through your server.

3. The configurations of your web server.

One of the Web Vitals that Google considers when determining the ranking of your website is TTFB. 

Here are some essential pointers you can apply to lower TTFB.

• Upgrade your Hosting: Improving your hosting is the simplest approach to increase your TTFB.

• Use a CDN: To enable visitors to access your site’s data from the server that is nearest to them, lowering TTFB and latency.

• Remove Extra Plugins or Themes: Plugins and themes can slow down the server and loading speeds for your website (including TTFB). Use only the most important, high-quality plugins, and get rid of the rest.

• Implement Caching: The CSS and JS for Divi are delivered using built-in caching. However, employing a CDN to cache your website will cut down on TTFB.

Step-3: Database Optimization

WordPress is a dynamic CMS that uses PHP to fetch data from a MySQL database and display that data on a webpage, in contrast to static HTML web pages. 

This makes administering your website simple, but the drawback is that pages take longer to load since the database must be searched for the data before the page can be loaded. 

Maintaining a clean database is one approach to maintain a Divi site as quickly as possible. 

Finding the data will be more difficult the more disorganized your database is. 

Thus, the website becomes slower. I would advise utilizing a plugin like WP Faster for this. 

Alternatively, you could always use MySQL manually.

Step-4: DNS Optimization

A DNS Lookup must be performed as soon as a user accesses the URL to one of your web pages. 

Each domain/website has a unique IP address, which is discovered as soon as the URL is input by the visitor’s ISP via a DNS query sent to the nameservers. 

A DNS lookup is essentially the same as searching for your domain name in the phone book to discover the IP address associated with it. 

But when a visitor accesses a page on your website, it could need to access several other domains in order to load. 

Thus, you might perform three or four domain lookups—or even more—on the same page load. 

Cloudflare is most likely the greatest free alternative available for increasing the speed of your DNS lookups.

Step-5: Utilize CDN well

Using a content delivery network (CDN), a site can load pages much more quickly. 

The network includes servers located all over the world that cache static files (such as photos, videos, scripts, and other material) from your website. 

The server (or PoP) closest to the person will then supply the content when they make a request for it (by visiting your website). 

Without a CDN, your website files are only available from one server location (wherever your host is hosting those files). 

As a result, the slower the delivery of that website material to your browser is the further you are from that server. 

However, you may deliver the same data from a distant server in half the time with a CDN.

Step-6: Include Caching

To speed up your website, caching can be used in four different ways.

• In order to speed up delivery, this process caches static HTML versions of your page.

• You have more control over what items the browser can cache and for how long by using browser caching. The best option may be to do it manually for greater control as only select plugins can do this. When running speed tests, this will assist in handling the “Leverage Browser Caching” metric.

• Serving cached web pages and files from a CDN that is close to your users is known as CDN caching.

• Object Caching – When PHP runs a query to retrieve data from the database and serve it to the user, object caching stores the results in a cache for later use.

The majority of websites use a variety of plugins, each of which has its own set of CSS files that may need to be integrated, minified, and cached. 

As a result, you can use a third-party solution to deliver static HTML versions of all of your sites that have been cached.

Step-7: Put on Aggregation and Minification

Your website’s files get smaller thanks to minification. 

Your website’s CSS, JavaScript, and HTML files can be made smaller by removing all the extraneous characters (such as spaces and page breaks). 

This shortens the time it takes for a page’s content to load in a browser. 

Aggregation involves grouping site files to lower the total number of requests made on the page and accelerate visitor load times. 

By default, Divi minifies and dynamically combines Javascript and CSS. 

Therefore, technically speaking, adding a third-party plugin to further minify and combine Divi’s Javascript and CSS is not a concern. 

Divi does not, however, minify the HTML output. 

Therefore, using a third-party plugin to minify (and cache) a page’s whole HTML is beneficial. 

Please be careful to thoroughly test your website because sometimes third-party plugins could automatically minify JavaScript files in a way that could lead to mistakes or difficulties. 

In general, minifying CSS files is always safe. However, take care when using those JavaScript scripts. 

The procedure can also be carried out manually.

Step-8: Set-up GZip Compression

You may significantly speed up your Divi Site by enabling Gzip compression. 

It instructs the server to reduce the size of every file it can in order to deliver them to the client considerably more quickly. 

This is the first item on your list for Divi speed optimization because it can significantly speed up page load times. 

Due to the simplicity of gzip compression for site performance, several hosting companies will activate it by default. 

On Apache servers, using mod_deflate is a typical method of manually enabling Gzip compression. 

And all you need to do is use FTP to access your website (show hidden files). 

Then, add a block of code at the bottom of your.htaccess file by copying and pasting.

Step-9: Image Optimization

Images are essential to Divi’s optimization for performance. 

One of the main causes of delayed page loading times is large graphics. 

Your website can become substantially faster only by using image compression, and the reduced image files will use less bandwidth and storage. 

To put it briefly, you should do the following actions while optimizing your image for the web:

1. Use the proper file format, such as JPG, PNG, GIF, or SVG.

2. Image resizing and cropping because it’s useful to know how big your image uploads must be to fit within Divi’s column structure when using Divi to post images to your page.

3. Compress File Size as the majority of photo editors, plugins, and websites like tinypng.com use lossless compression and clever lossy compression to reduce the size of image files without significantly affecting image quality or metadata.

Step-10: Video Optimization 

Although a little more challenging than picture optimization, video optimization is no less crucial. 

Video files can be very huge, which has a significant impact on how quickly a page loads. Furthermore, the issue of disk space will arise if your server is hosting a large number of videos. 

Utilizing third-party services (such as YouTube or Vimeo) to host your films is frequently advised. 

This will prevent those videos from slowing down your server when you link to them using Divi’s video module.

You must lower the size of your films if you plan to self-host them to ensure speedier loading. 

Using free software like Handbrake, you can quickly compress video files.

Step-11: Conduct Speed tests

It’s critical to understand how quickly visitors can load your websites. 

One of the simplest things you can do is run a speed test. 

Additionally, the metrics they offer will be invaluable in helping you find additional methods to optimize your site for performance. 

Here are some excellent locations to begin:

• GTMetrics
• Google Page Insights
• Chrome Dev Tools
• Lighthouse

The outcomes of these tests are what motivate many of us to start speeding up the load times on our Divi sites. 

They offer a useful overview of how your website performs across a range of metrics. Then, when you enhance your site, you may utilize their advice as a checklist to go through. 

For your Divi WordPress site, the ideal approach to use these online speed testing tools is to test a page first before making any adjustments. 

You can check to see whether your score increases as you make adjustments.

You should notice gains in the following areas as you deploy the speed enhancements to your Divi site:

• Time to First Byte (TTFB)

• First Contentful Paint (FCP)

• Time to Interactive (TTI)- It measures when a page is ready for user interaction.
• Speed Index (SI)- analyzes how quickly your page is completed above-the-fold graphically.

• Total Blocking Time (TBT)- interval of time between a user’s first interaction with your website and the response of their browser.

• Largest Contentful Paint (LCP)- Measures how long it takes for the largest content piece, such as an image, to become visible to users.

• Cumulative Layout Shift- The unexpected shifting (or moving around) of the layout that occurs when a user loads a page is measured.

Step-12: Use Plugins carefully

1. Use High-Quality Plugins 

When it comes to plugins, quality is everything. In general, consider plugins that have received excellent evaluations and have endured the test of time. 

And to be certain, run speed tests on your website before and after installing a plugin.

2. Remove Obsolete or Unused Plugins 

It’s crucial that you get rid of any outdated or unneeded plugins from your website. 

They pose a severe security risk and can affect the functionality of your website. 

Additionally, every plugin, even the best ones, also needs extra resources, for slowing down the time it takes for a page to load. 

Use as few plugins as you can to ensure that your Divi site loads quickly.

3. Pay attention to render-blocking errors 

Since Divi doesn’t contain any render-blocking assets, any render-blocking scripts and styles must be from plugins. 

You may want to stop using such plugins if there are any large render-blocking scripts that are slowing down your site.

Divi has improved like never before. 

Your standard Divi now installs built-in performance upgrades, which result in quicker page loads on the front end, a quicker WordPress admin on the back end, and a quicker Divi Builder to modify and create your website. 

Although this is a great beginning, there is still plenty to do to ensure that your Divi site is operating as quickly as possible. 

The performance and speed optimizations discussed in this post will unquestionably increase the speed of your website. 

Most of these improvements would be applicable to any WordPress site or theme, not just Divi.

Feel free to let us know in the comment sections if you have any other tips or suggestions. I’d love to hear from you.