Home > >

Day 26: Optimizing Landers for Speed (5)

08-06-2021 12:46 AM #1 vortex (Senior Moderator)
Day 26: Optimizing Landers for Speed

**************************************************

ACTION & EXPLANATION

So now you've fixed up some landers! Congratulations! (I hope it wasn't too painful - and if it was, don't worry - you'll get faster over time.)

Before actually using your landers in campaigns, there's just one more thing left to do: You need to optimize them to make sure they load quickly.

Do NOT skip this step! Making your landers faster is one of the most value-added tasks you can do to potentially increase CTR and CR.

Our very own Caurmen has done the testing to show how much page loading speed can affect lander CTR:

https://stmforum.com/forum/showthrea...eed-Affect-CTR

The result? "2 seconds of loading time can equate to more than a 100% increase or decrease in CTR."

https://stmforum.com/forum/showthrea...ll=1#post98172

So then how fast is fast, and how slow is too slow? Caurmen answered this question at the end of this post:

For a simple landing page, and as a very rough rule of thumb, any page loading time beyond 2 seconds is very bad. Generally, you should be able to get below a second as measured using a tool like Pingdom.

So, what do you look for when optimizing a lander? This is what this lesson will aim to cover.

There are many tactics you can use to make a lander fast. And since most of these have been covered in detail either in other posts on this forum or on other sites, I'll be linking to and/or quoting various posts/sites for the most part. But first, let's briefly go over how to test page load speeds.

How to Test Page Load Speed

There are lots of websites you can use to test page load speed. My new favorite is GTMetrix.com:

https://gtmetrix.com

(I've recommended WebPageTest.org in the past, but please don't continue to use that service - it has become horribly inaccurate in recent months.)

Sign up for an account on GTMetrix. You'd be logged in after signing up, and would be on the Dashboard page.

In the "Analyze Performance of:" field, paste your lander url. For "Test URL in" select the location that's closest to the geo you're planning to test first. For "using", select "Chrome (Android, Galaxy Nexus)" if your offer accepts mobile traffic (otherwise, selecting one of the other desktop options will do; landers tend to load more slowly on mobile, and we want to make sure the lander loads fast enough there). Click "Analyze".

This is where you'll find the loading speed of the lander:

(1.6s, although still acceptable, is not awesome by any means - we should aim to optimize it further, to below 1s if possible.)

Below that, you'll find different tabs that will give you ideas on areas that can be improved:

In the sections below, I'll list some of the things you can do to potentially decrease the page load speed. This is the process to use:

1)Run GTMetrix on the landing page and note the loading speed.

2)Implement one speed optimization tactic to the lander - don't forget to save it.

3)Clear browser cache and reload the page to make sure nothing got broken. (Obviously, if you broke something, either undo the changes, or correct the mistake if you know how.)

4)Run GTMetrix on the page again and compare the speed with the one you took before the change. If the loading speed decreased as a result of the change, then congratulations! Otherwise, undo the change and try another speed optimization tactic.

Finally - here are some of those speed optimization tactics.

1)Optimize Image Size

This is always the first thing I do. You can shrink image file size with little/no loss in image quality. There are lots of image optimization tools out there, but this is the one I use:

https://kraken.io/web-interface

The interface is pretty self-explanatory. Basically upload all of your lander's image files to kraken.io, let the tool optimize them for size, download the resulting images, and load them back to your hosting (Amazon S3 if you've been following this tutorial).

For "optimization mode", try the default "LOSSY" first. You'll likely be satisfied with the resulting image quality, but if not, you can optimize the images again using the "LOSSLESS" setting.

(EDIT: Member @samkerstein has generously offered more effective ways to decrease image size - please see the following post:

https://stmforum.com/forum/showthrea...l=1#post367881)

2)Copy CSS Contents to Index

Style sheets are often stored separately in one or more .css files. We can reduce loading speed by putting these in the index file instead. Caurmen explains how this works in this post:

Most Web speed guides will tell you to put your stylesheet in a separate file, but that's actually a bad idea for a simple affiliate marketing campaign. The reason to put the stylesheet in a separate file is so that the browser caches it - it slows down the loading time on the first page a bit, but subsequently speeds up later loads on the same site. However, we're not really expecting our visitors to come back to visit our LP again later, so it's just a slowdown for us.

Basically, all you need to do is copy the contents of each css file and paste them into the index file, and make sure everything is in-between <style> </style> tags, which in turn should be in the header section of the file (i.e. in-between <head> </head>).

<head>
<style>

CONTENTS OF CSS FILES GO HERE (if there are more than one css files, the order in which they're pasted here should not matter)

</style>
</head>

3)Move JS to the Bottom If Possible

Here's how Caurmen's explains it (in the same post here):

Lots of people stick loads of Javascript files in the header of the HTML. Don't do that - it forces them all to load before the page renders. All Javascript that doesn't absolutely HAVE to be in the head tag should be loaded just before </body> at the foot of the page.

Look at the top portion of the index page, for sections of code that are enclosed in <script> </script> tags. You may be able to move some of them to the bottom of the page (pasting them just before the closing </body> tag should be fine) without breaking the lander.

For those of you that aren't skilled at coding, you can try brute-forcing your way using this method: Move each <script> </script> section from the top to the bottom and reload the page after each time to see whether the change you made has broken anything. If not, leave the change intact. If so, move the section back to the top and try moving another section.

4)Use Google-Hosted JQuery Files

This is what Caurmen has to say about this (in this post):

DO use libraries hosted by Google. If you've gotta use a Javascript library like JQuery, it's far better to reference the one hosted by Google - there's a very good chance that users already have it loaded, saving you significant loading time.

So, if you see any jquery files in your lander folder (i.e. jquery[whatever].js), try to find out which version it is by opening the file - sometimes it would say on the top:

In this particular case, we're needing version jquery version 1.11.3. Next, we need to check whether it's included in the Google Hosted Libraries:

https://developers.google.com/speed/libraries/#jquery

Which it is! So then the only remaining task would be to replace the jquery call in the index file with the one I've marked in the screenshot above.

Original jquery call in the index file:

We need to replace that call with this one, which calls the google-hosted version:

5)Add a Favicon

Please see the section "Why a Forgotten FavIcon Can Ruin Your Site's Page Load Time" in this article:

https://love2dev.com/blog/web-perfor...ave-a-favicon/

The best solution to date was offered by @jeremie:

https://stmforum.com/forum/showthrea...l=1#post422058

Awesome Optimization Tools

You are also encouraged to use the following tools to analyze your landing pages. They will make suggestions that are specific to your lander, and provide the necessary explanations and guidance on how to implement those suggestions.

1) YSlow

http://yslow.org/

2)Google PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

**************************************************

READING & RESOURCES

The following posts can also provide additional knowledge and tips you can use to decrease loading speed further:

https://stmforum.com/forum/showthrea...ter-Cheatsheet

https://stmforum.com/forum/showthrea...s-Loading-Time

https://stmforum.com/forum/showthrea...se-Your-Profit

https://stmforum.com/forum/showthrea...e-loading-time

https://stmforum.com/forum/showthrea...l=1#post256579

https://stmforum.com/forum/showthrea...By-ANOTHER-10-

https://stmforum.com/forum/showthrea...-landing-pages

https://stmforum.com/forum/showthrea...Load-90-Faster

**************************************************

Now that your landers are finally ready for battle, the next lesson will go into how to add them to the tracker, and how to split-test them along with offers. Please stay tuned!

Amy

09-04-2021 07:52 PM #2 sadfdsafsdfs456 (Member)

Hi..Can you please share your telegram ID or skype ?

09-06-2021 09:42 AM #3 vortex (Senior Moderator)

Originally Posted by sadfdsafsdfs456

Hi..Can you please share your telegram ID or skype ?

Please feel free to ask your questions here!

Amy

09-07-2021 09:26 AM #4 jeremie (Moderator)

Originally Posted by vortex

5)Add a Favicon

Add a base64 favicon inline to avoid one server request:

1) Upload your ico here: https://base64.guru/converter/encode/image/ico
2) Pick the "HTML Favicon" code at the bottom of the page and replace the corresponding markup in your header.

09-07-2021 03:56 PM #5 vortex (Senior Moderator)

Originally Posted by jeremie

Awesome! Linked to your post from the lesson post. Thanks so much!

It may be a small savings in time, but everything together adds up.

Amy

Home > >