How To Improve Click Funnels Page Speed For Better Conversions

How To Improve Click Funnels Page Speed For Better Conversions

Whether it’s a competitor or disgruntled user. I see a lot of people complain about ClickFunnels page speed.

Why?

The faster the speed of your site, the happier your visitors will be. Faster page load time leads to improvements in customer experience, conversion rates, and ultimately, your sales revenue.

It’s also a Google ranking factor.

There are some features that ClickFunnels could implement to allow us to optimize page speed. Unfortunately, these are beyond our control for now.

But if your funnel is slow, I can guarantee you there are things that are in your control. Things that can drastically speed up your funnel load times.

A prime example, this share funnel was taking over 10 seconds to load. It’s no wonder because of the huge page size and server requests. A whopping 32.5mb and 155 respectively.

After a little optimization, the funnel now loads as quick as 3.1 seconds. With some further optimization, I could possibly get this to sub 3 seconds without sacrificing too much of the design. But right now the funnel loads pretty quickly.

For comparison sake, the equivalent landing page built with a WordPress page builder loads in 1.8 seconds. With further optimization I can get this sub 1 second. This is because I have options in WordPress that are not available in ClickFunnels.

Still it goes to show ClickFunnels pages can be quick.

If you want to speed up your funnel, here’s a quick summary of what I did to improve the page load time. These tips apply whether you use ClickFunnels or WordPress etc.

Image Optimization

The single biggest impact will be images. Images slow down pages. Big images kill speed especially more of them.

Ideally, the less images the better but visuals are essential for design and sometimes lots are needed. This particular funnel has over 40 images. Some were over 4mb each and most were too large for their placeholder.

When optimizing images for a site follow these tips.

  • Keep the image file size as small as possible without sacrificing quality.
  • Under 250KB where possible for large images.
  • Under 100KB for smaller images.
  • If using JPEG image format you can step down the quality by as much as 50% for some images which will keep the file size down.
  • Resize the height and width of images for its purpose. For example, don’t put a 4000 x 4000 pixel image in one column of a 2 column row.

I like using Photoshop and Illustrator to edit images but there are free ones like paint.net and imagecompressor.com (which I came across recently) that do the trick.

Avoid Cloning Sections, Rows and Elements

Where possible avoid cloning sections, rows and elements for desktop and mobile. Cloning duplicates assets such as images which have to be loaded from the server. By cloning a section with 1 headline, 4 images , a paragraph and CTA, you now have 2 headlines, 8 images, two paragraphs and two CTA’s behind the scenes.

Instead edit one version for both views where you can.

Optimize The layout

I tweaked the layout just a little by removing some unnecessary elements like text and images. Again try doing this without effecting the overall design.

Code Minification

As I mentioned earlier I have some optimizations options with WordPress that I don’t have with ClickFunnels. One such optimization is CSS and Javascript minification.

CSS is used to style web pages. Take a look at the CSS code below. This is the way developers write code, line by line, nice and neat.

elButton { 
transition: all .3s; 
}
.elButton:hover { 
transform: scale(1.05); 
}
.elButton { 
border-radius: 50px !important; 
}
/* ALL buttons gradient*/
.elButton{
background: #0000EF;
background: -moz-linear-gradient(-45deg, #0000EFF 0%, #0000EF 45%, #963AFF 100%);
background: -webkit-linear-gradient(-45deg, #0000EF 0%, #0000EF 45%, #963AFF 100%);
background: linear-gradient(135deg, #0000EF 0%, #0000EF 45%, #963AFF 100%);
}
/* Background Graients*/   
  #container-10516 {
background: #0000EF;background: -moz-linear-gradient(-45deg, #0000EFF 0%, #0000EF 45%, #963AFF 100%);
background: -webkit-linear-gradient(-45deg, #0000EF 0%, #0000EF 45%, #963AFF 100%);
background: linear-gradient(135deg, #0000EF 0%, #0000EF 45%, #963AFF 100%);
}

The more CSS and Javascript needed the more lines of code that have to be loaded when somebody visitors your funnel.

Minification is an optimization trick to condense the code so it loads faster.

ClickFunnels doesn’t give you the option to minify the page source code. So I have to forget abou the Javascript and CSS. However, because I needed my own CSS to style the CTA buttons and some sections. I can do some minification manually.

Thankfully, there’s not a whole lot of CSS in this funnel, so there’s not much (manual) minification to do but every little helps.

Here’s what it looks like minified.

elButton {transition: all .3s;}.elButton:hover {transform: scale(1.05);}.elButton {border-radius: 50px !important;} /* ALL buttons gradient*/.elButton{background: #0000EF;background: -moz-linear-gradient(-45deg, #0000EFF 0%, #0000EF 45%, #963AFF 100%);background: -webkit-linear-gradient(-45deg, #0000EF 0%, #0000EF 45%, #963AFF 100%);background: linear-gradient(135deg, #0000EF 0%, #0000EF 45%, #963AFF 100%);}/* Background Graients*/ #container-10516 {background:
#0000EF;background: -moz-linear-gradient(-45deg, #0000EFF 0%, #0000EF 45%, #963AFF 100%);
background: -webkit-linear-gradient(-45deg, #0000EF 0%, #0000EF 45%, #963AFF 100%); background: linear-gradient(135deg, #0000EF 0%, #0000EF 45%, #963AFF 100%);}

One could argue that I have only added to the problem by writing my own CSS and I could just leave it out. But if I did that then the funnel wouldn’t look as good. For me a well designed site speaks to professionalism and build some trust.

Wrapping Up

As you can see I did as much optimization as ClickFunnels allows and it made a huge difference. In reality what I did is simply good practice.

  • Increased page speed by 7 seconds.
  • Reduced page size by 30.66MB
  • Reduced the server reqeuests by 54%

One thing to remember is that the load times are not set in stone and may vary. There’s not much that can be done here because you are at the mercy of a hosted platform.

How To Improve Click Funnels Page Speed For Better Conversions

by Wes James time to read: 5 min
0

HOLD YOUR HORSES!

Get This EXCLUSIVE BONUS You Can't Get Anywhere Else.
Hurry Before It's Gone.

  • Private Coaching
  • Free Training
  • Free Templates
  • + More