I once heard a preacher say “There’s no such thing as a bad short message.”

Same (kind of) with landing pages. A fast loading landing page that looks great and has great copy is better than a landing page that takes 4+ seconds to load but has a lot of fancy animations and interactive elements.

There’s no such thing as a bad fast-loading page. Sort of, you get the point.

Before we move on, this topic applies to any page on the web but for this blog, we’re focusing on landing pages.

MYTH: Fast loading page means they generic and visually boring. They aren’t interactive and are ineffective.

That is totally wrong. In fact, we have a few sample landing pages for you to download. They load in under 1 second and destroys the above myth. It does not lack anything. If at all, it is the unnecessary that got trimmed. It is more focused.

As Blaise Pascal said

“Je n’ai fait celle-ci plus longue que parce que je n’ai pas eu le loisir de la faire plus courte.”

In other words, English words, it translates to “If I had more time I would have written less.”

Less, short, fast, is difficult. It forces you to think about the essentials.

The problem

Most landing pages are built using frameworks like Bootstrap or Foundation. Then there’s other scripts that do fancy things and there’s icon scripts that load thousands of icons. Without evaluating if these are necessary, they end up as defaults. However, they bring huge payloads.

It’s like wanting to build a bicycle so we buy a kit that helps you build anything, from a unicycle to a Harley. The caveat, no part can go unused. When the bicycle is built, all the unused parts (the ones for the motorcycle) will be tagged onto your bicycle. So yes, we’d find it easy to build a bicycle, but it comes with extra cost and extra weight.

Why not buy the parts needed just for the bicycle?

I’m reminded of this excellent scene from the movie The Mission. Rodrigo is lugging this bag uphill. Consider your landing page to be Rodrigo and the bag all the unused bits from your framework.

Neil Patel published a couple of stats on loading speed, here’s just three.

• 47% expect a webpage to load under 2 seconds
• 40% abandon a page if it takes longer than 3 seconds to load
• 1 second delay can result in a 7% reduction in conversions

Over the years I’ve built 100s of landing pages for enterprises. To be honest, those pages did not quite load in a second, or even 2. It took a lot of discipline, a lot of saying “no”, a lot of data to get buy-in.

Landing pages are autonomous single pages (the bicycle), for the most part. But they use assets that were created for a group of pages; like a website (the 1000CC motorcycle). Pagespeed is affected by a host of factors. The weight and the number of assets loaded are two big factors.

Here’s a few assets a typical landing page would load.

• jQuery
• Bootstrap, Foundation or a similar framework
• Web fonts
• Analytics tracking code
• Social media tracking pixels
• CRM tracking code
• User insights like HotJar, CrazyEgg or Optimizely
• Custom scripts
• Custom CSS
• Fontawesome
• Images, videos, and other assets

Landing pages can have upwards of 16 assets in some cases. Each bringing with them an additional HTTP request and their weight.

Building a page is like working out a budget. You have finite money. You work out the “must be paid” things like rent, utilities, and food. As you pay the bills, your finite resource dwindles and eventually runs out. Once it’s out, you just can’t spend any more.

That Home Pod you wanted? Well, not this month. It is fancy, but not essential. You can thrive without it.

Well.., you could have it. You swipe a credit card and get into debt.

Likewise, we have a limited time budget to load a page. What are the “must haves”? The equivalent of rent, utilities, and food to sustain? When we hit that 2 second mark, we just can’t add any more. We’ve hit our budget.

That fancy jQuery plugin that animates numbers you want? It’s fancy, but your page will thrive without it.

Well.., we could use it. We swipe our “time credit card” & go into a “time debt” with our users.

From the stats above, 40% don’t put up with that.

In keeping with the time and money metaphor, your company has a CFO who is responsible for the finances. Likewise, your landing page needs a CTO. A Chief Time Officer. Both roles operate within a budget.

That’s so cheesy, you should tweet it.

Now, getting all the sparkles and goodies on a page while keeping it under 2 seconds is doable. Clever coding and great infrastructure can help. In reality, this is not the case for most.

What Can You Do?

Question everything. There are no more “defaults”. Give yourself time to write less.

Most enterprises import their framework from their website onto a landing page so branding and grids and everything else need not be recreated. That is backwards thinking and a little selfish. It isn’t user or even conversion centric thinking. Do the landing pages need everything the main website has? The answer is probably not in a majority of cases.

Plan ahead. Think of a mini framework, a subset of the main website, or a custom one. A core grid that’s flexible, to support all your landing pages. Start with only the essential scripts. Even jQuery *might not* be required! Yet it has become a default.

Build your basic landing page, the stripped down version. Check the time. Loads under 1 second? Great. Now you have a surplus of time in your budget. You can walk into the Mall of Fancy Scripts with spare time in your pocket and spend it on anything you wish.

Without getting into debt.

Story time, a la Thomas Sanders
There was a time when I switched to cash-only system. I found it difficult to part with cash in my pocket for things I normally would have just swiped my card and moved on. With that spare time in your pocket, you might find it difficult to part with it. You’d rather save it. Good choice. If you could smell the freshly minted, crisp seconds. Mmmm…

Frameworks
Landing pages use about 20% of what Bootstrap offers. If Bootstrap is the choice, then customize it. Remove all the unnecessary modules. CSS Grid is a great option to consider. It is much more flexible. Alternatively, if prebuilt grids are your thing, Reflex Grid is a good choice. It could offer you a scalable solution.

jQuery
Most landing pages, especially the CRM, would probably require this. But question it. If it isn’t needed, then you saved an HTTP request. Sure it might be cached already. But “being cached already” is not good enough. Question it.

Web Fonts
This can slow the page down a fair amount. Especially if there are multiple variations of the font. Choose maybe just one variation. Admittedly, this site has about one or two extra web fonts that it could do without. We’re always scrutinising every asset.

Font Awesome
Honestly, this is such a gift to developers and designers. However if all you need is one phone icon then Font Awesome is overkill. Even if you use only 5 icons, it is yet overkill. Consider image sprites or custom SVGs. The “all” package from Font Awesome is about 2.9MB!

Social Sharing
If you use services such as AddThis, question it. Is it necessary for your landing page. They come with huge payloads. It’s only a single page, with one link to share. This could easily be done in 1 minute with some custom code.

Designers and Developers
If you are a developer or designer, start your landing page from scratch. Strip down frameworks and dependencies. Use only what’s necessary. Work within your budget.

Marketing – talk with your designers and developers
If you are a marketing manager, talk with you design and development team. Share some of what you learned in this blog, or have your team read it. Benchmark your landing page’s performance and keep track of conversions.

Test your landing page using GT Metrix.

If you have any questions, leave a comment or contact me, I’d love to help.

Be still my beating heart. You read the entire blog!

Since you’ve made it this far, I can’t let you go away empty-handed. Get three landing pages that load well under a second, giving you enough room to add your marketing tags and custom scripts. Download them and check them out!

Here’s another free landing page that is Pardot ready but can be used anywhere else with some minor tweaks. Loads in 0.7 seconds.