3 Easy Steps to Speed Up Landing Page


In traffic arbitrage, any minor detail can affect the overall outcome. For example, a slow landing page can cut off part of the traffic. This is particularly the case in countries where they have slow Internet connections. 

I’ve observed the very first landing page that I’d come across in the M1-shop.

It’s heavy, isn’t it? A 9.7-megabytes landing page is a big time. Let’s see what Chrome shows us.

Step 0. Measure the speed

To do this, you can use Chrome’s Network Inspector:

  • Go to the web page
  • Press Ctrl+Shift+I or Cmd+Alt+I
  • A network inspector window will pop open
  • Go to the Network tab
  • Select the “Disable cache” checkbox
  • Refresh the page

Of course, you only measure the speed of a hosted page. The landing page you have on your computer will load instantly

There will be the indicators at the bottom of the network inspector’s window:

We need these two (marked with arrows): the uploaded data volume and the rendering time.

Remember that we’ve started at 3.3 megabytes and 3.5 seconds.

Step 1. Compress the images

It’s easy but a must-do. There’s no rose without a thorn, and landing page images will weigh way less if you compress them with TinyPNG.

I’ve made the page 436 kilobytes lighter in a couple of clicks

Look for all the pictures located in the landing page folder. Compress them, download them and copy them back to the landing page folder, replacing the old versions.

The outcome, depending on the images, may range from several hundred kilobytes to a couple of megabytes less “weight”. This is the quickest possible, free, and easy way to speed up the loading time.

The result:

  • 3,3 MB ⇒ 2,9 MB
  • 3,5 sec ⇒ 3,3 sec

Step 2. Lazy pictures

A bit of theory

Commonly, the landing page contains a lot of images. The browser will spin until the screenful (styles, fonts, images, etc.) is uploaded.

Until then, page scrolling may be slow and the rendering may be delayed. Loosely speaking, a user may see a white or flickering screen for the first few seconds.

If there is a custom font in the layout, then the font loading task may come after the heavy images. Thus, in the first seconds, the visitor will see texts in the wrong font on the screen, which may look ugly and destroy the layout.

What’s a lazy load?

Lazy pictures load allows you to apply simple logic to the queue – it will occasionally load pictures that must be displayed at the certain moment. As soon as the page scroll approaches the picture, it sends a request to load it.

To enable such logic, you’ll have to do a little coding.

If you have the skills, you can check out the lazy load docs

How to enable lazy pictures?

  • Open the index.html file in any text editor
  • Enable the Search and Replace mode
  • Search for <img
  • Replace with <img loading= "lazy"

The results:

  • 3,3 MB ⇒ 1,6 MB
  • 3,5 sec ⇒ 1,6 sec

Step 3. CloudFlare

CloudFlare is a large service that hosts domains and improves the delivery of the webpages. This service deserves an individual article, and I’ll only mention its speeding-up features here.

In short, CloudFlare does the magic. You just need to link your domain to this service, and the efforts you’ve taken in the first two steps will be rewarded with x3 loading speed 

How does it work? Honestly, some of it I just don’t know and don’t want to lumber you with the details.

By the way, if I had not followed the first two steps, and would’ve just used CloudFlare, then the rendering time would be 1.7 seconds. Therefore, you might want to compress the images and enable the “lazy” loading.

The results:

  • 3 MB ⇒ 1.6 MB (+106%)
  • 5 s ⇒ 0.6 s (+483%)

P.S.

It’s okay if you’re too lazy to do it all by yourself. Just forward this guide to a freelancer

Without a doubt, this will not make you several times richer. But it may earn you 5-10% more money. And I’d be happy to know that you’ve succeeded


Like it? Share with your friends!

0 Comments

X