Complete Divi Speed Optimisation Settings. Step-by-step instructions for a faster Divi website

Divi Speed Optimisation – Many people have complained about the page speed load times for websites built with Divi. I too have thought that some of my Divi websites are slow to load. So, I decied to do a bit of research into Divi speed optimisation. The information below is based on research and trial and error with my own sites.

Divi Speed Optimisation Test Website Credentials

In this example, I have a clean install of WordPress 6.1.1 and Divi 4.19.4.
The following plugins are also installed:
WordFence
All In One WP Migration
All In One WP Migration Unlimited Extended
Contact Form 7
RankMath
Really Simple SSL
WP Media Folder
Complianz

The website header and footer are built with Divi Theme Builder.

The Divi layout used for this page example is:
https://www.elegantthemes.com/layouts/health-fitness/fitness-gym-landing-page/live-demo

This is my test URL:
https://www.speedtest.webproduction.com.au/

I added a row with an image to the layout to illustrate Cumulative Layout Shift and how to fix it.

Google’s PageSpeed Insights give your site a score based on 4 core web vital metrics.

• Performance
• Accessibility
• Best Practices
• SEO.

BEFORE OPTIMISATION PAGESPEED INSIGHTS SCORE
Mobile
Performance 67
Accessibility 78
Best Practices 92
SEO 93

Desktop
Performance 93
Accessibility 85
Best Practices 92
SEO 92

AFTER OPTIMISATION PAGESPEED INSIGHTS SCORE
Mobile
Performance 84
Accessibility 78
Best Practices 100
SEO 93

Desktop
Performance 99
Accessibility 85
Best Practices 100
SEO 92

Website Hosting For Divi Speed Optimisation

My website own website is built with Divi, uses WooCommerce plus many other plugins required for the functionality I need. My web hosting settings are:

• 10GB Disk Space.
• 8GB Memory
• 400% CPU
• LiteSpeed Server.

My hosting company is https://ventraip.com.au/ I use their Custom Hosting option to get the options I want.

CPANEL Settings For Divi Speed Optimisation

Optimisation

• Software / Optimize Website
• Compress All Content

PHP Settings

• Select PHP Version
• Current setting 7.4

I currently use 7.4 as this version is the most stable and most plugins will work with this setting. Newer PHP settings may break some plugin functionality.

HTTPS / SSL

Install Auto SSL for your domain. The auto SSL is renewed every 90 days.
Ask your hosting company to help you install an auto SSL. If your hosting company doesn’t provide free Auto SSL, they may sell you a paid SSL certificate to enable https.

Divi Speed Optimisation Theme Settings

Divi / Support Center.
Under System Status click Show Full Report and ensure you have green for everything. If you need help fixing an error speak with you hosting company.

Divi / Theme Options / General / Performance
Enable:
Dynamic Module Framework
Dynamic CSS
Dynamic Icons
Load Dynamic Stylesheet In-line
Critical CSS
Critical Threshold Height: Low
Dynamic JavaScript Libraries
Disable WordPress Emojis
Defer Gutenberg Block CSS
Improve Google Fonts Loading
Limit Google Fonts Support For Legacy Browsers

Divi / Theme Options / Builder / Advanced
Enable: Static CSS File Generation

Divi / Theme Options / General /
Enabled: Static CSS File Generation.

Note: With this enabled, it can sometimes be necessary to click Clear after updating your theme, plugins and CSS otherwise it can affect layout design.

Fonts
Download any Google fonts you are using and upload them via the text module. This allows you to load the font locally instead of loading external Google fonts. Click the link to learn how to do this.

https://help.elegantthemes.com/en/articles/2315966-how-to-upload-custom-fonts-in-divi-builder

Disable: Enqueue Google Maps Script
If you’re not using Google Maps disable this option. You could replace the map with a locally hosted optimised image linking to Google maps instead.

WordPress Settings

Settings / General Tab

WordPress Address URL
Ensure you have a valid SSL Certificate installed on your website. Then add https to your WordPress Address (URL) and Site Address (URL).

Timezone:
Apply your time zone.

Settings / Reading
For each post in a feed, include: Excerpt.

Settings / Discussion
Break comments into pages with: 50

Settings / Media
Uncheck: Organize my uploads into month- and year-based folders

Settings / Permalinks
Select Post name for SEO friendly URL’s.
Save the setting twice.

Note: If you have an exisiting site that uses a different permalink setting, you will need to create 301 redirects to keep any existing SEO your page URL’s have.

Themes

Appearance / Themes
Delete all themes except Divi Theme, your Divi Child Theme (if you have one) and keep one other default theme such as Twenty Twenty-Three in case you want to swap themes when debugging issues.

Plugins

Plugins / Installed Plugins
For best Divi speed optimisation settings, review your plugins list. Are there any you can live without? The fewer plugins your site uses the better.

Common slow plugins to avoid.
https://onlinemediamasters.com/slow-wordpress-plugins/

Divi Speed Optimisation  For Images

Images above the fold are the main cause of Content Layout Shift (CLS). When using an image, your design should include an image variations for Desktop, Tablet & Mobile.

Finding the sizes for each device.

• Upload your image to your layout and view the page at the front end.
• Use Chrome Developer Tools and inspect the image.

For desktop, choose responsive and inspect the image.

View the Computed results to see the actual size the image is rendered and make a note of the height and width.

Repeat for iPad (Tablet) and iPhone (Mobile) sizes.

Create 3 images for each device size based on the computed sizes.

In my example, I have the following.
Desktop: Width: 1080px / Height 443px
Tablet: Width: 614px / Height 252px
Mobile: Width: 300px / Height 123px

Aspect-Ratio
For each device we need to apply the aspect-ratio in the image module setting CSS. Doing this allocates a space for the image in the layout before the image is actually loaded, thus reducing Content Layout Shift.

To work out the aspect-ration use this free website: https://aspectratiocalculator.com/
Click Aspect Ratio Calculator
Enter the computed width and height.

Divi images aspect-ratios
https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi

Apply the CSS for each image size (depening on your image aspect ratio) in the image module. In my example, I’ll use the following:

Desktop:
aspect-ratio: auto 1080 / 443;
width:100%;
object-fit: cover;

Tablet:
aspect-ratio: auto 614 / 252;
width:100%;
object-fit: cover;

Mobile:
aspect-ratio: auto 300 / 123;
width:100%;
object-fit: cover;

Image SEO

When you upload an image to WordPress always apply the:

• Alternative text.
• Title
• Description.

When placing an image module in Divi, be sure to edit the image module Attributes under Advanced / Attributes. This allows you to apply a unique Alt and Title text to each instance of an image (even if the same image is being used elsewhere).

Minify CSS

If your website has any custom CSS you should minify it. Use this free tool to minify your CSS: https://www.toptal.com/developers/cssminifier

If your site uses a child theme DO NOT minify the CSS header component at the top of your CSS style sheet because it will break your theme. The header looks something like this in your Child Theme’s style.css

You can minify everything below this.

LiteSpeed Cache For Divi Speed Optimisation

There are many caching plugins so it is impossible to go through the settings for each one. I use LiteSpeed Cache because my sites are hosted on LiteSpeed servers.

The best LiteSpeed cache settings for Divi can be found here:
https://lucidrhino.design/litespeed-cache-plugin-settings-for-divi/

If you are using another caching plugin you can use these instructions as a guide and apply where relelvant.

In addition to the settings listed on the link above, I also apply the following.

• LiteSpeed Cache / Toolbox / Heartbeat
• Frontend Heartbeat Control: On
• Frontend Heartbeat TTL: 120 seconds
• Backend Heartbeat Control: On
• Backend Heartbeat TTL: 120 seconds
• Editor Heartbeat: On
• Editor Heartbeat TTL: 120 seconds

Only load the scripts you need Perfmatters

If you have many plugins installed on your site (as I do), the scripts from these plugins are often loaded on every page, whether you need those scripts to load or not. To control the scripts which get loaded on each page I use Perfmatters.

Example:
When you install Contact Form 7, this script is loaded on every page whether it has a form or not. If you have numerous plugins doing this the JS & CSS bloat can start affecting your page load times.

Perfmatters allows you to easily manage scripts loaded on each page. Perfmatters is easy to set up and only costs $24.95 per year / per site. The Perfmatters support team are excellent and can help ensure your set up is right for you.

For the best Perfmatters settings see this URL:
https://onlinemediamasters.com/perfmatters-settings/

Note: There may be some settings in your caching plugins and Perfmatters that overlap. Decide which plugin will want to use to control what. As an example, both plugins can enable lazy loading. I use LiteSpeed Cache to manage the lazy loading of images.

Accessibility And Divi Speed Optimisation

By default, Divi doesn’t allow visitors to pinch and zoom into the layout on mobile. Enabling this functionality greatly improves your website’s accessibility score. See this article on how to apply and allow users to pinch and zoom.

https://help.elegantthemes.com/en/articles/2190905-how-to-enable-pinch-to-zoom-on-mobile

Improve your website SEO with Rank Math

I personally like to use Rank Math for SEO. One of the great features of Rank Math is that it can automatically create image alt and title text if they are not applied. Applying an Alt description to every image via Rank Math is a great help.

Rank Math / Dashboard
Enable Image SEO
Then go to the settings and enable missing Alt and Title attributes.

Other useful settings include 404 Monitor, Redirections and more.

Rank Math’s SEO Analyzer looks at your site and lets you know what site fix ups should be applied to improve your SEO.

When editing your page use Rank Math to get a score of 80+

• See these URLs:
  https://rankmath.com/blog/divi-seo/
• https://www.elegantthemes.com/blog/divi-resources/divi-seo-how-to-optimize-your-divi-website-with-rank-math

Page Structure

H1 Titles

Have one instance of a H1 title. This is the main title of your page which should include the keyword for the page.

H2 Titles

Use H2 titles for all other sub-titles within the page content. If you want to use other page titles they should be displayed in order H2, H3, h4 etc. tomake sense to screen readers

Images

As mentioned above, always apply metadata to images so search engines know what they are and how they relate to the copy.

Internal Links

Create internal links to other pages using relevent keyword phrases.

External Links

The odd external link used for reference helps with SEO

Written Content

Try to write around 600 words for each page. It’s not always possible or practicle but if you can do.

Reference

• https://onlinemediamasters.com/divi-slow-loading-website/