Page Speed Optimization in Kajabi

Slow page speed.

What’s page speed?

It’s how quickly the content on your page loads.

Why is it important?

Google says 53% of mobile users leave a site that takes longer than 3 seconds to load.

That's a big potential impact on your business.

In sporting terms, I think of good sales copy, funnel strategy and so on as your offense – that’s what scores the points and gets all the glory.

But page speed is your defense.

It’s not sexy, it doesn’t help you score and win the game … but bad defense reduces the number of wins on your sales scoreboard. Ouch.

A slow page leads to:

• Lower conversions,
• A poor user experience, and
• Lower ranking in Google’s search results.

Let’s start at the beginning …

1. Measure Your Page Speed
2. Fix the 80/20 Issues
3. JPEG’s are Usually Better than PNG’s
4. Re-Size Your Images to the Correct Display Size
5. Compress Images to the Optimal File Size
6. Create Separate Desktop and Mobile Pages
7. Lazy Load Off-Screen Images
8. Make Your Code Streamlined – Bonus Tip
9. The Holy Grail of Caching
10. Final Thoughts

Measure Your Page Speed

There are plenty of free online tools for measuring the speed of your page.

My favorites are PageSpeed Insights (PSI) by Google, and GTmetrix.

Google owns the search rankings and says that page speed is part of their ranking algorithm. So when they offer a free tool to help speed up your page (nudge nudge, wink wink), I figure you’d be silly not to use it.

The GTmetrix site actually uses an old version of PSI, but they also provide plenty of detailed information to help you out as well. That’s gold.

Fix the 80/20 Issues

Run a speed test on either PSI or GTmetrix and they will prioritize their ‘recommendations’ in order of importance.

We’re not aiming to fix everything (that’s the wrong side of the 80/20 equation) just the most urgent.

There are 3 broad types of issues:

1. Issues that only Kajabi can fix – don’t worry, they’re on the case
2. Issues your developer can fix – but honestly, the payoff isn’t worth it
3. Issues YOU can and should fix.

I’m not a developer and you (probably) aren’t either, so I’m only going to talk about the highest value issues that I understand … and how to fix them.

By far, the greatest positive impact you can have on your Kajabi page speed is by using images correctly.

No, the #1 mistake with images is NOT compression, but more on that in a moment.

Let’s cover the basics first …

JPEG’s are Usually Better than PNG’s

Like everything in life, it’s all about balance.

The PNG image file type can have a transparent background and can have better visual quality, especially if it’s an image of text.

However, to make your page faster, the name of the game is to have the smallest possible file size – and PNG images usually have a larger file size than JPEG’s.

So it’s a balance – I typically use JPEG’s unless I need a transparent background or it’s an image of text, like a testimonial.

Handy Tip: Mockup images often need transparent backgrounds. But if you put your mockup image on a Kajabi page section with a white background, your image won’t need to be transparent – a JPEG with a white background will do the job.

Handy Tip: GIF’s can have a huge file size. If you really want animation, try using a short video on loop instead.

Note: PSI will encourage you to ‘Serve images in next-gen formats’, because that’s part of Google’s goals for a faster internet. However, those new formats don’t work on all browser types yet and aren’t currently accepted by Kajabi either.

OK, now for the #1 mistake with images.

I’ve speed-tested a lot of Kajabi pages, and this is something almost nobody does correctly.

You need to …

Re-Size Your Images to the Correct Display Size

First, let’s be clear what we’re talking about.

An image has intrinsic dimensions (for example 1920 pixels x 1080 pixels) and file size (for example 1MB).

Dimensions and file size are like a person’s height and weight.

We know that a tall person generally weighs more than a short person.

And the same goes for images – an image with large dimensions will typically have a bigger file size (weigh more) than an image with small dimensions.

The display size is the dimensions an image is actually displayed on a webpage, and it could be quite different to the image’s intrinsic dimensions.

Here’s an example to show why this is so important …

Let’s say you have a professional photo shoot done and you get a beautiful high resolution image that you use as a full screen image on your home page. The image is 2560 x 1440 and is 2MB. That’s a big image.

My desktop computer has screen resolution of 1920 x 1080. So when I view your homepage, my computer downloads the 2MB file and displays it as a 1920 x 1080 image (the display size).

If I view your homepage on my phone, it again downloads the 2MB image file but this time displays it as a 320 x 180 image.

In both cases your image was larger – in dimensions and file size – than it needed to be, and you made my computer and (more importantly) my phone work super hard to show it to me.

The harder you make my device work to show your page, the slower your page is to load.

What would have been better?

Using a 1920 x 1080 image for the desktop version of your homepage, and a 320 x 180 image for the mobile version.

The image would look the same on my desktop or phone, but the file size would have been smaller … meaning your page would load faster.

How do you know the correct display size for your image?

The easiest method is letting GTmetrix tell you. 

Sign up for a free GTmetrix account and you can analyze the speed of your page on both desktop and mobile devices.

You can also ‘Inspect’ an image on any page using the Chrome DevTool and confirm the display vs intrinsic dimensions.

To scale your original image down to the correct display size, use your favorite photo editing tool.

Personally I use GIMP (it’s like a poor man’s version of PhotoShop) and Google’s Squoosh web-based app, which is one of the simplest tools I’ve seen.

Re-sizing your images to the correct display size is simple, right?

But this one step will have a big impact on your page speed, especially if your page has a lot of images.

Handy Tip: Treat Kajabi’s ‘Suggested Dimensions’ … carefully

Note: As I write this, Kajabi is yet to roll out their new ‘Pages’ builder to the website theme. That means you won’t be able to easily create separate images for desktop & mobile in your blog posts.

Alright, once you’ve got your images scaled down to the correct display size dimensions, it’s time to put them on a forced diet …

Compress Images to the Optimal File Size

Image compression can get pretty geeky, but I won’t go there.

Let’s just say that compression makes your image file size smaller by removing data from it.

The goal is to make the file size as small as possible without losing too much image quality.

Again, there are a million free image compression tools (Google your heart out), but I usually use two.

Squoosh has a nice visual ‘slider’ so you can compare the before/after image.

And after testing most of those million free tools, I’ve found that Kraken consistently gets the best compression results.

Handy tip: When GTmetrix gives the recommendation to 'Optimize images' it also provides an optimized version for you to download and use. This is quick and easy to use, although I've found that Kraken reduces the size even more.

Handy tip: Don't forget to optimize the images on your checkout page - and avoid people leaving right before they purchase.

Note: If you hear anyone talk about what ‘DPI’ or 'PPI' you should use in your images, ignore them. That’s simply an instruction for how large an image will print, so it’s irrelevant to online image use. You can test it yourself by saving the same image with 72dpi and 300dpi – it won’t change the file size or image dimensions. Google ‘DPI myth’ to get a full explanation from people much smarter than me.

Now we’ve talked about a couple of specific tactics, I want to discuss overall design strategy for a moment.

Create Separate Desktop and Mobile Sections

When you relate page speed to page design, keep in mind some key differences between desktops and phones.

• A desktop screen is landscape and a phone is portrait
• A desktop screen is much larger than a phone screen
• Phones don’t have as much computing grunt as a desktop

I’m still figuring out the best approach here myself, but here are some things to keep in mind …

Think twice about using background images on the mobile version of your page.

They have to be larger images (not good for speed) …

… it’s difficult to know what dimensions and ratio are optimal (landscape or portrait?) …

… and on a phone screen they probably won’t be visible behind other content anyway.

Phone screens usually have a width of around 300-400 pixels, so if an image on your desktop page is greater than 500 pixels wide, consider creating a separate mobile version.

Handy tip: Instead of using the 'Logo List' section, join your logos into a single image. Your page will be faster with a single rather than multiple images, and it won't take up as much real estate on a mobile screen.

More than 60% of online use is on mobile, so even if you don’t design your mobile page before your desktop page – at least give it plenty of love.

Think about the balance between design and speed.

The most beautiful page is probably slow and the fastest page is probably ‘aesthetically sub-optimal’, so choose your point in between.

OK, now let’s talk about my final ‘secret’ tactic related to images.

Lazy Load Off-Screen Images

The content of a page that’s immediately visible on the screen is ‘above the fold’, and everything off-screen is ‘below the fold’.

From the user’s perspective, a page has loaded when they can see everything on the initial screen (above the fold).

However, a typical page renders everything on the entire page – above and below the fold – before that initial content is shown.

So if you have one image on-screen and 50 images off-screen, they all have to be rendered before the user sees just the initial image.

Naturally, it would be much better to tell the computer or device “Load the on-screen image first, and then load the off-screen images after that”.

This is called ‘deferring’ or ‘lazy loading’ images, and it requires some custom coding in Kajabi.

Like I said, I’m not a developer but with some trawling around the internet and a lot of trial-and-error, I figured out how to do it …

Note: This process does not lazy load background images or Wistia video thumbnail images (we don't have access to Wistia's code)

And here’s how to use it on blog pages ...

Download the files mentioned in the video.

Make Your Code Streamlined – Bonus Tip

If you have access to the Kajabi code editor, this is a really simple tip for complete non-coders.

Occasionally GTmetrix will give you a recommendation to ‘Minify JavaScript’ or ‘Minify CSS’.

What’s that mean?

When a developer is writing code, they organize it neatly down the page with lots of spaces, new lines and comments explaining what they’ve done.

But when a computer reads that code, it doesn’t need all the spaces, new lines and comments. In fact, they slow it down.

So ‘minifying’ code is a way of compacting the code and getting rid of all the spaces, comments and things the computer doesn’t need.

And the cool part?

GTmetrix gives you the minified code. All you need to do is copy it, find the right liquid file in the Kajabi code editor and paste it in.

The new code should be functionally exactly the same, but always test your page for errors after doing this. If an error message does pop up, simply revert to the previous version in the code editor.

The Holy Grail of Caching

Remember back at the start when I said there’s a category of page speed issues that only Kajabi can fix?

Caching is (mostly) in that category.

But it’s important, so I need to mention it.

Firstly, what is caching?

It consists of pieces of dynamic data that generate the page. Caching saves the results so the next time a user comes to that specific page, they will get the saved version and not need to generate the entire page again.

There are different types of caching and I raise my hand as a proud non-developer and say I don’t understand them all. However ...

If you use CloudFlare for your SSL, you can also use them to create some extra caching page rules. It will cost you a little more and I’d suggest treading carefully – however, it might be beneficial for pages on your site that remain largely unchanged but are still important.

 Kajabi’s Lightning Loader (still in beta testing as I write this) is designed to address ‘application caching’. From my own testing and from email discussions with the Lightning Loader product team, the expected benefits from this tool will be insignificant compared to all the other improvements (all the image stuff) you can make yourself.

But, the main type of caching I want to mention is ‘browser caching’.

When you run a GTmetrix test on your site, you’ll get an ‘F’ for an error type called ‘Leverage browser caching’.

When you run a PSI test on your site, you’ll get a recommendation to ‘Serve static assets with an efficient cache policy’ – which refers to the same thing.

I won't try speaking tech-geek, but here's the bottom line - this is something that Kajabi have to do on their server.

So I need your help.

Please go to this proposal in the Feedback portal and give it an upvote to let Kajabi know it’s important. Thanks 😎

Final Thoughts

Here are some extra (but random) points:

• Whenever you do any custom coding (lazy loading or minifying code), it will be overridden if/when you update the related Kajabi theme - and you'll have to go through and customize the code again. Personally, it’s a simple and quick job to re-do it, but I want you to be aware.
• There’s a recommendation in GTmetrix called ‘Defer parsing of JavaScript’. When you look at the details it will list all the 3^rd party tools you have integrated with your site, like Hotjar, ESPs and so on. I don’t know (yet) how to fix that error, but it is a good reminder to remove 3^rd party tools you’re not using or only use them on essential pages. Otherwise, they slow down your pages unnecessarily.
• Making these page speed improvements takes time and effort, so be strategic about which pages you focus on. It all comes back to the 80/20. I’d suggest working on landing pages getting paid traffic, your most important sales pages, and any blog posts that might get a boost in the Google rankings from the extra page speed. My main blog post moved from the bottom of Google’s page 1 to the top of it soon after making these speed updates, so I’d like to think they were instrumental.

And that’s all I’ve got!

Please upvote that caching proposal in the Feedback portal, and hit me up in the Kajabi Facebook group if you have any questions or feedback about this article.

-----------------------------------------------