Maximum acceleration: make lendings load faster and minimize traffic loss.

Introduction

Hi everyone, Yellow is here! Today I want to break down one of the key technical problems of any arbitrageur - the loading speed of landings and the resulting loss of traffic. Everyone knows that page load speed directly affects conversion rates. According to a 2019 Unbounce study, nearly 70% users recognized 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 load times between 0 and 2 seconds, and with each additional second, conversions decrease by an average of 4.42%. Currently, the average mobile web page load time is 15.3 seconds, which is far exceeds the optimum.

Therefore, slow loading of a landing page is not just an annoyance for users. It affects your sales and therefore your revenue. 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 hard to slow down.

But before we dive into solving this problem, it's important for us to realize that it's complex, meaning it has many parts. In this article, we will look at them all and define in detail what to do and how to do it so that your landing page loads much faster. I will provide you with all the tools and links you need, let's get started!

Hosting

The first thing you should take into account before you start dumping traffic is the issue of physical remoteness 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 checks out like this: first, we measure the loading speed of our landing page from under the proxy countries of the data center. For example: you have a server in Germany - take a good DE proxy and go to the land under it and measure the download speed with a stopwatch. Then we get a good one proxy under the target geo (e.g., Philippines) and then go to our website and measure the time again. Then we look at the difference and how critical it is.

If you are working with a single macro-geo (i.e. Europe-Asia-Latam-Africa, etc.), it is better to get a server in a country that has good connectivity to your target region. Where can you get this information? Look at the map Internet backbone cables in Yandex or Google images and select.

I personally did it like this:

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

But what if you work with more than one macro geo and don't want to buy a bunch of servers? In that case, I would recommend you to host in the south of the USA. From there, the connection to anywhere in the world is generally acceptable: Europe/Latam is better, Asia/Africa is worse. I, for example, use servers in Miami from FriendHosting and, unless you're slinging the blackest mud, I'd fully recommend you use their services.

In addition to proxy Under geo, you can check the availability and loading speed of your webpages from different regions using the following services:
Pingdom - bourge service with a rather small available set of geo (from the Russian Federation will require a VPN) + about the same type of service Gift Of Speed.

As opposed to them, there are Ping-Admin - Russian-language service with the widest choice of countries, recommended!

HTTP protocol version

If you are not aware of it, the whole Internet works on HTTP protocol, and for the last ten years the version of the protocol has grown from the 1st to the 3rd. It's the same as always: the second version is faster than the first, and the third version is faster than the second. It would be very useful that your web site was loaded using the latest version of the protocol, well, or at least the second.

Here's how to check it: launch Google Chrome, go to Developer Tools (on Windows - press F12) and click on the Network tab. Then load our site and study the data as shown in the screenshot below.

If you see http/1.1 everywhere, you'll have to communicate with support for your hosting and see if it's possible to include a higher version. If you're just looking for hosting - check this question in advance!

Constructors

If you have intermediate sites in your funnel that host whites, and the black is displayed by what you put in on this one White JS integration from, for example, Keitaro or if you just use White-button: "What country are you from" or "Are you over 18 years of age?", then you get an extra headache.

Now you need to understand not only the speed from the geo user to the geo server with the trackerbut also the speed from the user to the geo site-constructor.

There's only one rule: the more different servers are used in a bundle, the slower everything will work, and the more traffic losses will be! On constructors these losses can reach up to 50-75%, I saw such figures with my own eyes on a bundle of Thailand + American constructor.

So if you see that the losses are high, either pick up some local constructors or don't use them at all and make a normal one White on your domain.

Redirects

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

Most often the issue of redirects is relevant when you pour on something like smartlink / on the link of PP or on offers with payment on the site. Affiliates most often give not the final address, but wrapped in a redirect to be able to count statistics, etc. But if some affiliates resell other affiliates, and those in turn drive traffic to the final reklu..... Then the number of redirects can start to exceed the permissible limits.

To track redirects in your funnel, take advantage of great extensions Link Redirect Trace or Redirect Path. The first there's one for Firefoxif anything.

One piece of advice: work with direct ads more often!

CloudFlare

What conversation about download acceleration is complete without mentioning CloudFlare? Probably none. Cloud can cache all JS scripts, CSS styles, and images and distribute them to users. What's the catch? It is that Clare has a lot of servers scattered all over the world, and almost certainly there will be one that will be close enough to the user. Consequently, resources will be loaded quickly + the load on your own server will be reduced.

And that's exactly what it's for (not to hide IP addresses from the FBI.) Clara is doing a great job. To see for yourself that caching works, you can throw your domain through CloudFlare and then go to it and see the following on the Network tab in Developer Tools:

If you see in the headline cf-cache-status HIT word - everything is fine, the resource is downloaded from CDN.

Yes, note that by default Cloud does not cache html or php, which is more than right, because these files are often generated dynamically - with all sorts of macros. tracker like {subid}. Here is the full list of file extensions that Cloud does cache.

About finer cache settings in CloudFlare read here.

Working with images

Usually one of the "heaviest" elements of any website are images. So the first thing to do, after you have set up your hosting and servers, look at how much images weigh. You and I will resize them, compress them, use modern formats and abandon inefficient ones, enable lazy loading, etc.

In the process, I will tell you what scripts you can use for these operations, so that you don't have to remember which program to use and what its parameters are. All the scripts are right heredownload them for yourself, install all the necessary software that is listed in the readme, and don't forget to add the paths to the PATH environment variable.

Let's go!

Changing the length and width

First, just go to the folder with your landing page and sort all the files by size, descending. I use Total Commander for this, but any file manager will do.

On the screen you can see that the heaviest file, weighing 2.7 megabytes, is a picture with the size of 1890x1270 pixels. Who needs such a picture on a landing page? Obviously, no one. She stupidly eats traffic!

In my opinion, the maximum size of any side of the picture should be no more than 1280 pixels. All other things are excesses that a user will never see on his small phone screen (and on a desktop, too).

For quick batch resizing of images I recommend using software like ImBatch or XnConvert. Or you can use my script resize1280.bat. Copy the script to the folder with pictures, run it and in a minute all pictures will be the right size.

Here's the same folder, but after I resized the four largest pictures. Look down to the right. See the total size of the folder? It's almost doubled in size, from eight to four megabytes!

Compression

The most common picture formats on these internet sites of yours are JPG and PNG. Both use different algorithms inside to compress the content so that they don't take up a lot of space. But often even these can be "compressed".

What can this be accomplished with? Here are a few options:

• service TinyPNG - Supports both JPG and PNG, there are restrictions on free use;
• utility PngQuant - free software for PNG, run from the command line, or my script. comresspng.batwho uses it under the hood;
• library MozJPEG - is one of the best options for JPG. It comes with cjpeg utility to work from command line. Or use my script compressjpg.batmade from it.

Let's continue with the examples above, but now apply compression to them.

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

If we apply the compression to ALL PNG-files of our landing page, we will get a total reduction in the weight of the landing page in 2 times, it was 4 megabytes, became 2 megabytes.

And here's an example below for processing a bunch of JPG files: 8x compression, ha!

Using new formats: WebP and Avif

I'm not even going to convince you to switch to WebP instead of JPG and PNG, but just show you another screenshot.

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

If you're worried about the remaining 5%, you can always write in the HTML code so that these people will be shown PNG/JPG pictures. It would 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, well... convert your PNG/JPGs to AVIF! So far. worse supportbut the results are often more interesting. In order to popularize the format separate site where you can try to convert your files, but I would recommend that you instead use free software ImageMagick or at the very least Convert.io service.

Here is the result in AVIF, which is obtained with ImageMagick and its comparison with compressed JPGs:

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

Lazy loading

A simple trick that significantly increases the loading speed of your landings. Total pluses, no minuses, and therefore I recommend to use this feature EVERYWHERE and everywhere!

So what is it, and how does it work? Lazy loading means that procla or lenda images won't load until needed by the user (that is, until he scrolls down to them.).

In normal mode of operation, the browser loads all the images at once, and the user has to wait, if we change the HTML code just a little bit, we can reduce the initial-downloadable the size of our procla by a factor of several. Let me show you how to do it.

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

A "lazy loading" image is characterized by just one attribute:
<img loading="lazy" src="1.jpg"/>

We take any text editor, open it up index.html of the lendings, run the text replacement and change the <img on <img loading="lazy". Easy!

Working with Gif

The first thing to realize is that GIFs are evil! Almost everywhere GIFs are used they can and should be replaced with video.

You have a choice of 2 formats: MP4 or WebM. But in either case, the video will take up 10 (ten!) times less space. In my opinion, the choice is obvious. Use my scripts to convert gifs: gif2mp4.bat и gif2webm.bat.

And here's what you need to do in the html file - replace your tag <img>where there was a gif of the following design:

This way the video will be played automatically and in a loop, just like the gif.
If the tag <img>If you have any id or class attributes, add them to our new tag. <video>to apply the appropriate styles.

Working with video

Sometimes we need to embed video content in our webpage landings. But storing large video files on your website hosting - isn't the smartest idea. Because it only takes a dozen or two users to come to your site and start playing content... your server will definitely not thank you for it. That's why it's much better to post videos where it's accepted, i.e. on YouTube. And everything seems to be fine: you upload your video there, then click the Share button, choose Embed, copy the iframe code and paste it to your site, right?

It's not like that. Have you seen how much those scripts weigh, which will be downloaded to the user who comes to your door? Two fucking and a half megabytes! On some geos, where users have shitty internet, these 2.5MB will cause the user to not wait for the download, spit and leave.

So what to do? The smart people have long ago a script called YTDeferwhich will reduce the size of the uploaded content by more than 10(!) times (up to 209Kb). How does this happen? The trick is that the script will load just the title picture of the video.and all other content will be downloaded only after the user clicks on Play.

That's awesome! I highly recommend you at least keep in mind that there is such a solution and bookmark it, because you never know when you'll need it 🙃

Working with CSS styles

When changing styles, you and I are stepping on rather slippery ground and thin ice. So I want to warn you right away: first of all, maybe you shouldn't even bother with it at all. And secondly, make sure you make a backup copy of the styles you're going to edit. Because something could very likely go wrong!

Cleansing

If your web site 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 are dead weight, and in addition, and also quite strongly affect the loading speed.

So you can try to remove all the unnecessary stuff using the following service:

PurifyCss.Online - paste the full code of your index.html into the field on the left, and in the field on the right, paste all the data from each css file in turn. The output is a merged and cleaned css file.

Be sure to check The workability of your landing page, after you've replaced all the styles you had with the new cleaned up one. On desktop and mobile, poke all the buttons-links, etc. And then only if nothing is broken - then you can safely delete the files that have become unnecessary.

There's also more PurgeCSS и UnCSSBut this is for geeks, the service above will be enough for you. But if, suddenly, it disappoints you with its result, and you still want to clean CSS, then use a paid much better analog UnusedCSS.

association

If you have several style files on your website, you should take them and combine them anyway! To load such a combined style will be used only one HTTP-request, instead of 2-3-4, which will invigoratingly affect the rendering of your landing page.

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

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

Minification

Minification is the procedure of removing unnecessary spaces and line feeds from a file, so that you end up with one long line. You can find services that minify your styles by googling CSS Minify, here's one of them.

Copy your css, paste, click Minify, get compressed, replace old with new - profit!

Preload

To conclude the section on styles, here's a little trick you can use to load your styles a little faster. It is to instruct the browser to prioritize getting the style and using it. This way your page won't ride and bounce from having the content load first, and then only applying the style to it. It is done as follows:

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

Notice? In addition to the fact that in the first line I specified the attribute rel="preload" I also gave the browser a hint so it knows what it's loading. In the first case, it's a style. But in the second case, it's a script! Yes, yes, they can be preloaded too. So, if you have some tricky Javascript menus on your site, you can try to load a script with such a menu in advance.

Read More you can read the documentation about preloading here.

Working with scripts

The principle is roughly the same as when editing styles: if you don't know much about it, just ignore it. It's not worth it. And make backups!

Combining

If you have more than 3-4 scripts used on your landing page, taking them and combining them into one single script is a pretty good idea. The point is that only one HTTP request will be used to load such a combined script, instead of 3-4, which should improve the loading time.

But only if you don't have some huge scripts of hundreds of kilobytes! If you have exactly that (why the fuck do you need them on a regular arbitrage lane, hmm?), then merging into a single file will make your situation worse.

How do you merge it? By hand. Create a new file and copy the content of all existing scripts into it. You can use the command: copy *.js new.js from the command line.

Minify and optionally obfuscate

The principle is the same as for styles: remove all unnecessary spaces and line breaks from scripts. You can also apply obfuscation (i.e. "obfuscation" of code) if you are too stubborn. In this case, for example, all long variable names will be replaced by one-letter ones, and the code will become even slightly shorter.

There are plenty of sites that allow you to quickly compress Javascript code. For example, here's one. It's easy to use: paste the code, press Minify, get the code, replace the old one with the new one.

You can either use the obfuscator from the same site or you might try this one. It's pretty powerful, so for our purposes we need to disable all of its settings for protection, etc. and leave only the most basic chips. Here is an example of how it should be:

CDN

There are a lot of scripts that arbitrageurs regularly use in their work. Not our own arbitrage scripts, but well-known ones. The most common is jQuery. There is also OwlCarousel, all sorts of number masks, etc. So, in order to make your site load faster, do not copy these scripts locally, but use them from CDN!

What's the advantage? It is quite likely that while surfing the Internet the user has already visited sites that used the same scripts. And they are stored in the browser cache. Accordingly, the browser will take them from the cache instead of downloading them from your server.

In short. Connect jQuery like this:

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

All other scripts can be found on these CDNs, they will almost certainly have everything you need:

• Cdnjs.
• Jsdelivr
• Unpkg

Defer and Async

I won't spill my guts and go into details. We don't have a programming class 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 #2

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

Add these attributes AT LEAST one at a time. Add the first one - checked that the scripts were fully functionalThe roulette wheel spins, the pictures scroll, etc. Everything okay? Swapped the first one for the second one and checked again. Which one works better? We keep it.

Putting scripts in the basement

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

Since arbitrage landings usually don't have any interactivity (except for roulettes and other perversions with molds.), then placing the scripts in the footer will not affect the display of lende elements in any way.

Change verification

Once you've applied any of the techniques above, it's a good idea to see: how much of an impact did the changes you made have on your site's loading speed? Aside from the most obvious method, which I discussed in the section on HostingThe following measurement tools can be used:

Google PageSpeed Insights - measures performance separately for mobile and desktop versions of the site, and shows it in percentages from zero to one hundred: the more the better. Among other things, it gives a lot of hints about what and how to tweak the site to make it load faster. A reference tool!

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

With the previous two services in place, I have absolutely no idea why you might want a third, but since I have one, here it is: WebPageTest. I'm not even going to write anything - deal with it!

Conclusions

Now, if your Land weighs more than a couple of megabytes and takes longer than a couple of seconds to load, you know what to do. I didn't explain everything in detail on purpose, otherwise this article would have grown to an obscene size. But the most important thing is that you now have a direction and a guide. And you will figure it out from there!

Wishing you minimal traffic loss and of course, leyte in the plus! And that was Yellow, see you soon.