Configure WP Rocket for Divi and Gravity Forms
WP Rocket for Divi Theme and WordPress is my favourite combination because I know how important page speed is. That’s one of the reasons I use Kinsta hosting. It’s fast. However, when I first signed up they would not let me use my favourite combination.
Kinsta has its own cache tool which is a fantastic object cache. What it doesn’t do is optimise files for fast loading. Minification and other tools are not present in the cache tool.
Then in April of 2018, an announcement was made at Kinsta. We could install WP Rocket on our WordPress sites. I jumped right in.
Getting a fast loading page with Divi and WordPress is made significantly easier by using WP Rocket.
Doesn’t Divi Theme have a built in cache tool?
Yes, it does but I personally have never been able to get comparable results with the default Divi tools. It works OK but it is far from what I get from WP Rocket.
WP Rocket is a premium cache tool and my first choice for the cache.
This is not just because I’m using Kinsta as a hosting provider. They limit what I can and can’t use for my cache. It’s because WP Rocket is awesome.
Kinsta has a good cache tool already built-in. It’s really good at the object cache and has never been a problem. Kinsta cache is fantastic but what it is missing is what WP Rocket does very well. WP Rocket handles the minification of files, and the setup of DNS pre-fetch and defers processes for JavaScript.
Recently Kinsta and WP Rocket worked together to bring the magic of using these two amazing services together for my Divi powered WordPress sites.
It took me a while to configure the plugin so in this article I thought I would go over what I did and why I did it so you too can get some amazing results with your WP Rocket for Divi configuration.
The Installation of WP Rocket for Divi
To get started simply upload the plugin as you would any other. Once installed you active it and are taken to a configuration page.
Once you are on the dashboard all I turned on was the sharing of analytics. I only turn this on for my personal sites that I own and am a director for. If it is a client site I would suggest you get your client’s permission before sharing this data.
On the left side of the WP Rocket panel is a menu and I simply worked my way down this menu from top to bottom.
The Cache
In the cache area, I have a very simple interface, which I like.
I’m not sure if this is more simple because of the integration with Kinsta Cache so if you get something else, it may be because you aren’t on Kinsta.
The first question is about having a separate cache for mobile devices. This is for those users who have a mobile-specific theme. I don’t as I am using Divi which is responsive out of the box, so all I did was select that I want a mobile cache.
I then enable the cache for logged in users. We have a membership on this site so slowing down our logged inexperience is a bad idea. If you don’t have a membership site you don’t need to turn this on.
The Cache lifespan is set to 10 hours, I left mine as that default. I may increase it in the future but we do updates regularly on our site and that means most days someone from the team edits content or code. If you are doing the same it’s probably a good idea to stick to the default.
This is also a good idea if you are doing daily plugin updates.
On any item, you can go to the help section to get more information.
File Optimisation
In the basic settings, I turned everything on. I Minify my HTML, Combine my Google Fonts and remove query strings from resources. I would recommend to anyone that is using this to use the same settings.
When you minify your HTML to are basically reducing white space and not having all that space downloaded as file size. Yes, empty space in a file is not empty space.
Word of Warning for HTML Minification
If you use the tabs module or the latest blog posts tool do not turn on the minification of HTML. It will break your site.
You can turn off the minification on a per-page basis if you only have a few instances of these modules.
If you use them on a lot of pages, I would probably not enable this part to start with.
Combine Google Fonts
Combine of Google fonts is another handy option as quite often you downloading a google font takes multiple requests and can be one of the biggest issues to slow down your site.
In the CSS files area, I only select to minify the files. When using Kinsta hosting you have HTTP2. HTTP2 has all my files downloaded at the same time so combining files is actually slower than having them separate. It won’t help your page speed score but it will help your download speed.
I then turn on the option to optimise my CSS Delivery. At this point, my site was running pretty fast. I have minified 2 big reasons for a slow site after your images. That is the HTML size and the CSS file size.
The biggest problem for Divi however is all the javascript.
In the javascript section, things got a bit more tricky.
I turned everything on at first and my site broke. all my forms disappeared and my blog stopped working. That was a BIG problem.
What was the issue?
Basically, the defer flag on loading was the problem as that was the last setting I had used.
If you defer the loading of files you are loading JavaScript last and unfortunately, the Divi blog module tools are not able to work with that setting.
I added the Salvatore script to my ignore section and I was still stuck with no forms. You can learn more about this here – https://docs.wp-rocket.me/article/657-divi-theme
All my gravity forms had CSS that was hiding them. DOH.
That was annoying. After some digging around it came to my attention that any gravity form with conditional logic is hidden by default and JavaScript is used to show the form on page load. This is far from ideal.
Making my own plugin
No Matter what I did in Gravity Forms or WP Rocket I could not get it to work with conditional logic so I had to write my own little plugin.
You can find it here: https://github.com/DiviFramework/wp-rocket-static-exclude-defer-js
This makes the code for gravity forms and jQuery load normal and not be in the defer cycle.
This solved the problem and I was able to get the site loading very fast at this point. (under 1 second).
Most days my site loads in less than 1 second. That is fantastic.
Media Configuration
On this page, I turned on lazy loading for images only. I have a VR tool that often has issues with cache tools and since it uses an iframe/embed method I decided to leave this one unchecked.
I disabled the Emoji using this and removed some code from the child theme I added a year ago to do this – which is a nice saving.
Finally, I disable WordPress embeds – I don’t use them so it was OK for me to turn this off. Keep in mind that if you use an embed, you may want to either reconsider why or not turn this on.
If you are using them other than Divi I would also not turn this on. Gutenberg is great when it comes to embeds and I use this feature a lot.
Image Optimisation
I do want to point out here that I use WP Smush for my image optimisation. If you want image optimisation on your site you won’t get it from WP Rocket. You will need another tool. More than half of the page speed issues I help clients with is due to image optimisation so make sure you have that sorted to get the best results.
GT Metrix is an excellent tool for testing your pages. Make sure you use it as you make changes with a tool like WP Rocket.
Preload
The preload interface for WP Rocket is really very technical. I was very interested in what it can do and how it could work.
After looking over it, I realised it was not really going to help me that much but it did have DNS Prefetch. DNS Prefetch is a really important way to get your pages loading faster.
I added my Google Tag Manager domain, and Google Font Domains. You can see the items in the below GIST.
At this point, I was completed in my setup. I currently use WP Rocket for Divi and it’s giving us consistent load times under 1.4 seconds for the first-page load.
The Advanced rules section was not required and the Database and CDN tools were also not required. I use WP CLI for my database management and cleaning out duties. These are managed by Cron Jobs so these are simply not needed on my site.
We are thinking of reviewing the CDN in the future but we have other areas of concern on the site right now that are more important than a CDN.
Turn off the Divi Cache Tools
Make sure that you turn off your Divi Cache tools and minification.
I found this can really mess with your WP Rocket setup.
To do this go into your Divi Theme Options
Then turn off the Minify and Combine tools that Divi adds in by default. This is for both CSS and Javascript.
Once you have these two settings off make sure to clear your cache.
If you are running WooCommerce you may also be interested in reading: 7 ways to make your woo-commerce website faster
Why did I choose WP Rocket for Divi?
I have used a lot of the cache plugins. Our decision was based on 3 things,
- Server Support – your server has a lot to do with your page speed success so using WP Rocket for Divi on Kinsta was a good step forward.
- Our Plugins – I found Hummingbird to be excellent but it had no way of working with my VR Toolkit with its CDN cache. It also turned the cache on by itself and broke the page so that was removed.
- Plugin Support – I have used free options before but wanted a premium solution. w3 total cache and Auto Optimise were good but didnt really hit the spot for our requirements.
WP Rocket for Divi is a great combination. With this plugin, we also have a great way to support gravity forms so for me it’s a good solution that gives fantastic results.
What Cache plugins do you use for your WordPress site?
If you want help with other options for Divi Cache let me know in the comments. We have used a heap of them and I’m happy to comment or even share an article on other options.
I’ve used Hummingbird from WPMU Dev, Auto optimise and the w3 total cache with site ground.
WP Rocket is certainly my favourite.
