Maximum Speed: Faster Landing Pages with Less Traffic Loss

Introduction

Hello everyone, Yellow is in touch! Today I want to break down one of the key technical problems of any affiliate marketer — the loading speed of landing pages and the resulting traffic loss. Everyone knows that page loading speeddirectly affects conversion. According to a 2019 Unbounce study, nearly 70% of users admitted that page speed affects their desire to buy online. Here are some more numbers from the research: the highest CR rates are achieved on pages with a load time of 0 to 2 seconds, and with each additional second, conversions decrease by an average of 4.42%​​. Currently, the average loading time for a mobile web page is 15.3 seconds, whichsignificantly exceeds optimal performance.

Therefore, slow loading of landing page is not just an annoyance for users. This affects your sales and therefore your income. Imagine, some users may not wait for your site to load at all, and users of older devices leave when they see that the site is severely slow.

But before we dive into solving this problem, it is important for us to understand that it is complex, i.e. consists of many parts. In this article we will look at them all and define in detail what and how to do so that your landing page loads much faster. I’ll provide you with all the necessary tools and links, let’s get started!

Hosting

The first thing you should consider before you start draining traffic is the issue of the physical distance of your server from the country to which the advertisement will be given. It’s simple: the further away the server is, the worse the speed.It is checked like this: first we measure the loading speed of our landing page from underproxydata center countries. For example: you have a server in Germany — take a good DEproxyand under it we go to the landing page and measure the loading speed with a stopwatch. Then we take a good oneproxyunder the target geo (for example, the Philippines) and already under it we go to our landing page and measure the time again. Next we look at what the difference is, and how critical it is.

If you are working with a single macro-geo (i.e. Europe-Asia-Latham-Africa, etc.), then it is better to get a server in a country that has good connectivity with your target region. Where can I get this information? Let’s look at the mapinternet backbone cablesin Yandex or Google images and select.

I personally got it like this:

• For Europe: DE, UK
• For Asia and Australia: SG
• Under USA and Canada: any part of US
• Near Latham: south US or BR
• For Arabs and Africa: SA, TR

But what if you work with not one, but several macro geos and don’t want to buy a bunch of servers? In that case, I would recommend that you host in the southern US. From there, there is a generally acceptable connection to any point in the world: Europe/Latham is better, Asia/Africa is worse. For example, I use servers in Miami from the companyFriendHostingand, if you do not spout the blackest dirt, I fully recommend that you use their services.

Besidesproxyunder geo, you can check the availability and loading speed of your landing pages from different regions using the following services:
Pingdom— burzh service with a fairly small set of geos available (from Russia you will need a VPN) + approximately the same type of serviceGift Of Speed.

In contrast to them there isPing-Admin — Russian-language service with the widest selection of countries, I recommend it!

HTTP protocol version

If you suddenly don’t know, then the entire Internet works using the HTTP protocol, and over the last ten years the protocol version has grown from 1st to 3rd. Everything is as always: the second version is faster than the first, and the third is faster. It would be very useful if your landing page was loaded using the latest version of the protocol, or at least the second.

Here’s how to check it: launch Google Chrome, go to Developer Tools (on Windows — press F12) and there to the Network tab. Next, we load our website and study the data, as in the screenshot below.

If you see http/1.1 everywhere, then you will have to communicate with the support of yourhostingand find out if it is possible to enable a higher version. If you are just selectinghosting— clarify this question in advance!

Constructors

If your funnel contains intermediate sites where whites are hosted, and black is displayed by what you insert into thiswhiteJS integration from, for example, Keitaro, or if you just usewhite-button: «What country are you from?» or «Are you already 18 years old?“, then you get an extra headache.

Now you need to understand not only the speed from the geo user to the geo server withtracker, but also the speed from the user to the geo site designer.

There is only one rule here: the more different servers are used in conjunction, the slower everything will work in the end, and the greater the traffic loss will be! On constructors, these losses can reach up to 50-75%; I saw such figures with my own eyes on a combination of Thailand + American designer.

Therefore, if you see that the losses are large, either select some local constructors, or do not use them at all, but make a normal onewhiteon your domain.

Redirects

Axiom: with each redirect you will lose some traffic. You can assume that with each redirect, 5-10% of users drop out.

Most often, the issue of redirects is relevant when you link to something like a smart link/link affiliate network or offers with payment on the site. Affiliates most often do not provide the final address, but one wrapped in a redirect in order to be able to calculate statistics, etc. But if some affiliate programs resell others affiliate programs, and they, in turn, drive traffic to the final advertiser…. Then the number of redirects may begin to exceed acceptable limits.

To track redirects in your funnel, use great extensionsLink Redirect TraceorRedirect Path. Firstalso available for Firefox, just in case.

There is only one piece of advice: work with direct advertising more often!

CloudFlare

What conversation about loading acceleration would be complete without mentioning CloudFlare? Probably none. Cloud can cache all JS scripts, CSS styles and images and provide them to users. What’s the joke? And the fact is that Clara has a lot of servers scattered all over the world, and there will almost certainly be one that will be located quite close to the user. Accordingly, resources will load quickly + the load on your own server will be reduced.

And that’s exactly why (and not at all for hiding IP addresses from FEB) Clara is great. To see with your own eyes that caching works, you can pass your domain through CloudFlare, and then go to it and look at the following in the Network tab in Developer Tools:

If you see it in the titlecf-cache-statusthe word HIT — everything is gutted, the resource is loaded from the CDN.

Yes, keep in mind that by default the cloud does not cache html or, especially, php, which is more than correct, because these files are often generated dynamically — with all sorts of macrostrackertype {subid}. And here is a complete list of file extensions that the cloud caches.

About finer cache settings in CloudFlareread here.

Working with Images

Typically, one of the heaviest elements of any website are images. Therefore, first of all, after you have set up your hosting and servers, look at how much the images weigh. You and I will resize them, compress them, use modern formats and abandon ineffective ones, enable lazy loading, etc.

In the process, I will tell you which scripts can be used for these operations,so as not to remember: which program to use, and what parameters it needs.All scripts are here, download them for yourself, install all the necessary software that is listed in the readme, and do not forget to add the paths to the PATH environment variable.

Let’s go!

Changing length and width

To get started, just 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 a picture measuring 1890×1270 pixels. Who needs it on landing pagee? Obviously, no one. She stupidly eats traffic!

The maximum size on any side of the image, IMHO, should be no more than 1280 pixels. Everything else is extravagance that the user will never see on his small phone screen (and on the desktop too).

To quickly resize images in batches, I recommend using software likeImBatch orXnConvert. Or take my scriptresize1280.bat. Copy the script to the folder with pictures, run it, and in a minute all the pictures will be the right size.

Here is the same folder, but after I changed the sizes of the four largest pictures. Look down to the right. See the overall size of the folder? It has changed almost 2 times, from eight to four megabytes!

Compression

The most common image formats on these Internets are JPG and PNG. Both use different content compression algorithms internally so as not to take up a lot of space. But often even they can be squeezed out.

How can this be done? Here are some options:

• serviceTinyPNG— supports both JPG and PNG, there are restrictions on free use;
• utilityPngQuant— free software for PNG, launched from the command line, or my scriptcomresspng.batwho uses it under the hood;
• libraryMozJPEG is one of the best options for JPG. The kit includes a cjpeg utility for working from the command line. Or use my scriptcompressjpg.batmade on its basis.

Let’s continue to look at the examples above, but now apply compression to them.

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

If we apply compression to ALL PNG files of our landing page, we will get a total reduction in the weight of landing page by ANOTHER 2 times, from 4 megabytes to 2 megabytes.

And below is an example for processing a stack of JPG files: compression by 8 times, ha!

We use new formats: WebP and Avif

I won’t even convince you to switch to WebP instead of JPG and PNG, I’ll just show you another screenshot.

So, instead of 1.7 megabytes in PNG, we now have 236 kilobytes. The difference is more than 7 (seven) times! The prevalence of the format is such that it will work perfectly on 95% of devices in the world.

If you are worried about the remaining 5%, then you can always write a code in the HTML so that these people will be shown images in PNG/JPG. It will look something like this:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg"> 
  <img src="image.jpg" alt="Alt Text!">
</picture>

Well, if you want to go even further, then… conversionconvert your PNG/JPG to AVIF! There for nowworse support, but the results are often more interesting. Created to popularize the formatseparate siteon which you can try to convert your files with conversion, but I would instead recommend that you usefree ImageMagick softwareor at leastConvert.io service.

Here is the AVIF result obtained using ImageMagick and how it compares to the compressed JPGs:

As you can see, in two cases AVIF won, and in the other two, compression via MozJPEG won. So experiment and choose what suits you best.

Lazy loading

A simple trick that will greatly improve the loading speed of your landing pages. There are all pros, no cons, and therefore I recommend using this feature ALWAYS and everywhere!

So what is it and how does it work? Lazy loading means that prokla or landing images will not load until they are needed by the user (those. until he reaches them).

During normal operation, the browser immediately loads all the images, and the user has to wait, but if we change the HTML code just a little, we can shorten the initialdownloadablethe size of our prokla is several times. Let me show you how to do this.

A regular image is encoded in HTML as an img tag, for example:
<img src="1.jpg"/>

A lazy-loaded image differs in just one attribute:
<img loading="lazy" src="1.jpg"/>

Take any text editor and openindex.htmllanding pagea, run text replacement and change<imgon<img loading="lazy". Easy!

Working with Gifs

The first thing to understand is that GIFs are EVIL! Almost everywhere where 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, the video will take up 10 (ten!) times less space. In my opinion, the choice is obvious. Use my scripts to conversion create gifs:gif2mp4.batAndgif2webm.bat.

But what you need to do in the html file is to replace your <img> tag, where the gif was, with the following construction:

<video autoplay loop muted playsinline>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>

Thus, the video will be played automatically and in a circle, just like a GIF.
If the <img> tag, in which the gif was written, had some id or class attributes, add them to our new <video> tag so that the corresponding styles are applied.

Working with video

Sometimes we have to embed video content into landing pages spacers. But storing large video files on yourhosting— not the smartest idea. Because as soon as a dozen or so users come to your site and start playing content… your server will definitely not thank you for this. Therefore, it is much better to post the video where it is accepted, i.e. on YouTube. And everything seems to be fine: you upload your video there, then click the Share button, select Embed, copy the iframe code and paste it onto your website, right?

Yes, but not so. Have you seen how much those scripts weigh that will be downloaded to the user who comes to visit you? Two, motherfucker, and a half megabytes! In some geographies, where users have shitty Internet, these 2.5 MB will be the reason that the user will not wait for the download, will spit and leave.

So what should we do? Smart people have already stopped talking long agoscript called YTDefer, which will reduce the size of the downloaded content by more than 10(!) times (up to 209Kb). How does this happen? The whole joke is that the script will loadonly the title picture of the video, and all other content will be loaded only after the user clicks on Play.

Awesome! I highly recommend that you at least keep in mind that such a solution exists and bookmark it, because you never know when you will need it?

Working with CSS Styles

When changing styles, we are stepping on rather slippery ground and thin ice. So I want to warn you right away: first of all, maybe you shouldn’t come here AT ALL, fuck him. Well, secondly, be sure to make a backup copy of the styles that you will edit. Because something is very likely to go wrong!

Cleaning

If your landing page uses any standard bulky style libraries such as: Bootstrap, FontAwesome, etc., then most likely 90% of these libraries are not used for their intended purpose and lie as dead weight, and besides, they also have a rather strong effect on the loading speed.

Therefore, you can try to remove everything unnecessary using the following service:

PurifyCss.Online— insert the full code of your index.html into the field on the left, and in the field on the right, in turn, insert all the data from each css file of the landing page. The output is a combined and cleaned css file.

Be sure to checkthe performance of your landing page, after you replaced all the styles that you had with a new cleaned one. On desktop and mobile phone, pierce all link buttons, etc. And only if nothing is broken, then you can safely delete files that have become unnecessary.

There are alsoPurgeCSS AndUnCSS, but this is for geeks, the above service will be enough for you. But if, suddenly, it disappoints you with its result, and you still want to clean up the CSS, then use a paid analogue that is much higher qualityUnusedCSS.

Association

If your landing page uses several style files, then it’s worth taking them and combining them anyway! To load such a combined style, only one HTTP request will be used, and not 2-3-4, which will have a life-giving effect on the rendering of your landing page.

If your style files take up many hundreds of kilobytes of code, then I would recommend cleaning them first, as described in the previous paragraph of the manual, and only then merging them. If, after merging, you end up with a style of a megabyte or more, then this monster, on the contrary, will greatly interfere with loading.

How to combine styles? New css file + Copy-Paste operation. You can use the command:copy *.css new.cssfrom the command line.

Minification

Minification is the procedure of removing unnecessary spaces and line breaks from a file, so that the result is one long line. You can find services that minify your styles by searching CSS Minify in Google.for example, here is one of them.

We copy your css, paste it, click Minify, get a compressed one, replace the old one with a new one — profit!

Preload

To wrap up the section on styles, here’s a little trick that you can use to load your styles a little faster. It consists of instructing the browser to receive the style as a priority and use it. This way, your page will not move and jump because the content is loaded first and then the style is applied to it. This is done as follows:

<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />

Did you notice? Besides the fact that I indicated the attribute in the first linerel="preload"I also gave a hint to the browser so that it knows what exactly it is loading. In the first case, it’s style. But in the second — this is a script! Yes, yes, they can also be pre-loaded. Therefore, if you have, for example, some tricky Javascript menus on your landing page, you can try loading a script with such a menu in advance.

More detailsYou can read the documentation about preloading here.

Working with scripts

The principle here is approximately the same as when editing styles: if you don’t really understand it, don’t give a damn. It’s not worth it. And make backups!

We unite

If your landing page uses more than 3-4 scripts, then taking them and combining them into one is a pretty good idea. The bottom line is that to load such a combined script, only one HTTP request will be used, and not 3-4, which should improve loading time.

But only if you don’t have some huge scripts worth hundreds of kilobytes! If you have exactly these (why the hell do you need them on regular arbitrage landing pages, huh?), then combining them into one file will, on the contrary, worsen your situation.

How to combine? Come on, with your hands. Create a new file and copy the content of all existing scripts into it. You can use the command:copy *.js new.jsfrom the command line.

Minify and optionally obfuscate

The principle is the same as for styles: remove all unnecessary spaces and line breaks from scripts. Also, if you get stuck, you can use obfuscation (i.e., “obfuscating” the code). In this case, for example, all long variable names will be replaced with single-letter ones, and the code will become even slightly shorter.

Sites that allow you to quickly compress Javascript code are a dime a dozen.For example, here. It’s easy to use: insert the code, click Minify, get the code, replace the old one with the new one.

The obfuscator can either be used from the same site oryou can try this one. It is quite powerful, so for our purposes it is necessary to disable all its security settings, etc. and leave only the most basic features. Here’s an example of how it should be:

CDN

There are a lot of scripts that affiliate marketers regularly use in their work. Not some of our purely arbitration ones, but well-known ones. The most common one is JQuery. There is also OwlCarousel, all sorts of number masks, etc. So, in order for your site to load faster, do not copy these scripts locally, but use them from the CDN!

What’s the advantage? It is likely that while browsing the Internet, the user has ALREADY visited sites that used the same scripts. And they are saved in the user’s browser cache. Accordingly, the browser will take them from the cache, and will not load them from your server.

In short. We connect jQuery like this:

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

Look for all other scripts on these CDNs, almost certainly everything you need is there:

• cdnjs
• Jsdelivr
• Unpkg

Defer and Async

I won’t ramble on and on and go deeply into details. We don’t have a programming club here, so I’ll give you this tip: if you want to slightly speed up the loading of your site that uses scripts, then when connecting scripts, try the 2 options below and choose the one you like best.

Option #1

<script src="myscript.js" defer></script>

Option No. 2

<script src="myscript.js" async></script>

Add these attributes CONSISTENTLY. The first one was added —fully checked the functionality of the scripts: the roulette spins, the pictures scroll, etc. Is everything ok? We swapped the first for the second and checked again. Which one works better? We leave that one.

Putting scripts in the basement

Just remember:the best place for your scripts on the landing page is NOT a TAG<head>and the basement, i.e. the very end of the code, before the closing tag</body>. Thus, we first load all, all, all text content and only then the scripts are processed.

Since there is usually no interaction on arbitration landing pages (except for roulettes and other perversions with forms), then the location of the scripts in the footer will not affect the display of the landing elements.

Checking changes

Once you’ve applied any of the techniques above, it might be a good idea to see how much of an impact the changes you made made on your site’s loading speed? In addition to the most obvious method, which I talked about in the sectionHosting, you can use the following measurement tools:

Google PageSpeed ​​Insights— measures performance separately for the mobile and desktop versions of the site, showing it as a percentage from zero to one hundred: the more the better. Among other things, it gives a bunch of tips on what and how to correct on the site so that it loads faster. Reference tool!

GTMetrix— Canadian service, not much inferior to the previous one (VPN required for access from Russia). But by default, it tests the site only for the desktop; for tests from a mobile device, you will need to purchase a subscription. Also gives advice on possible improvements.

Given the previous two services, I have absolutely no idea why you would need a third one, but since I have it, here it is:WebPageTest. I won’t even write anything — figure it out!

Conclusions

Now, if your landing page weighs more than a couple of megabytes and takes longer than a couple of seconds to load, you know what to do. I deliberately did not go into detail about everything, otherwise this article would have grown to completely indecent proportions. But the most important thing is that you now have a direction and a guide. And then you’ll figure it out!

I wish you minimal traffic losses and, of course, be a plus! And Yellow was in touch, see you soon.