Landing Page Load Speed: Building the World’s Fastest-Loading Pages

At Sunny Landing Pages, we have set out to make the world’s best landing page builder. That means something that is really easy to use, has a massive template gallery, is well integrated with all marketing automation products and provides amazing value for marketers.

More importantly, the builder should generate landing pages of a very high quality. That means the landing pages should have a high conversion ratio. They should be mobile responsive. Finally, of course, they should have a very fast loading speed.

So, for the world’s best landing page builder, we’ve taken up the challenge to create the world’s fastest landing pages. This blog focuses on how we’re going about that challenge. It talks about:

1. Why is the landing page load speed so important?
2. What are the factors that impact the landing page load speed?
3. Some details on how Sunny Landing Pages is optimizing the output landing pages for speed.
4. Results of the optimization efforts.

1. Why is the Load Speed of a Landing Page so important?

Consider these metrics from Google and Akamai.

Wow. You lose half your audience if your page doesn’t load in 3 seconds.

If you’re not convinced yet, here’s a longer infographic from KISSmetrics which shows how loading time of your landing page or website affects your bottom line as a digital marketer or online seller.

It’s the age of instant gratification. Nobody waits very long and I’m afraid the reality is even more stark when it comes to mobile users. If the user experience isn’t instantly available and mobile responsive then you’ll notice a huge drop off rate.

Second. If you’re an online advertiser and you’ve used Google Adwords, you’re aware that the Landing Page Quality Score directly affects the Ranking of your Ad. (AdRank)

So you might have the highest bid on a particular keyword, but if some competitor has a higher Quality Score, they could get a higher AdRank.

There are several aspects that go towards calculating your Quality Score but landing page load speed is one of the major items. Here’s a great piece from WordStream folks on it.

In short, if your page is slow to load, that’s PPC money straight down the drain.

So now that we know that landing page load speed is really important, what can we do?

What are the major factors impacting speed?

To start with, this is a great ‘fundamentals‘ help section from Google which summarizes the page-speed optimization in the following lines:

• Optimize Content Efficiency: eliminating unnecessary server calls and downloads, optimizing each resource through compression, and leveraging caching whenever possible.
• Streamline the Critical Rendering Path through progressive rendering. You’ll get an idea of progressive rendering from this image below:

• Rendering Performance: There is a set of actions the browser will undertake also known as the pixels-to-screen pipeline. I won’t get into too much detail here but this an overview of large set of actions that are conducted in miliseconds.

• PRPL: A great framework for web applications for the mobile era. Over the years the web has evolved from a document-centric platform to an application platform. Thanks to advancements such as Service Workers.
  • Push critical resources for the initial URL route.
  • Render initial route.
  • Pre-cache remaining routes.
  • Lazy-load and create remaining routes on demand.

In more common parlance, you need to look at the the hosting server settings, the HTML structure of the landing page and the use of external resources such as images, video, analytics, pop-ups (essentially the JavaScript, and CSS).

However, no matter how much you optimize the performance of the landing page will depend on the user’s data network connection speed and latency.

Technology aside, psychology also plays a role here. It is advisable to first optimize the above-the-fold content rather than working on the entire full page load. You can buy yourself some crucial few seconds by first presenting the top of the page while the bottom loads.

How does Sunny Landing Pages Optimize for Load Speed?

The product team has been hard at work at using the frameworks from above to improve the loading speed for our landing pages.

Here are a set of measures we have taken that have demonstrated great improvements in landing page speeds.

• Removing the need for landing page redirects

Very often, people will redirect their traffic to a mobile page such as abc.com will redirect to m.abc.com/home or abc.com will redirect to www.abc.com which will redirect to m.abc.com. These add unnecessary steps to the mobile users.

By using the Bootstrap 3.x framework, Sunny Landing Pages is able to deliver a mobile responsive page in a native manner rather than redirecting the user.

In addition to the Bootstrap framework, the landing page builder uses a unique grid based architecture so that it becomes impossible for elements to overlap and so all the landing pages are mobile responsive by default.

For example, here is the mobile preview of one of our popular landing page templates on photography. You can review the page layout and responsiveness across devices and orientation.

• GZIP compression

All modern browsers support gzip compression for HTTP requests. gzip reduces the size of the transfer by up to 90%. This reduces the time to download the resource, reduces data usage for the user (lower bills YAY!), and improves the ‘time to first render’ of your landing page.

• Server Settings and Configuration

A good benchmark for your server response time is 200ms.

There are many factors which can slow down the response of your server: slow application logic, slow database queries, slow routing, frameworks, libraries, resource CPU starvation, or memory starvation.

So this is where you really need to your team together and brainstorm on which aspects to focus on.

• Client Side Browser Caching

While this is relevant for repeat visitors rather than first time visitors, it’s a technique that we’ve still adopted.

We try to ensure that server responses have a caching instruction of sorts to help the client browser to see when it can reuse a previously fetched response.

It is particularly useful for static assets such as images which are unlikely to change frequently.

• Minify resources (HTML, CSS and JavaScript)

In Sunny Landing Pages, we tested and tried various services. Finally, we’re using the following tools. To minify CSS, we use https://cssminifier.com as well as http://csscompressor.com/

To minify JavaScript, we use https://javascript-minifier.com and https://jscompress.com/

• Optimize images

Since we provide a landing page builder – the platform depends on the users to provide images suited to their requirements.

On average, images account for more than 60% of the bytes to load a web page. Very often, users will upload large stock images which are 4-8 MB in size and that’s really a performance killer.

So this sub-section talks about a critical aspect for us – Image optimization.

Optimization here is of two kinds

• Serving Responsive Images:
  • Sometimes it’s just about using relative sizes for images to prevent them from overflowing the container.
• Optimizing Individual Images
  • Vector images are resolution and scale independent, perfect for the multi-device and high-resolution world.
  • Our servers are configured to apply GZIP compression for SVG assets.
  • In the future we are working towards serving scaled images by resizing images on the server and ensure that the “display” size is as close as possible to the “natural” size of the image. Large images account for largest overhead when resized.

It is said that GIF, PNG, and JPEG formats make 96% of the entire Internet’s image traffic.

GIF and PNG are lossless formats, in that the compression process does not make any visual modification to the images. For still images, PNG achieves better compression ratio with better visual quality. Always convert GIF to PNG unless the original is animated or tiny (less than a few hundred bytes).

You can use convert binary to optimize your GIF and PNG images

JPEG is a lossy format. The compression process removes visual details of the image, but the compression ratio can be 10x larger than GIF or PNG.

In the future we’re looking to use Progressive JPEG as it usually has higher a compression ratio for large images, and has the benefits of progressively rendering.

PageSpeed Insights provides specific optimization recommendations. We used these extensively. It also allows you to download the optimized images directly from PageSpeed Insights.

Don’t take our word for it – try the landing page templates on the tool yourself. Here’s a handy guide for image optimization as well

• Optimize CSS Delivery

• Prioritizing visible content

By reducing the size of the above-the-fold content and loading the main content first, users are given the perception of a faster loading page. The initial response from your server sends the data necessary to render the critical part of the page immediately and defer the rest.

• Removing render-blocking JavaScript

If the HTML references a blocking external JavaScript file in the above-the-fold portion of your page, it might start fetching external scripts first. Scripts that are necessary to render page content are inlined to avoid extra network requests.

• Making JavaScript Asynchronous

By default JavaScript blocks DOM construction and thus delays the time to first render. To prevent JavaScript from blocking the parser we use the HTML async attribute on external scripts.

• Defer loading of JavaScript and libraries such as JQuery

The loading and execution of scripts that are not necessary for the initial page render are deferred until after the initial render to help reduce resource contention and improve performance.

As we keep working on the plugin, there are a few techniques that under progress for the mobile user experience.

• Configuring the viewport
• Sizing content to viewport
• Size tap targets appropriately
• Use legible font sizes

Landing Page Load Speed Optimization Results

So let’s see how these efforts have helped. Here are the results from the comparison tool GTMETRIX

For a landing page which is fairly heavy with images, we were able to:

1. Get to an A grade as per Google’s PageSpeed Tool
2. Reduce Fully loaded time from 5.2 seconds to 1.8 seconds
3. Reduce the total page size from 6.36MB to 1.01MB
4. Reduce the total server requests from 185 to 33. We’re aiming to reduce this far lower from here.

Just to be sure we also use tools including YSlow, Pingdom, Google PageSpeed Insights along with GTMetrix.

So there you go – this is how Sunny Landing Pages has managed to achieve a below 2 second load speed for its landing pages.

While you’re at it – here’s an interesting piece on optimizing page speed for wordpress.

If you have thoughts and suggestions on our loading speeds please do write to us at sunny (at) sunnylandingpages.com

Enjoy Maadi!

Vin