11 Tips to speed up your Divi website

Do you want to make your Divi website load faster? The answer is always yes.

A fast website is will enhance your user experience, and boost your ranking in search engines, which will help you get more visitors and conversions.

A slow website can lead to high drop-off rates and a lower time-on-page, which leads to a lower ranking in Google and fewer conversions and sales for your business. The speed of your website will directly affect the income your website can generate.

1. Test to see how fast your Divi website is
2. Choose good Divi hosting
3. Activate Divi speed optimization settings
4. Resize and compress your images
5. Use a CDN
6. Use website caching
7. Use recommended Divi hosting settings
8. Lazy-load Images and server WebP format
9. Optimize your WordPress database
10. Don’t use slow Divi plugins
11. Use Asset Clean Up plugin

This article will give you a number of actionable steps to help speed up your Divi website for faster load times and better Google page speed scores.

1. Test to see how fast your Divi website is

The first step you need to take is to test how fast your Divi website currently loads.

You can test how your site is performing and record exact page load times using one of the online speed performance tools such as Pingdom Website Speed Test, GT Metrix, or the Google PageSpeed Insights tools.

You should run a few tests on each platform to get an average performance and to ensure you test the cached version of your webpage. Each of these tools will give you an overview of page load time, the number of requests, page size, and a speed test grade.

Each tool will also give different results and grades so it is best to take them more as an overall benchmark and as an optimization guide rather than definitive answers to a perfectly speed-optimized website.

You will be able to see if your Divi website is loading too slowly or not. There is no strict time limit on load times but as a general rule, Google says your website should load in two seconds or less. Any longer and visitors will start to lose interest and click to another website.

If you see anything but all green, 100% ratings, and no errors you should start to optimize your Divi site for speed improvements.

2. Choose fast Divi hosting

Having good quality Divi hosting is crucial for your website to load quickly. The hosting company and type of hosting plan you choose will depend on your website and the amount of traffic it is generating, but it is recommended to get the best hosting you can afford.

There are many great WordPress hosts available but Elegant Themes specifically recommends 4 companies for hosting a Divi website. These hosts will configure their servers to meet all of Divi’s recommended PHP settings out of the box.

The best hosting for Divi as recommended by Elegant Themes are Siteground, Pressable, Flywheel, and Cloudways. WordPress recommends Bluehost, Dreamhost, and Siteground, so the common recommendation is Siteground.

3. Activate Divi speed optimization settings

Divi had a major speed and performance optimization update back in August 2021 which greatly improved the speed of Divi out of the box. It includes a number of built-in performance settings that will help with page speed. Divi implemented a dynamic framework which means that you only use what you need so that Divi’s “bloat” is greatly reduced.

To access the Divi performance settings you can log into your WordPress admin dashboard and browse to Divi > Theme Options > General > Performance.

The following options are available;

• Dynamic Module Framework
  Enable this to allow the Divi Framework to only load the modules that are used on the page, and process the logic for the features in use.
• Dynamic CSS
  Dynamic CSS greatly reduces CSS file size by dynamically generating only the assets necessary for the features and modules you use. This eliminates all file bloat and greatly improves load times.
• Dynamic Icons
  The Divi icon font is broken up into various subsets. These subsets are loaded only when needed based on the modules and features used on each page. If you need access to the entire icon font on all pages (for example, if you are using our icon font in your child theme), then you can disable this option and load the entire icon font library on all pages.
• Load Dynamic Stylesheet In-line
  This option dequeues the Divi style.css file and prints the contents in-line. This removes a render-blocking request and improves the PageSpeed scores of individual pages. However, it also prevents the style.css file from being cached. Since the stylesheet is small, it’s recommended to keep this option enabled.
• Critical CSS
  Critical CSS greatly improves website load times and Google PageSpeed scores by deferring non-critical styles and eliminating render-blocking CSS requests.
• Critical Threshold Height
  When Critical CSS is enabled, Divi determines an “above-the-fold threshold” and defers all styles for elements below the fold. However, this threshold is just an estimate and can vary on different devices. Increasing threshold height will defer fewer styles, resulting in slightly slower load times but less of a chance for Cumulative Layout Shifts to occur. If you are experiencing CLS issues you can increase the threshold height.
• Dynamic JavaScript Libraries
  Only load external JavaScript libraries when they are needed by specific Divi modules on the page. This removes unused JavaScript from the main scripts bundle and improves load times.
• Disable WordPress Emojis
  WordPress loads its own WordPress emojis. Modern browsers support native emojis, making WordPress’s emojis unnecessary in most cases. Removing WordPress emojis removes unneeded assets and improves performance.
• Defer Gutenberg Block CSS
  If a page is built with the Divi Builder, the Gutenberg block CSS file is moved from the header to the footer. Since the file is most likely not used, we can load it later. This removes a render-blocking request and improves performance.
• Improve Google Fonts Loading
  Enable caching of Google Fonts and load them inline. This reduces render-blocking requests and improves page load times.
• Limit Google Fonts Support For Legacy Browsers
  Enabling this option will lower the size of Google Fonts and improve load times, however, it will limit Google Fonts’ support in some very old browsers. You can turn this off to increase support for older browsers at a slight cost to performance.
• Defer jQuery And jQuery Migrate
  When possible, jQuery and jQuery Migrate will be moved to the body to speed up load times. If a third-party plugin registers jQuery as a dependency, it will be moved back to the head.

4. Resize and compress your images

Optimizing your images both before and after uploading to Divi will result in a faster website.

The goal of optimizing your images for speed is to produce the lowest file size possible, whilst maintaining acceptable image quality.

The 3 main image optimization speed factors in Divi are:

• Choosing the correct image file format (JPEG, PNG, GIF, WebP) 
  Each image format is best suited to specific types of images. Use JPEGs for photos or images with many colors, PNGs for images with transparency, and GIFs for animated images. WebP images are next-generation image formats and should be added as an option for browsers that support them.
• Using Image Compression
  Compressing your images reduces the file size but does not affect the pixel dimensions of the image.
• Choosing the correct image pixel dimensions
  This is the pixel width and height of the image and should match the pixel dimensions of the space it will be placed on your website. 
  

Software programs like Photoshop, Affinity Photo, and Gimp allow you to take a large image and optimize it for your website before you upload it. You will need to resize the pixel dimensions and then export the image in the correct file format with the correct image compression applied.

It is better to optimize prior to uploading, but it is also better to optimize Divi images on-site after upload than not optimizing at all.

Plugins for optimizing images on your website include Siteground Optimizer which is a plugin for Divi websites hosted with Siteground and includes a range of optimization options to optimize your images. There are image compression, lazy load, and WebP image options. If you are hosted with Siteground (like this website) then the SG Optimizer is a very useful optimization tool for images and your site in general.

EWWW Image Optimizer is a free WordPress plugin that will automatically compress, scale to fit the page and device size, lazy load, and convert images to the next-gen WebP format. Smush is a popular premium WordPress plugin from WPMU DEV that allows you to optimize images by resizing, compressing, and lazy loading images for faster load times.

5. Use a Content Delivery Network (CDN)

A Content Delivery Network (CDN) will speed up your website by putting copies of your website on many servers around the world so that they are physically closer to your end users when they access your website.

There are many ways to add a CDN to your Divi website with some of the most popular ones being;

• Cloudflare CDN *popular
• KeyCDN
• StackPath
• Sucuri
• WP Fastest Cache (plugin)
• WP Rocket (plugin) *Popular
• Autoptimize (plugin)
• W3 Total Cache (plugin)
• WP Super Cache (plugin)
• CDN Enabler (plugin)

If you are using Siteground hosting, they now have their own built-in Siteground CDN which comes with a free and premium version (premium is $165 per year). Having the CDN alongside your website hosting is a convenient and simple way of adding a CDN to your website.

When using a CDN, remember to activate the developer more when you are making edits to your website so you can actually see the changes you make. The developer mode will disable Cloudflare for 3 hours and automatically reactivate it in case you forget.

6. Use website caching

WordPress caching plugins will speed up your website by creating and storing static HTML files from your WordPress website to load when your users request a page from your website.

Without caching your Divi website will be taking time and resources to process WordPress PHP files and to access your database in order to generate the HTML pages for your users. The caching is like a pre-loader for your website. You will need to occasionally clear your Divi cache.

There are a few different options for caching solutions that will work with Divi but some of the most popular are;

• W3 Total Cache
• WP Super Cache
• WP Rocket (premium and popular)
• Siteground SuperCacher (free with Siteground Hosting)

SiteGround SuperCacher is a caching solution that will speed up your Divi website via three caching options that can be managed by logging into your WordPress dashboard and navigating to SG Optimizer > Caching. The three caching options can be toggled on and off and include;

• NGINX Direct Delivery caches your static content such as images, CSS files, javascript, etc.
• Dynamic Cache caches your dynamic content and stores it in the server RAM.
• Memcached will speed up database calls, API calls, and page rendering by reducing the number of database queries.

7. Use recommended Divi hosting settings

The Divi System Status area is available within the Divi Support Center in your WordPress dashboard under Divi > Support Center and shows you the recommended server settings for your host server and the actual settings your host servers are using.

By having the server settings that are recommended by Elegant Themes you can ensure your site will run as fast as possible and avoid any of the common issues that can occur with Divi and the Visual Builder.

The Divi System report will show the recommended settings and the settings you currently are using for;

• Writable wp-content Directory (recommendation of True)
• PHP Version (recommendation of 7.4 or higher)
• memory_limit (recommendation of 128M)
• post_max_size (recommendation of 64M)
• max_execution_time (recommendation of 180)
• upload_max_filesize (recommendation of 64M)
• max_input_time (recommendation of 180)
• max_input_vars (recommendation of 1000

If you see any red lights you will need to change your server settings to the recommended values. This can usually be done quite easily via your cPanel or hosting dashboard, but you can also contact support for assistance if needed.

8. Lazy-load Images and server WebP format

Lazy loading images means that the images (or videos) on your website are only loaded to the page as the image actually appears in the user’s browser window rather than loading all images on the page when it is first loaded,

As a result, lazy loading images will lead to a faster page load time because your content is only loaded as it is needed.

WebP images are a next-gen image format preferred by Google that offers reduced file sizes and provides better compression than regular JPEG or PNG files. Google Page Speed test will often advise you to “Serve images in next-gen formats”.

There are many ways to lazy load images and serve them in WebP format in Divi such as using a CDN like Cloudflare, a plugin such as WebP Express Plugin, or a plugin that includes this as part of a fuller package such as the Jetpack plugin.

9. Optimize your WordPress database

We have all removed old plugins from our website, but many of them leave behind data in the database. This can make your database queries take longer to process and slow down your website. It is a good idea to clean up your database on a regular schedule.

The free WP-Optimize plugin allows you to clean up all of the unnecessary data in your database, optimizes your database tables, and takes back database space lost to data fragmentation.

The plugin will;

• Removes all unnecessary data
• Compacts/de-fragment MySQL tables with a button-press
• Detailed control of which optimizations you wish to carry out
• Carries out automatic weekly (or otherwise) clean-ups
• Retains a set number of weeks’ data during clean-ups
• Performs optimizations without the need for running manual queries
• Automatically trigger a pre-optimize backup via UpdraftPlus
• Show database statistics and potential savings

The plugin has a number of other optimization features that can help speed up your websites such as the option to delete WordPress posts and page revisions which can build up over time and slow down your database,

10. Use Divi & WordPress plugins sparingly

Divi has a marketplace full of 3rd party plugins that make adding extra styling and functionality to your website quick and easy for non-coders, but each plugin you add can add to load time and resource use.

When it comes to plugins, less is more and you should think about whether you really need to add a plugin or not. Can you learn how to add the plugin functionality or effect using a less resource-intensive method? Does the functionality or styling the plugin offers make your website more usable for your users?

11. Use the Asset Cleanup plugin

The Asset Cleanup plugin for WordPress allows you to optimize your website’s speed by selectively disabling and removing unnecessary CSS and JavaScript files on specific pages or posts. It helps to reduce the number of HTTP requests and the size of the page, which can significantly improve page loading times.

By removing unnecessary assets, you can reduce the page size and improve load times, which can help to increase user engagement, improve search engine rankings, and boost conversions.

In the image above you can see that I have disabled all WooCommerce assets that were previously being loaded into blog posts where they were not needed. This plugin takes a little trial and error to see which assets can be removed from where but it is one of the more powerful tools to increase your page speed and start getting more green passes in your search console.

Final thoughts

Divi is quite fast by default, but as we add content and features to our websites they can become slow. Google and your users appreciate a fast website, so optimizing your website for faster loading times is always a good idea. There are many things that can help speed up your Divi website, but start with great hosting, optimize images, add caching and a CDN and you will be well on the way to a fast website.

How fast is your website? let’s share our Google Page Speed and GT Metrix test results in the comments!

*This post was 1st published on Divi Theme Examples on 20th Nov 20, 2015