Select Page

Configure WP Rocket for Divi and Gravity Forms

I know how important page speed is. When I could use WP Rocket for Divi with my Kinsta hosting I jumped right in.

Getting a fast loading page with Divi and WordPress is made significantly easier by using WP Rocket.

WP Rocket is a premium cache tool and is one of my only choices for cache.

This is due to me using Kinsta as a host provider. They limit what I can and cant use for my cache.

Kinsta have a good cache tool already built in so that 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 defer 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 site.

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 start simply upload the plugin as you would any other. Once installed you active it and are taken to a configuration page.

The WP Rocket Dashboard

Once you are on the dash board all I turned on was the sharing of analytics. I only turn this on for my personal sites that I own and am director for. If it is a client site I would suggest you get your clients 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.

WP Rocket Cache Settings

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 around 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 in experience 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 its 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.

WP Rocket File Optimsation for Divi

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.

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 download at the same time so combining files is actually slower than having them separate. It wont 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 an 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 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 the show the form.

Making my own plugin

No Matter what I did in Gravity Forms or WP Rocket I could not get it to work 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 as 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 that 1 second. That is fantastic.

Suggested reading: When to use Gravity forms on your Divi Website

Media Configuration

In 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.

WP Rocket for Divi Media Settings

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.

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 wont 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.

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.

WP Rocket for Divi Preload Setup

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 its 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.

you may also be interested in 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,

  1. 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.
  2. 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.
  3. 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 its a good solution that gives fantastic results.

WP Rocket - WordPress Caching Plugin

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 Im 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.

How to Style Gravity Forms with Divi

In this quick tutorial, we will show you how to style Gravity Forms with Divi using the Gravity Forms Styler plugin. We will show you how to use the default settings,  and then how to add your unique styles using the Theme Customiser settings.

How to use the Gravity Forms Styler plugin video

Step 1 – Insert a Gravity Form on your page

First of all, you need to insert a Gravity Form into a page on your website. You will notice that at this point It will have the normal default square styling applied to it. And that looks kind of ugly. We are going to change that to make it look a whole lot more professional.

Step 2 – Install the Gravity Form Styler Plugin

Now you need to install and activate the Gravity Form Styler plugin. (Please note you must be a Premium Member to have access to this plugin with your Divi Framework Membership.)

Go to Divi Framework on your WordPress Dashboard and download the Gravity Forms Divi Plugin.

How to style Gravity Forms with Divi -Download Gravity Forms Styler Plugin from your membership

Next, go to Plugins to install the Gravity Form Styler and click ‘Activate’. Activating the plugin will immediately apply the new default styles to all your forms.

How to style Gravity Forms with Divi

Important Tip: Clear your server cache and your browser cache. This will ensure that the new styles load.

Now you can go back to your page with the form and click refresh. You will see that a load of new styles have been added. The form now looks a whole lot better and much more ‘Divi-like’. Just like the example below from the Divi Framework website.

How to style Gravity Forms with Divi - Gravity Form with default styles applied

All of the form fields and the button now look fantastic, and this is just with the standard setup.

If you’re happy with how the form looks at this point you could leave it at that. Or you can go ahead and further customise the form styles using the Theme Customiser.

Step 3 – Customise your Gravity Form styles with the Theme Customiser

To do that, leave the page you’re on and go into your Theme Customiser (find it on your WordPress Dashboard by going to Divi > Theme Customiser). Once you are inside the Theme Customiser, find and click on Ultimate Gravity Forms Style. Here you can do all sorts of different things.

How to style Gravity Forms with Divi - Theme Customiser Settings

Here you will find the following settings, and remember, these are for every single form on your site:

General – allows you to set a background colour or change the padding.

Title – control the font, size, style, colour and spacing. These are the standard stying features.

Description – this is control over the description text if you choose to turn that feature on inside your form.

Labels – these are the labels over each of your items. Again using the standard styling features in Divi.

Input – control the font, colour, style, line height etc.

Form Button – set your button style, including background colour, hover colour, font, icon, orientation, size, borders etc. All the standard Divi features.

Progress Bar – set the background colour and font colour.

Form Border – if you want a form border, you can set the border style, size and colour.

Error – allows you to customise the error message when it is displayed.

Create beautiful forms with the Gravity Forms Styler Divi plugin - Theme Customiser Settings

Step 4 – Publish and you’re all done!

When you are finished you can click Publish and you’re ready to go!

This means that now whenever you insert a Gravity Form on your website, all of your forms will have the same styles applied. It’s a great result that takes very little time! Now you will be able to focus on building your forms, instead of spending time on styling every time you add a new form. Now that’s a great time saver.

That’s a quick introduction to the Gravity Forms Divi Plugin from Divi Framework. It’s a premium product so we encourage you to become a Premium Member. We hope you find the plugin useful and that it allows you to start making some beautiful looking Gravity Forms!

We also have a Divi Module for Gravity Forms, which gives you even more style control over specific forms. You can find more information on that on our product page.

Google Event Tracking in Gravity Forms – Video Tutorial

Google Analytics is the most popular and most used analytics system that you will find on the web.

It without a doubt has an unbeatable price – free.

However, integrating your forms and events with this tool can be a challenge. Gravity forms have you covered, or maybe I should say the WordPress community has your covered.

In this video I show you a free plugin, Gravity Forms Google Analytics Event Tracking. This plugin makes it so easy to integrate Google Analytics to Gravity Forms that it’s a very fast process. The whole tutorial is only 2 minutes.

So if you want to put real value tracking on your website, this is for you. Add event tracking and see what your Gravity Forms are doing for your website and store it in the Google Analytics platform.

Enjoy.

If you are looking for some great tools for your Gravity Forms with Divi be sure to checkout out Gravity Form Styler and Divi Module plugins. They save us heaps of time, and I’m sure they will save you heaps of time too.

Conditional Login in Gravity Forms – Video Tutorial

When we make forms, especially large ones, you may want to show or hide content based on previous answers.

You can accomplish this with code and lots of effort or you can use gravity forms to make it happen without much effort at all. You just have to know how to.

In this video, we show you how to use conditional logic to get these great results with your Gravity Forms.

You can download the example for we used here.

Hope you like it, keep an eye out for other great gravity form resources from Divi Framework.

Using Zapier with Gravity Forms – Video Tutorial

Part 3 of our tutorial series

Using Zapier and Gravity Forms is a really powerful tool. It makes Gravity forms become a super power in the world of web.

Make the most of it and enjoy the tutorial.

Why Did you give us a form download on this one?

Its because we used the existing form and just added on the Zapier elements.

If I shared that you would get stuck sending things to my hook.

Remember – you need a Gravity Form Developer license to use the Zapier add on for gravity forms.

Do you need help styling your Gravity Forms for Divi powered websites?

You may want to take a look at our ultimate Gravity Forms Styler for Divi.

Have an awesome week. Like or subscribe to the youtube channel.

URL parameters with Gravity Forms – video tutorial and download

Did you know you can send parameters to a gravity form and pre populate it?

In this video I show you exactly how this is done.

Want to download the form so you can upload it and follow along?

No problems – download the form here. You will need a gravity form license to make use of this form and you will also need to know how to upload a form.

I personally use this technique for support form payments and initial consult forms. Its really good an doing this sort of thing because you can populate reference numbers, names and address details as well as prices and payment data all in the URL.

It makes it very easy for your end users and overall has made it much easier for me to get paid.

Take a look at the tutorial and keep an eye out for the next one in the series.

Divi Framework - build anything with Divi to create your online business.

30 day money back guarantee

Safe & Secure online payment

Support team & documentation