Table Of Contents
Table Of Contents
- 1 Table Of Contents
- 2 Divi Speed Optimisation Test Website Credentials
- 3 Website Hosting For Divi Speed Optimisation
- 4 CPANEL Settings For Divi Speed Optimisation
- 5 Divi Speed Optimisation Theme Settings
- 6 WordPress Settings
- 7 Themes
- 8 Plugins
- 9 Divi Speed Optimisation For Images
- 10 Image SEO
- 11 Minify CSS
- 12 LiteSpeed Cache For Divi Speed Optimisation
- 13 Only load the scripts you need Perfmatters
- 14 Accessibility And Divi Speed Optimisation
- 15 Improve your website SEO with Rank Math
- 16 Page Structure
- 17 Reference
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:
All In One WP Migration
All In One WP Migration Unlimited Extended
Contact Form 7
Really Simple SSL
WP Media Folder
The website header and footer are built with Divi Theme Builder.
The Divi layout used for this page example is:
This is my test URL:
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.
- Best Practices
BEFORE OPTIMISATION PAGESPEED INSIGHTS SCORE
Best Practices 92
Best Practices 92
AFTER OPTIMISATION PAGESPEED INSIGHTS SCORE
Best Practices 100
Best Practices 100
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
- Software / Optimize Website
- Compress All Content
- 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
Dynamic Module Framework
Load Dynamic Stylesheet In-line
Critical Threshold Height: Low
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.
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.
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.
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).
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.
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 / 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.
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
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
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:
aspect-ratio: auto 1080 / 443;
aspect-ratio: auto 614 / 252;
aspect-ratio: auto 300 / 123;
When you upload an image to WordPress always apply the:
- Alternative text.
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).
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
/* Theme Name: Wireframe UI Kit Theme URI: https://thebasic.valaskastudio.com/ Description: Wireframe UI Kit Author: valaska studio Author URI: https://valaskastudio.com/ Template: Divi Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
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:
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.
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:
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.
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+
Have one instance of a H1 title. This is the main title of your page which should include the keyword for the page.
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
As mentioned above, always apply metadata to images so search engines know what they are and how they relate to the copy.
Create internal links to other pages using relevent keyword phrases.
The odd external link used for reference helps with SEO
Try to write around 600 words for each page. It’s not always possible or practicle but if you can do.