Divi’s speed is a concern among Divi users. On the flip side, Elegant Themes claims that Divi is one of the fastest WordPress themes available.
So, why is there a gap between the users and Elegant Themes?
To find the reason behind this, we took matters into our own hands and discovered that Divi is pretty fast and has many features to boost its speed. Some users need to learn how to use these features to their advantage.
That is why we have put together a Divi speed optimization guide, where we will demonstrate how to use these features to speed up their site.
On top of that, we will show some plugins that can improve the speed. As a final step, we will share some hacks for optimal performance.
Let’s get started!
What Is Speed Optimization?
Speed optimization or page speed optimization means applying different techniques to improve website loading speed without sacrificing the quality of the website’s content. An ideal website loading time must be under 3 seconds and a website should do so without compromising its user experience.
A fast-loading website that has great design and content is bound to drive more traffic and eventually more revenue.
Divi Speed Optimization With Default Divi Features
As we have said before, Divi has many speed optimization features that can improve your site’s speed significantly. But how do you use them and what do they bring to the table?
To access Divi’s speed optimization features go to WordPress Dashboard > Divi > Theme Options > General > Performance.
Here you can see all the options that affect the performance of your website.
At first glance, it all seems like jargon that is difficult to understand, so allow us to tell you which options you should enable or disable and why-
Features | Enable/Disable | What It Does |
Dynamic Module Framework | Enable | Executes only necessary background code for the modules and features used on a page |
Dynamic CSS | Enable | Same as before but for Divi’s CSS Stylesheet |
Dynamic Icons | Enable | Same as before but for Divi’s font subsets |
Load Dynamic In-Line Stylesheet | Disable | Eliminates render-blocking CSS but it may break your site. |
Critical CSS | Disable if you have a caching plugin. | Prioritizes styling for the visible part of the webpage. |
Dynamic JavaScript Libraries | Enable | Same concept as the first three features but for JS. |
Disable WordPress Emojis | Disable if you have a caching plugin. | Disables the native WordPress emojis |
Defer Gutenberg Block CSS | Disable. | Defers the loading of Gutenberg blocks. Need to disable Gutenberg instead of deferring it. |
Improve Google Fonts Loading | Disable if you have a caching plugin. | Allows for local caching of Google fonts |
Defer jQuery And jQuery Migrate | Disable. | Defers jQuery And jQuery Migrate to the body. But won’t work if some third-party plugins require them above the fold. |
8 Additional Ways to Make Divi Websites Faster
So far, we have discussed the features within the Divi theme that can make your website faster.
However, for a better Divi theme speed optimization, you can perform these tasks-
Disable Gutenberg
Even if you are using the Divi theme, you need to disable the Gutenberg editor completely or it will load Gutenberg’s CSS code all over your site. These codes are not necessary and they can slow down your website.
To disable the Gutenberg editor completely, you can use the Disable Gutenberg plugin. If doing so breaks your site, you can partially enable it for specific pages, posts, etc.
Disable Google Fonts
Divi has a default feature on locally hosting Google fonts, but it’s better to do this manually with a caching plugin. But if you are using a plugin for this, you need to convert the fonts you need to woff2 format and preload them. Here’s how-
- Go to your WordPress Dashboard > Divi > Theme Options > General, then disable Google fonts.
- Download the fonts you need from Google WebFont Helper.
- Convert the fonts with a converter to the woff2 format, which is smaller in size.
- Upload the fonts to your site.
- Preload the fonts using your cache plugin.
- Set your font-display property to fix “Ensure text remains visible during webfont load” in PageSpeed.
For more details, you can watch this video here.
Get a High Performing Divi Hosting
Hostings play a crucial role in your website’s speed and performance because they store and deliver your website’s data to your traffic. That’s why you must choose the best possible hosting for your Divi website.
When choosing a hosting for your Divi website, you need to consider the following-
- Available Server Locations: Your data will be retrieved faster and with lower latency if it is located close to your audience.
- Available Server Resources: The hosting’s CPU, RAM, and storage must be sufficient to handle your site’s traffic and complexity.
- Reliability: A dependable hosting service ensures your website is consistently available and responsive, preventing downtime and slow loading times.
- Content Delivery Network (CDN): CDNs distribute content globally, reducing load times by serving from the nearest server.
- Scalability: The ability to adjust resources to accommodate traffic spikes without site slowdowns or crashes.
- Bandwidth and Data Transfer: Having enough bandwidth and data transfer is crucial for handling traffic spikes.
- Support and Maintenance: Your hosting provider should provide timely support and server maintenance to keep your site secure and optimized.
- Security Features: The hosting should provide robust security measures to protect your website and sensitive data from threats.
Keeping these in mind, Elegant Themes suggests their users use these hostings: Cloudways, Flywheel, Pressable, and Siteground. Also, Divi has a list of requirements for choosing a suitable hosting, which you can find in Divi > Support Center > Show Full Report-
It’s best to use a hosting service that has the LiteSpeed server with NVMe storage.
Optimize Images
A large part of your website will be images, no matter what type of website you are running. Not using these images in the correct format can take a toll on your site’s speed and performance.
Now, you can optimize images in the following methods-
- Image Compression: By compressing images, you are making the images smaller in file size without losing any of the properties of the image. This makes it easy for the site to load these images, making your website faster.
- Image Resizing: Image resizing also reduces the size of the image but in length and width. The goal is also the same: an image with a higher pixel will use up more resources than necessary to load.
- Image Formatting: Image formats can also have an impact on the size speed. If you can compromise image quality a bit, JPEG is a good option compared to PNG as the image size is smaller with JPEG.
Alternatively, you can try the WEBP format, which has a smaller image size than JPEG.
For compression, resizing, or formatting you can use TinyPNG, Imagify, etc.
- Image Manipulation: JPEG, GIF, and PNG are good formats to use on a website but there’s some extra information stored with these formats that isn’t always needed.
To make these images even smaller, you can use image manipulation to remove this extra information. You can use software like GIMP or Adobe Photoshop for this.
- Use Responsive Images: Create multiple versions of images and use them for different devices. Use slightly larger images for users browsing from a PC or laptop and smaller images for mobile devices.
But for overall image optimization, Cloudflare Mirage/Polish is recommended.
Optimize Your Code
You can use code minification and compression techniques to reduce bloats and increase the speed of your website.
Programmers often use white space, comments, and other redundant elements in their code to make it easy to understand. But these aren’t necessary for the browser to execute them.
Here’s an example of minification-
Original Code:
Minified Code
That’s why with some performance plugins like WP Rocket and WP Optimize, you can reduce the irrelevant parts to optimize your site.
These techniques minification techniques involve reducing the unnecessary parts of the website code to reduce its size, which improves loading time and LCP ensuring faster delivery and reducing bandwidth usage.
Optimize Your Design
To make your Divi website faster, you should consider minimalistic design approaches. Meaning, you should not use extravagant design options that add only a little value.
To be more specific, avoid using sliders and animations above the fold of your webpage. Doing so will increase CSS and Javascript codes. This will increase page size, page load time, and HTTP requests.
All of these get your website performance down. Take the example of the renowned fashion brand Zara, which uses a slider in their hero section.
Let’s compare it with the website of Apple, which keeps its hero section fairly simple, and uses a video right underneath its hero section (below the fold).
Also, it’s better to code your site’s headers, footers, and sidebars manually in CSS, rather than use Divi’s code as it is heavier.
Optimize Your Database
Even when you delete your old plugins, they will leave data in your WordPress database, which can drag your site speed down. To prevent this, you can use WP Optimize to clear your database cache.
Cleaning up your database cache at regular intervals will keep your Divi website in good shape.
Use Caching Plugins
Caching plugins are essential tools if you are looking to improve your site’s speed. That’s because it creates static versions of pages and posts. This process reduces the need for the time-consuming WordPress loop and database queries, ultimately leading to faster loading times for visitors.
Other than this you can also use these plugins to:
- Remove unused CSS: Eliminate unnecessary CSS code from your website to reduce file size and improve loading times.
- Reduce TTFB: Optimize server response time to minimize the delay between a user’s request and the browser receiving the first byte of data.
- Delay JS: Postpone the loading of non-essential JavaScript files to prioritize critical page elements and improve initial page rendering.
- Lazy render Divi sections: Utilize lazy rendering to load Divi sections only when they come into the user’s viewport.
- Lazy load images: Defer the loading of images until they are about to be displayed on the user’s screen.
- Enable object cache: Implement object caching to store database query results, reducing the need to regenerate data.
- Remove bloats: Eliminate unnecessary or redundant elements, plugins, or features that add unnecessary weight to your website.
There are tons of quality caching plugins available in the WordPress store. But, we recommend FlyingPress for overall performance, or if your hosting uses a LiteSpeed server, get the LiteSpeed cache.
How to Optimize Divi for Mobile
To optimize Divi for mobile, the best approach you can take is to optimize your images and videos. Follow the guidelines we have shared above, and you should be good to go.
Other than image optimization, getting a good caching plugin, and a DNS server (like CloudFlare) will also help.
5 Best Practices to Maintain Your Divi Website Speed
Optimizing the speed of your Divi website is not enough, you need to maintain your site’s speed by following these tips-
- Keep Divi, WordPress, and Plugins Updated: Keeping all the components of your website up-to-date is one of the most basic things you can do. They not only bring new features but also optimize performance and fix security vulnerabilities.
- Don’t Use Unnecessary Plugins: Plugins can add essential features and functionality. However, having too many can slow down your website.
- Test plugins to see their CSS, JS, and memory usage: Use tools like Chrome Dev Tools, Query Monitor, and Perfmatters to check the resources your plugins are using.
- Check on Performance: Keep an eye on your site’s speed and performance so you can fix any urgent issues.
- Keep Regular Backups: Regular backups are a safety net against data loss and can be invaluable if your website encounters issues. Tools like UpdraftPlus or VaultPress can automate this process.
Conclusion
If you follow our Divi speed optimization guide, you will surely get your Divi site’s speed up to the desired mark, as we have tried our best to include all the ways and the best practices.
However, if you believe we have missed anything, do let us know in the comments.
0 Comments