Speed up your landing page within 2 hours

If you can’t measure it, you can’t improve it

The first thing you should do with your existing landing page is just run a Google speed test on it. You might not understand everything that comes, but you will get a fair bit of idea of what’s blocking your landing page’s performance on both desktop and mobile. If you’re confident in your technical ability, read up the individual issues and keep improving your landing page till you hit at least a 90 score. Otherwise, ask a developer friend and he’ll help you out.

Some simple things you can do to speed up your landing pages within 2 hours:

1. Compress & Optimize your Assets

(Difficulty: Easy, Expected Time: 30 minutes)

This is probably the number one reason why sites load slow. Google speed test will point out the heavier assets, but it does not hurt to go through each one you have manually. A few things to keep in mind when optimizing images are:

• First, check the size of the image. You definitely do not want images crossing the 500kB mark, though ideal sizes are less than 100kB
• Next check the image dimensions. Many times, we are using 2048 x 2048 images when 512 x 512 would be good enough. Just reducing the image to optimal dimensions can get anywhere from 4 to 32 times reduction in image size.
• Finally check the image extension. JPG images are usually smaller than PNG images so you can try converting PNG images to JPG and see if that works for you. JPG images do not have an alpha channel, so if you have a transparent background, you have to use PNG

2. Minify HTML, CSS & Javascript

(Difficulty: Medium, Expected Time: 30 minutes)

If you’re using something like WordPress to create your landing page, you have plugins like Autoptimize (https://wordpress.org/plugins/autoptimize/) which do this for you. But, if you are doing it via code and not using a bundler like Webpack, there are chances you might miss this one.

3. Use asynchronous loading

(Difficulty: Easy, Expected Time: 5 minutes)

Scripts like CSS and JavaScript can be loaded in two different ways: Synchronously or Asynchronously. If your scripts load synchronously, they load one at a time, in the order, they appear on the page. If your scripts load asynchronously, on the other hand, some of them will load simultaneously. This can be done by just adding the ‘async’ keyword while calling the script.

4. Use Deferred Loading for Javascript files

(Difficulty: Easy, Expected Time: 5 minutes)

Deferring a file means preventing it from loading until after other elements have loaded. If you defer larger files, like JavaScript, you ensure that the rest of your content can load without a delay. Just use the ‘defer’ keyword for any script that’s not super-important to load on page load and can instead be loaded at a later stage. For example, if you have some javascript animations or are using some javascript libraries, these can be loaded once your page has loaded and should be deferred.

5. Consider using a CDN

(Difficulty: Hard, Expected Time: 45 minutes)

This one’s not as simple if you have not used a Content Delivery Network (CDN) before. However, this can work wonders if your landing page audience is from different geographical locations or you expect a large number of people to visit your landing page at the same time. The way data transfer works is that people closest to the physical location of the server get served the fastest. Having a CDN can help your users get faster load times, even in times of heavy traffic. Even if you are new to CDN, you can get started with MaxCDN and Cloudflare, and it should not take more than 30 minutes to set things up.

The above will likely get you to a great start but if you’re still getting stuck, reach out to me and I’d love to be of help.