Divi is not just any page builder. Divi takes the design process to a whole new level with a complete web design system that allows you to design every part of your website visually, without having to depend so much on complicated third party design software (such as photoshop or Sketch). Which means that the Divi Theme (and the Divi Builder Plugin) will require more resources than say, the basic WordPress TwentyNineteen Theme. But that doesn’t mean Divi has to be slow.
In fact, Divi has a lot of performance enhancements that have been added in previous updates that have made Divi sites (and the Divi Builder) run faster than ever. Plus, Divi is built with third party optimization in mind. So many of the performance optimization plugins that are used for WordPress, can also be used to boost speed performance for your Divi website.
In this post, we are going to explore what has been done already to speed up Divi and what we can do to make it even faster. Here are some key topics we’ll cover:
Benefits of a Fast Divi Website
There is no use going to great lengths to convince you that you need a faster website. But here are a few obvious benefits you can’t ignore.
- Decreased Bounce Rate – Visitors won’t leave your site as much.
- Increased Conversions – Getting your site up quicker can lead to better conversions.
- SEO – Google likes sites optimized for speed.
- Credibility – slow websites create a bad first impression to your visitors.
How Fast is Fast Enough?
Generally, a good goal is to have your webpages load in 3 seconds or less. Although it seems most customers expect it to be 2 seconds or less these days. But obviously, every website and web page is different.
How a Divi Website is Displayed
To understand how to speed up your Divi site, it may help to understand what is involved when displaying a website. Of course, this isn’t unique to Divi. This would apply to most WordPress websites.
Here is what happens..
- You enter a URL (or click a link) to the web page you want to visit.
- Your browser finds the IP address for that URL through your DNS (Domain Name Server) and makes a request for that IP address on a web server (where you host your site).
- The web server (usually Apache) receives the request and then fetches the web page it has stored (the one you designed in Divi and published in WordPress).
- The page also contains PHP used to retrieve data (like images) from the MySQL database.
- Once all necessary resources have been retrieved from the server and database, the page is finally served to the client’s browser.
This may sound like a lot of steps just to display a web page, but for a WordPress site, this is pretty standard regardless of the theme you use. And if you think about it, the whole process is pretty miraculous. But unfortunately, it is something us users take for granted. Today, we have grown to expect all this to happen in less than 3 seconds.
So what can we do to help the process along? First, we need to acknowledge that when it comes to speeding up a website, there are things that are out of our control. For example, you have no control over the kind of browser a visitor is using or the speed of their internet connection. But, those things aside, there are things we can and should do to make our Divi website’s faster.
First, let’s take a look at some of the built-in speed optimizations Divi has already.
Built-in Divi Speed Performance
Static CSS File Generation
Divi’s first speed performance enhancements came with Static CSS File Generation.
Before this upgrade, all CSS generated by the Divi Builder was served in-line at the footer of a page. But with this enhancement, Divi now will take all the CSS created by the Divi Builder (and added to the Theme Customizer and Theme Options) and serve them as a static CSS file that has automatically been minified for you. This reduces a page’s document size and allows the browser to serve a cached version of the static CSS file for faster page loading.
You can choose to enable or disable this option in theme options or in the page settings.
The upgrade included the following:
- Google Font Request Optimization – Divi optimizes Google font delivery by combining font requests and removing duplicate font files. For pages that make use of various custom fonts, this update will help speed up loading times.
You can also enable or disable these options in the theme options.
A Faster Divi Theme and Visual Builder
Although most are concerned with how fast their Divi site can load for visitors on the front end, it also helps to have a faster backend as well. Developers (and clients) want to be able to edit and design their Divi website with speed as well.
That’s why the third wave of Divi speed and performance enhancements included upgrades to both the Divi Theme and the Divi Builder. Using creative caching mechanisms and other performance optimizations, page load speeds were improved on standard Divi installs. Plus, the WordPress Admin and Divi Builder operate much faster as well, making the editing and design process much quicker.
Divi System Status
Although not technically a speed improvement, Divi’s update to include a built in system status report will definitely help identify any problems with your website’s environment that may be causing slower page load times.
For example, your system status may show that you are using an older version of PHP that may be slowing down your site. We recommend using the latest stable version of PHP. This will not only ensure compatibility with WordPress and Divi, but it will also speed up your website leading to less memory and CPU related issues. For more, check out our post on how to update your PHP version.
Making Your Divi Site Even Faster
Making your Divi site faster requires many of the same performance enhancements needed for most WordPress websites. Those of you who have been using WordPress may have done some or all of these optimizations already. Hopefully, these suggestions will help take your Divi website speed to the next level.
Database Optimization and Cleanup
Unlike static HTML sites, WordPress is a dynamic CMS that uses PHP to retrieve data stored in a MySQL database in order to display that data onto a webpage. This makes managing your site easy, but the downside is that it takes longer for pages to load because it has to locate the data in the database before loading the page. In general, static HTML websites will be faster than WordPress websites for this reason.
One way to keep a Divi site as fast as possible is to make sure you have a clean database. WordPress site files are organized in your database by tables and everytime you add new data to your site (like themes and plugins), you create new tables and more data. As you would expect, the messier you database is, the harder it will be to find the data. This leads to a slower website.
So, if you added the Divi theme to your website after years of trying out other themes and countless plugins, chances are you have some data stored that you no longer need. Even if you uninstall a plugin, it doesn’t mean all the data is gone in the database. Plugins like to leave some data in there in case you reinstall the plugin. Not cool, I know. This left over data can lead to unnecessary clutter and slow down your site.
Just like every human needs organization to work more efficiently, every WordPress site (Divi or not) needs a clean database to load pages faster. So, if you’ve had your website for a while, cleaning it can significantly speed things up.
Or if you know what you are doing, you can always do it manually in MySQL.
In addition to cleaning up your WordPress Database, you may want to make WordPress even lighter by cutting down on the data it stores. For example, WordPress will automatically hold deleted items in the trash for 30 days. You may want to cut that time period down to 7.
The very first thing that needs to happen when a user visits the URL to one of your web pages is called a DNS Lookup. As soon as the URL is entered (or clicked), the visitor’s ISP sends a DNS query to the nameservers to find the IP address associated with your domain (every domain/website has a specific IP address). In essence a DNS lookup is like looking up your domain name in a phone book to find the IP address for that domain.
But when a user visits a page on your site, the page may have multiple domains that need to be accessed to pull up the page. So you could be doing 3 or 4 domain lookups on a single page load (maybe more).
Generally speaking, most free DNS Providers like Godaddy and Namecheap will generally be slower than you will probably like.
The best free option out there that will boost your DNS lookup speed is probably Cloudflare. They have the fastest DNS performance recorded on DNSPerf.com. This will be significantly faster than GoDaddy and Namecheap. And, you can even optimize cloudflare to be used for DNS without their other services (like CDN or WAF) if you want.
For example, you may want to use Cloudflare for DNS and Security (DDOS detection) and KeyCDN (or MaxCDN) for your CDN. That seems like it would be a great combination.
Setting up CloudFlare
Cloudflare is really easy to set up. You don’t have to worry about switching your hosting or anything beforehand. All you need to do is walk through their 5 minute setup that begins with entering your domain.
They will retrieve your current DNS records automatically.
The main thing you will need to do to complete the setup is change the default nameservers on your current DNS provider (like GoDaddy) to Cloudflare’s nameservers.
Then you can manage your DNS easily from their Dashboard.
And just like that you have a boost in DNS lookup speed, more security, and a CDN for your website (plus more).
If you are at all serious about the speed (and performance) of your website, it starts with picking a good hosting provider. In fact, you can do everything right to optimize your website for speed and still have a slow site because of your host. And the really good hosting providers will make a lot of those speed optimizations for you so you don’t have to worry about it.
Types of Hosting
Traditional (Shared) Hosting
This is by far the most popular type of hosting for WordPress/Divi users. But unfortunately, it is the worst option for speed optimization. With traditional shared hosting, you will share all the available resources of a server with others. Because you are sharing, the cost for this kind of hosting is low. But the downside is that you can’t control how much traffic those other sites are getting on your shared server. So you can easily fall prey to periods of extremely slow loading times and even times when you site is completely down. So you better have a good idea of how much traffic your shared hosting can handle.
With dedicated hosting, you have your own dedicated server just for you. No need to share any resources with anyone else. This means you will have more predictable and consistent fast loading times for your website. This is usually offered as a top tier option for large corporations at a high premium cost.
Virtual Private Server (VPS) hosting is basically a middle ground between shared and dedicated hosting. Your server space is “private” which means it is completely separated from everyone else (kind of like a gated community for your site files). So your site files aren’t exposed to others on the server. Unlike shared hosting, a VPS does have a dedicated amount of system resources (or power) at your disposal to ensure your site always gets what it needs to deliver fast load times consistently. So you won’t have to worry about other website’s traffic spikes affecting your site speed.
But, unless you have a managed VPS, this kind of hosting is mostly for those DIY types that are tech savvy enough to handle things themselves. For more info, here is a performance comparison between VPS hosting and Shared Hosting.
With cloud hosting, you have access to a network of servers (in the cloud) instead of a single physical server. This allows you to pull all the resources you need from this network of servers as needed. In essence, you have a virtual partition of server space that is backed by the power and resources of the entire network. So you don’t have to worry about the traffic spikes like you would in shared hosting. Cloud hosting is extremely flexible and scalable to your needs.
One main difference between Cloud Hosting and VPS hosting is that VPS hosting has a dedicated (or limited) amount of resources to pull from that may or may not become depleted. Cloud Hosting, on the other hand, is capable of keeping your resources available without being depleted because it can always pull from the other servers in the cloud. In theory, cloud hosting offers more consistent and reliable high speeds. So if you are serious about speed, cloud hosting is a great option (maybe even the best).
Managed WordPress Hosting
Managed WordPress Hosting usually refers to shared hosting that is managed by WordPress experts. It isn’t as “private” as a VPS or as powerful as a dedicated hosting environment. But it does help maximize the speed of your shared environment by having WordPress experts do the work. They do this well because they tailor their services and configure their servers strictly for WordPress sites. And a lot of them come with many cool and convenient built-in features like one-click staging environments, site caching, one-click CDN deployment, automatic backups, SSL’s, and more. They are perfect for those of us who don’t want to rely on (or manage) a bunch of plugins for basic speed optimization, security, and management.
Hosting Companies to Consider
There are many WordPress Hosting companies out there. And if at all possible, you will want to avoid traditional shared hosting (not managed) if you are serious about speed optimization. But if you have a simple site and aren’t willing to pay the extra money for managed, Siteground seems to be one of the best for shared hosting.
For now here is a quick list of hosts to consider for a faster Divi website.
That list is the tip of the iceberg. I’m sure there are others that will work great for you Divi/WordPress site. If you are looking for a credible hosting review site, check out Review Signal.
You can also refer to this guide to help you make your choice.
Time to First Byte (TTFB) Optimization
The Time to First Byte (TTFB) is the amount of time it takes the user to receive the first byte of website data from your host/server. So when a user makes an HTTP request (loads your webpage), the TTFB will essentially be that waiting period before any data is received.
Think of it like getting fast food. The restaurant may be optimized to deliver your food fast. In fact they may have a hamburger already waiting on you. But you still have to wait in line to order. That waiting period is what you can think of as the time to first bite (see what I did there).
The TTFB should be around 200ms (according to Google). But for sites that are on poor hosting and haven’t been optimized, the TTFB can easily be 2 seconds or more.
TTFB delay on your Divi site is usually caused by the following:
- The amount of dynamic content that needs to be received. This can be cut down with caching, database optimization, and a CDN.
- The amount of traffic your server is experiencing at the time. Traditional (or shared) hosting providers make it difficult to bring that TTFB down because you are sharing resources with others on the same server. Spikes in their traffic will cut down on your server’s processing speed.
- Your web server configuration. A good WordPress hosting provider can help with your site’s TTFB by providing a solid backend infrastructure and optimizing your web server configuration (things pretty much out of your control).
In short, if you want a quick boost in TTFB, get better hosting and follow the rest of the steps below.
There are four main types of caching that can be implemented to speed up your site.
- Page Caching – This process stores cached static HTML versions of your page for fast delivery.
- Browser Caching – This gives you more control over what content is able to be cached by the browser and for how long. Only some plugins can do this, so it might be best to do it manually for more control. This will help take care of that “Leverage Browser Caching” metrix when conducting speed tests.
- CDN Caching – Serves cached website pages/files from a CDN closest to your users.
- Object Caching – Object caching caches repeated query results that PHP initiates to retrieve data from the database and serve it to the user. This is different from bytecode caching which stores a cached version of the compiled PHP code used to display your website.
Divi does perform caching for serving up Divi’s static JS and CSS files behind the scenes. But this is primarily for the Divi theme files for better Divi Builder functionality.
There is still a need to use caching for your WordPress site as a whole. Most sites have multiple plugins that come with their own CSS files that may need to be combined, minified, and cached. So you can definitely take advantage of a third party plugin to serve cached static html versions of all of your pages.
Popular Caching Plugins include:
Tip: Whenever you have page caching enabled on your site using a plugin, you will want to make sure and delete (or clear) the cache whenever you make changes to your website to make sure you and your visitors are served the latest version of your site.
Minification and Aggregation
Aggregation involves combining the site files to reduce the total requests on the page and speeds up loading times for your visitors.
Plus, almost every Divi site will depend on files outside of the Divi Theme (like plugins or other files added to the Child Theme) that will benefit from minifying and combining the CSS and JS files. This can easily be handled by a plugin.
Some credible plugins that will minify your site files include:
And if there is a conflict, you may need to disable Divi’s built-in options and let the third party plugin handle things.
Gzip Compression is more important than minification because it can reduce page size by up to 70%.
Enabling Gzip compression on your Divi Site can give you a big boost in speed. If you are familiar with creating compressed (or zipped) files on your computer, you already have a basic understanding of how Gzip compression works. We create zip files (or folders) to make the contents of the file (or folder) smaller. Why? So we can upload and download the file much faster! Gzip compression does the same thing for your website. It tells the server to compress all the files it can into smaller versions so that it can be served to the client much faster. This can really boost page load speed.
This is one of those areas that you can improve the speed of Divi even on a fresh installation of the theme. Since Divi already minifies the core theme files anyway, Gzip compression will make those files even smaller. Gzip compression will make your files much smaller than minification ever could.
Many of the WordPress performance plugins (like W3 Total Cache and WP Super Cache) will include Gzip compression as an option.
Here are a few plugins that support Gzip compression:
And some hosting providers will enable gzip compression automatically because it is such a no brainer for site performance. Feel free to check if Gzip compression is enabled on your site.
The more common way to enable Gzip compression (on Apache servers) is to do it manually using mod_deflate. And all you have to do is access your website (the root) via FTP (make sure to show hidden files). Then copy and paste the following block of code at the bottom of your .htaccess file.
Here’s the code:
A content delivery network (CDN) takes site speed to another level. As the name suggests, a CDN is a network for delivering content. The network consists of servers around the world that store cached static files (images, videos, scripts, etc.) of your website content. Then when a person sends a request for that content (by visiting your website), the server (or PoP) that is closest to the person will deliver the content. Without a CDN, your website files are accessible from one server location (wherever your host is storing those files), so the farther you are away from that server, the slower it will be to deliver that website content to your browser.
Think about it, when you want a pizza delivered to your house, you don’t pick the pizza place 30 miles away. You choose the one 5 miles away because you want it delivered as soon as possible (if you are a normal human who loves pizza as much as I do). A CDN works in a similar way. Since you want the website to appear in your browser as soon as possible, a CDN will have your site files ready to be delivered from the server closest to your location. So if your site files are stored on a server in San Francisco and someone in London pulls up your site, it may take 1 or 2 seconds to receive that data from a server thousands of miles away. But with a CDN, you can deliver that same data from a server in London in half the time. That’s a big difference!
So even if you don’t see the full extent of the results at home, you are speeding up the delivery of your website to places around the world.
There are a lot of ways to get a CDN for your site. Many hosting companies will include an option for deploying a CDN with their service. And there are network platforms like Cloudflare and MaxCDN (now StackPath) that offer CDN capabilities along with other performance and security features.
Here are some credible CDN platforms to consider:
There are some caching plugins like WP Total Cache or CDN Enabler that include an option for integrating multiple CDN providers automatically which in pretty convenient.
Here are some plugins with CDN support:
Image optimization is one of the biggest culprits for slow loading page speeds. This is probably due to how easy it is to ignore. After all, how much damage can one background image do to a webpage? Well, you may be surprised. Just a few large images that haven’t been optimized for the web could have catastrophic ramifications on page load speed. And let’s face it, your site will probably have a lot of images.
There really is no stressing enough the essential need for image optimization. Every website should be doing this. Image compression alone can make your site noticeably faster and the smaller image sizes will save on storage space and bandwidth (win-win!). But there are other important image optimizations that you should think about as well.
In short, you will want to do the following when optimizing your image for the web:
Use the Right File Type
When it comes to images on the web, you really should stick with the following image file types:
- JPG – This should be your go to file type for most images/photographs you use on your site because you can get great looking images at a smaller file size than PNGs or GIFs. Avoid using PNG format for things like background images or photographs unless you need a transparent background.
- PNG – Use PNGs for images that need a transparent background. JPG doesn’t support transparency.
- SVG – This is a vector format that delivers extremely sharp detail using HTML code. SVGs are great for logos, icons, and other vector animations.
Resize and Crop Your Images
You never want your image to be larger than it needs to be. For example, if you are adding a logo in Divi’s theme options, in most cases you only need it to have a width of 100px. So don’t upload a logo with a 5000px width and force Divi to resize that image for you. The result may look similar on the front end, but that large size is killing your page load time.
When uploading images to you page using Divi, it is helpful to know how large those images need to be within Divi’s column structure. This ultimate guide can help point you in the right direction. (However, there are new column structures that have been added since that post so we will try and get that updated soon).
Compress File Size
You will want to bring down your image file size right down to the point before you notice a drop in quality. This is done through image compression. Most photo editors, plugins, and sites like tinypng.com compress images using lossless compression (which shrinks the image file without losing any image quality) and smart lossy compression (which decreases the size of the image file by reducing metadata and image quality in a way that isn’t really noticeable by the user).
Take Advantage of Image Optimization Tools
If you can, I would suggest that you optimize your images for the internet before uploading them to your Divi site. This can be done through photo editors like Photoshop which include a “Save for Web” option. In addition, you can use a free third party site like TinyPNG.com or Compressor.io to compress the image before you upload it to your site.
There are some great plugins that will conduct image compression for you. Some plugins (like Imagify) will compress images already being used on your site and automatically compress images as you upload them to your WordPress Media library. Bear in mind that using a plugin for this may be taxing on your site while compressing those images so it is best practice to do image optimization beforehand if possible.
Here are some great image optimization tools and plugins you can use:
For more info, check out a comparison on 6 quality image optimization plugins.
Responsive Images are coming soon to Divi as well. This will improve the optimization of images used in Divi even further by serving up the scaled images that are the right size for different responsive displays (like tablet and phone).
Video optimization is a bit harder than image optimization, but definitely not less important. Video files can be large and therefore extremely taxing on page load speed. And if you are hosting a lot of videos on your server (in the WordPress media Gallery for example), you will run into the additional problem of disk space. That is why it is often recommended to use third party services (like YouTube or Vimeo) to host your videos for you. Or, you may consider offloading your video media content on a storage platform like Amazon S3. This will allow you to link to those videos from within Divi’s video module without them having to slow down your server.
For more info on how to use video in Divi (like adding a third-party hosted video URL to a Video Module), check out this ultimate guide.
Use Quality Plugins
Obviously, the less files a website has to load, the faster it will be. So you need to be mindful about the quantity of plugins you use. If you have plugins (or Themes) that you aren’t using, make sure you delete them. They can be harmful to your website performance and a serious security risk. But quality is the more important factor when it comes to plugins. In fact you can have 20 to 30 quality plugins that won’t slow down your site as much as one bad one will. In general, make sure you choose plugins that have stood the test of time and have great reviews. And always test how a plugin affects your website performance with before and after speed tests to be sure.
Conducting Speed Tests
You probably wouldn’t be reading this article if you haven’t done at least one speed test on your website. And rightly so, it is important to know how fast your pages are loading for visitors. Conducting a speed test is one of the easiest things you can do. There are tons of websites that will do this for you for free. And the metrics they provide will be invaluable for identifying ways you can further optimize your site for better performance.
Here are a few great places to start:
The results of these tests are what drive many of us to start optimizing our Divi site for faster load times. They provide a helpful breakdown of how your web page performs in a variety of areas. Then you can use their recommendations as a checklist to work through as you optimize your site.
The best way to use these online speed testing tools for you Divi WordPress site is to run a test on a page first before you do any optimizations. Then you can use this as a base to compare future tests as you make changes. After each optimization you make, you can see if your score improves.
For example, you may notice that using one caching plugin will work better than another. Don’t be afraid to test multiple plugins for best performance.
Here is a helpful WordPress optimization guide by GTMetrix that will be helpful.
As you implement the speed optimizations to your site, you should see improvements in the following areas:
- Fully loaded time/Onload time (this is the most important metric you are trying to knock down)
- Total Page Size (things like minification, image optimization with help with this)
- PageSpeed/YSlow scores
- Serve scaled images
- Optimize images
- Leverage browser caching
- Minify CSS/HTML
- Enable gzip compression
- Make fewer HTTP requests
- Add Expires Headers
For more info, check out our post on how to improve your google page speed score.
The Goal is Speed, Not Perfection
It can be easy to get bogged down with testing your website and optimizing it to perfection. But no website will be perfect. You may even find that improving certain speed test performance grades may actually slow down your page load time. That’s because even those speed tests aren’t perfect either. Like this article, they are merely a guide to help improve your website performance and speed.
How to Avoid Possible Conflict with Divi’s Built-in Performance Optimizations and Third Party Plugins
To avoid these types of conflicts, you can disable Divi’s built-in optimizations and let the third party plugin handle it for you. The three option you will want to disable are:
- Static CSS File Generation
- Minify and Combine CSS Files
You can disable the option for static CSS file generation under Theme Options > Builder > Advanced.
We’ve pretty much covered all the major factors that contribute to faster Divi/WordPress websites. But there are a lot more things to consider that could improve your speed even more.
- Having a correct Divi child theme setup
- Changing your WordPress Login URL to keep those bots from overloading your server. This would be a good chance to create a custom login page with Divi.
- Avoiding unnecessary calls to external Services. Some plugins and embeds require that you use files that are hosted on their servers. These additional calls will slow down page load.
- Incorporate lazy loading for images and videos for better page load speed.
Quick Overview of Suggested Practices and Resources for Faster Divi Websites
Here is a quick overview of the suggested practices and resources included in this article for easy reference.
Get Latest PHP version
You can use these plugins to optimize and cleanup your Database for a faster site.
DNS Lookup and DDOS Detection
A quick list of hosts to consider for a faster Divi website.
If you are looking for a credible hosting review site, check out Review Signal.
You can also refer to this guide to help you make your choice.
Time to First Byte (TTFB) Optimization
- Get Better Hosting with proper web server configuration.
- Optimize the site for speed
Caching (Page, Object, Browser)
Popular caching plugins include:
If your plugin doesn’t support browser caching, you will want to enable browser caching manually.
Minify/Combine Site Files
Some credible plugins that will minify your site files include:
Our you can do it manually.
Here are some credible CDN platforms to consider:
Here are some plugins with CDN support:
- Photoshop “save for web”
- Choose the right size images for Divi’s grid layout using this ultimate guide.
Divi is faster than ever before. With built-in performance upgrades, your standard Divi installs have faster page loads on the front end, a faster WordPress admin on the backend, and a faster Divi Builder to edit and design your site. This is a great start, but there is much more to do to make sure your Divi site is running as fast as possible. The speed and performance optimizations included in this article will definitely boost your site speed. For the most part, these optimizations would apply to any WordPress site/theme, not just Divi. And it is surprising how many simple things you can do for free!
I’m sure there are tons of suggestions and resources out there that weren’t mentioned, so feel free to share those with us in the comments.
I look forward to hearing from you.
Featured Image via Sammby / shutterstock.com