Optimize Landing Page Speed for Reduced Traffic Loss

View the table of contents

Content

Who it is for

1. webmasters
2. affiliates
3. begginers

Material prepared by YellowWeb

Everyone knows that page load speed directly affects conversion rates. According to a 2019 Unbounce study, nearly 70% of users admitted that page speed impacts their willingness to make online purchases. Here are a few more statistics from research: the highest conversion rates are achieved on pages with load times from 0 to 2 seconds, and for each additional second, conversion decreases on average by 4,42%.

Therefore, slow landing page loading isn't just an annoyance for users. It affects your sales and, consequently, your revenue. But before delving into solving this problem, it's essential to understand that it's complex, consisting of many components. In this article, we will examine them all and provide detailed guidance on what to do to make your landing page load much faster.

Hosting

The first thing you should consider is the question of the physical distance of your server from the country you are targeting for advertising. It's straightforward: the farther the server, the worse the speed.

You can check it as follows: first, measure the loading speed of your landing page using a proxy from a data center's country. For example, if your server is in Germany, take a good DE proxy and access the landing page under it, measuring the loading speed with a stopwatch. Then, take a good proxy for your target geo (for example, the Philippines) and access our landing page under it and measure the time again. Next, compare the difference and assess how critical it is.

If you are targeting a specific macro-geo (e.g., Europe-Asia-LatAm-Africa, etc.), it's better to have a server in a country with good connectivity to your target region. Where can you find this information? Check the map of internet backbone cables on Google Images and select accordingly.

Personally, for me it turned out like this:

For Europe: DE, UK
For Asia and Australia: SG
For the USA and Canada: any part of the US
For LatAm: the southern US or BR
For MENA and Africa: SA, TR

But what should you do if you're working with not just one but several macro-geos and don't want to buy a bunch of servers? In such a case, I would recommend hosting in the southern United States. From there, you generally have acceptable connectivity to any part of the world. For example, I use servers in Miami from the company FriendHosting.

You can also check the availability and loading speed of your landing pages from different regions using Pingdom, a service with a reasonably small available set of geos, and a similar service called Gift Of Speed.

Version of the HTTP protocol

The internet operates on the HTTP protocol, and over the last decade, the protocol version has evolved from 1.0 to 3.0. It’d be highly beneficial for your landing page to load using the latest version of the protocol.

Here's how to check it: open Google Chrome, go to Developer Tools (on Windows, press F12), and navigate to the Network tab. Then, load your website and examine the data, as shown in the screenshot below.

If you see http/1.1 everywhere, you’ll need to communicate with your hosting provider's support team and inquire whether it's possible to enable a higher protocol version. If you are in the process of selecting a hosting provider, make sure to clarify this question in advance!

Site builders

If your funnel includes intermediate sites hosting white pages, and black pages are displayed by inserting JS integration to this white from, for example, Keitaro, or if you simply use a white button like “Which country are you from?” or “Are you over 18?”, then you have an additional headache.

Now you need to understand not only the speed from the user's geo to the server’s geo with the tracker but also the speed from the user to the site-builder’s geo.

The rule here is simple: the more different servers are used in the combination, the slower everything will work in the end. On site builders, these losses can reach 50-75%. I’ve seen such numbers firsthand with the Thailand + American site builder combo.

So, if you see that the losses are significant, either choose some local site builders or don't use them at all and create a proper white page on your own domain.

Redirects

Axiom: with each redirect you’ll lose a portion of your traffic. You can consider that with each redirect, you lose 5-10% of users.

Redirects are often a relevant issue when you are sending traffic to something like a smart link, a CPA link, or offers with on-site payments. Affiliate networks often provide not the final URL but one wrapped in redirects to track statistics and so on. However, if one affiliate network resells another, and they, in turn, send traffic to the final advertiser... then the number of redirects can start to exceed acceptable limits.

To track redirects in your funnel, use excellent extensions like Link Redirect Trace or Redirect Path. The first one is also available for Firefox if needed.

CloudFlare

CloudFlare can cache all your JS scripts, CSS styles, and images and serve them to users. It has a multitude of servers scattered worldwide, so it's very likely that one of them will be close enough to the user. As a result, resources will load quickly, and the load on your own server will be reduced.

To see firsthand that caching is working, you can route your domain through CloudFlare and then visit it. Check the Network tab in Developer Tools for the following:

If you see the word HIT in the cf-cache-status header, everything is fine, and the resource is being loaded from the CDN.

Keep in mind that by default, Cloudflare doesn’t cache HTML or PHP, which is a good practice because these files are often generated dynamically with tracker macros like {subid}. However, here is a full list of file extensions that Cloudflare does cache.

Working with images

Usually, one of the “heaviest” elements on any website is images. So, after setting up your hosting and servers, the first thing you should do is check the size of your images.

Resizing images. To start, go to the folder with your landing page and sort all the files by size, in descending order. I use Total Commander for this, but any file manager will do.

The screenshot shows that the heaviest file, weighing 2,7 megabytes, is an image with dimensions of 1890x1270 pixels. Who needs such a large image on a landing page? Obviously, no one. It's just consuming traffic!

In my opinion, the maximum size for any side of an image should not exceed 1280 pixels. Anything larger is excessive. For quick batch resizing of images, I recommend using software like ImBatch or XnConvert.

Here is the same folder, but now after I resized the four largest images. Look at the bottom right. Do you see the total folder size? It has changed almost in half, from eight megabytes to four megabytes!

Compression. Images can be further compressed using services like TinyPNG, PngQuant, MozJPEG. Let's continue to consider the examples that were mentioned earlier, but now apply compression to them.

Here are 2 pairs of images, in each case, I managed to achieve compression of more than 2,5 times!

If we apply compression to ALL PNG files on our landing page, we’ll get a total reduction in the landing page weight by ANOTHER 2 times. It was 4 megabytes, and it became 2 megabytes.

Below is an example for processing a batch of JPG files: compression by 8 times, ha!

We use new formats: WebP and Avif. I won't even try to convince you to switch from JPG and PNG to WebP, but I'll just show you another screenshot.

So, instead of 1,7 megabytes in PNG, we now have 236 kilobytes.

Lazy loading. Lazy loading means that the images on a pre-landing page or landing page won’t be loaded until they are needed by the user (i.e., until the user scrolls to them). Let me show you how to do it.

A regular image is encoded in HTML using the img tag, for example:

An image with “lazy loading” differs by just one attribute:
<img loading="lazy" src="1.jpg"/>

Take any text editor, open the index.html of the landing page, perform a text replacement, and change <img на <img loading="lazy". Easy!

Working with Gifs. The first thing to understand is that GIFs are EVIL! Practically everywhere GIFs are used, they can and should be replaced with videos. You have a choice of 2 formats: MP4 or WebM. But in any case, videos will take up about 10 times less space. In my opinion, the choice is obvious. Use my scripts for converting GIFs: gif2mp4.bat and gif2webm.bat.

Here's what you need to do in the HTML file – replace your <img> tag where the GIF was with the following construction:

So, the video will play automatically and loop continuously, just like a GIF. If the <img> tag that previously contained the GIF had any attributes such as id or class, you should add these attributes to our new <video> tag to apply the corresponding styles.

Working with videos

Sometimes we need to embed video content into our landing pages. However, storing large video files on our own hosting is not the most sensible idea. It's much better to host videos where it's common, such as YouTube, but with a twist. Smart people have already created a script called YTDefer, which reduces the size of the loaded content by more than 10(!) times (down to 209 KB). How does it work? The trick is that the script will load only the video's thumbnail, and all the other content will load only after the user clicks on Play.

Working with CSS styles

When it comes to changing styles, we're stepping onto somewhat slippery ground, a thin ice. So, I'd like to warn you right away: firstly, it might not be worth it for you to go there AT ALL, just forget about it. Secondly, be sure to make a backup of the styles you'll be editing. Because something can very likely go wrong!

Cleaning. If your landing page uses any standard bulky style libraries like Bootstrap, FontAwesome, and so on, then most likely, 90% of these libraries are not used as intended and just add unnecessary weight while significantly affecting loading speed. Therefore, you can try to remove all the unnecessary using the following service: PurifyCss.Online. Paste the full code of your index.html into the left field and then sequentially insert all the data from each CSS file of your landing page into the right field. The result will be a combined and cleaned CSS file.

Combining. If your landing page uses several style files, it's a good idea to combine them! Combining multiple style files will result in just one HTTP request for loading the combined style, instead of the 2-3-4 requests that would be made without combining. This will significantly improve the rendering of your landing page.

If your style files contain hundreds of kilobytes of code, I recommend cleaning them first, as described in the previous section, and then proceed to combine them. If after combining, your style is still a megabyte or more, this monster may hinder loading instead.

How to combine styles? Create a new CSS file and use Copy-Paste. You can also use the command: copy *.css new.css in the command line.

Minification. Minification is the process of removing unnecessary spaces and line breaks from a file, resulting in a single long string. You can find services that minify your styles by searching for CSS Minify on Google. Here's an example of one of them. Copy your CSS, paste it, click Minify, and you'll get a compressed version. Replace the old style with the new one – and you're good to go!

Preload. To finish the section on styles, here's a little trick you can use to preload your styles slightly faster. The idea is to instruct the browser to prioritize fetching and using the style. This way, your page won't flicker or jump because content loads first and then the style is applied. Here's how you can do it:

Notice that in the first line, I specified the attribute rel="preload", and I also provided a hint to the browser to let it know what's being preloaded. In the first case, it's a style. In the second case, it's a script! Yes, you can preload scripts too. So, if your landing page has some fancy JavaScript menus, for example, you can try preloading the script for that menu in advance.

Working with scripts

Here, the principle is pretty much the same as when dealing with styles: if you're not an expert, don't delve too deep into it. It might not be worth it. And always make backups!

Combining. If your landing page uses more than 3-4 scripts, combining them into a single script is a pretty good idea. The idea is that this combined script only requires a single HTTP request to load, rather than 3-4, which should improve loading times.

How to combine them? Create a new file and copy the content of all the existing scripts into it. You can use the command: copy *.js new.js in the command line.

Minify and optionally obfuscate. The principle is the same as with styles: remove all unnecessary spaces and line breaks from scripts. Additionally, if you want to go a step further, you can apply obfuscation (i.e., code “obfuscation”). In this case, for example, long variable names will be replaced with one-letter names, making the code slightly shorter.

There are plenty of websites that allow you to quickly compress JavaScript code. For example, you can use a service like this one. It's straightforward: paste your code, click Minify, get the compressed code, and replace the old code with the new one.

You can use the obfuscator either from the same website or you can try this one. It's quite powerful, so for our purposes, you need to disable all its security settings and leave only the most basic features. Here's an example of how it should be:

CDN. There are plenty of scripts that webmasters regularly use in their work. The most common one is jQuery. There's also OwlCarousel, various number masks, and so on. So, to make your site load faster, don't copy these scripts locally, but use them from a CDN!

What's the advantage? It's quite likely that while browsing the web, the user has ALREADY visited sites that used these same scripts. And they are saved in the user's browser cache. Consequently, the browser will fetch them from the cache instead of loading them from your server.

In short, connect jQuery like this:

Find all other scripts on these CDNs, as almost certainly, you'll find everything you need there:

Place scripts in the footer. Just remember: the best place for your scripts on a landing page is NOT the <head> tag but the footer, i.e., at the very end of the code, just before the closing </body> tag. This way, we first load all the textual content, and only then do the scripts execute.

Checking changes

After you’ve applied some of the techniques mentioned above, it’d be a good idea to check how much the changes have affected your site's loading speed. In addition to the most obvious method I discussed in the Hosting section, you can use the following tools to measure your site's performance:

Google PageSpeed Insights - measures performance separately for mobile and desktop versions of the site, showing it as a percentage from zero to one hundred: the higher the better. It also provides many tips on what and how to adjust on your site to make it load faster. This is the benchmark tool!

GTMetrix — a Canadian service that is not much different from the previous one (requires a VPN to access from Russia). However, by default, it tests the site only for desktop, and you'll need a subscription to test from a mobile device. It also provides advice on possible improvements.

Now, if your landing page weighs more than a couple of megabytes and loads for more than a couple of seconds, you know what to do. I wish you minimal traffic losses, and of course, keep it profitable! And Yellow was here, talk to you later.

by Editor