How landing page optimisation ensures efficient delivery of assets

Have you ever been half way through loading a slow website and decided to abandon ship and navigate elsewhere? According to this statistic from https://kinsta.com/learn/page-speed/, 74% of people viewing a page on mobiles, would abandon the page if it does not load in 5 seconds. Landing page optimisation is vital to changing this figure for your website.

To put this into perspective, for example if 1000 people are loading up the web-page, an eye-watering figure of 740 people would abandon the journey. This leaves only 260 people continuing onward. This may leave you pondering, how can I use landing page optimisation so my landing page efficiently delivers all of the assets in a short amount of time?

Well our team at Xigen has done extensive research into landing page optimisation, so you don’t have to. Here’s how to ensure your delivery of assets are efficient.

Minify your code

By reducing the size of the files such as JavaScript and CSS files that are loaded in on the front-end can drastically reduce the page load speed. This is one of the most effective techniques for optimisation in the market, especially for landing page optimisation. There are many free tools and applications that specialise in minification and compression. Some of our favourites at Xigen are:

• CSS Minifier (https://cssminifier.com/)
• JSCompress (https://jscompress.com/)
• TinyPNG (https://tinypng.com/)

Prioritise visible content

You may think, what is “visible content”?

Visible content is the section of a webpage users will see when the page loads, before they begin scrolling. This is also referred to as “above the fold content”. Websites that seem fast to load are usually just as large as websites that load slowly, it’s just that the above the fold content has been prioritised to load first.

Therefore it leaves the user to believe that the site loads quickly. Typically, designers usually have the page designed in the layout of having content which grabs the user’s attention being placed above the fold. This leads into another commonly used tool to decrease page load speed – especially effective in landing page optimisation, “Lazy Loading”.

Lazy Loading

On many websites, when users open a webpage; all of the page’s contents are downloaded and rendered onto the screen at the same time. The benefit of this is that it will allow the browser to cache all of the web page content (for quicker load speed in the future), however there is certainly no guarantee that the user will view all of that content which is downloaded and will most likely come back with red flags when running through landing page optimisation techniques.

A key example of this is, if an entire gallery of photographs was downloaded but the user only looks at the first image in the gallery, this will result in memory and bandwidth going to waste by loading content which has not been viewed.

As an alternative to loading all of the content when a page is accessed, the content can instead be loaded when the user has accessed that part of a webpage which requires the content using lazy loading techniques.

You may be wondering if there any major examples of the use of lazy loading, we can be certain that there are all sorts of examples on the web. Some big names such as Google and WordPress use lazy loading in different ways. The different ways that Google and WordPress use lazy loading certainly gives a feel about how these techniques can be used differently, depending on the end goal.

Infinite Scroll (https://en.support.wordpress.com/infinite-scroll/) provides a continuous loading effect whilst the user scrolls down the page, with more and more content pulling through. Word press states that users read more blog posts when the Infinite Scroll solution is enabled.

Google, on the other hand takes a different approach with the lazy loading. It uses the lazy loading for its image search results. So, when the user scrolls down through the images, the placeholder images are replaced with thumbnails. Once a certain number of images are displayed, a button appears (which allows the user to load more images).

Landing page optimisation is an important process to go through when building landing pages. Landing pages are the realm of the marketing and advertising for companies, as they are commonly built for a single focused objective. A lot of marketing and advertising goes into promoting the landing page, so therefore it is quite common for these pages to have a high proportion of photos and graphics to show off the main product. This is why minification of scripts and stylesheets, compression of images and lazy loading of content can be hugely effective in keeping loading speeds low and ensuring the efficient delivery of the assets to the end user.

Lastly, landing page optimisation is hugely effective in keeping conversion rates high and user bounce rates low. The developers at Xigen are always running their work through landing page optimisation techniques at the end of a landing page build. We make sure that our client’s landing pages are loading and producing data as efficiently and effectively as possible, using the landing page optimisation techniques mentioned above.