Optimising Your Landing Pages: A Developer’s Perspective on Lead Gen

The cliché says that you only get one chance to make a first impression – however this principle is absolutely key to building effective website landing pages.

In crowded search or social media markets, potential customers will reach your landing page having taken in minimal information about your product and brand. When they click your link, advert or tweet, suddenly they are moving from the world of character limits and generic interfaces to a domain where you have control over the messaging, layout, performance and functionality.

The aim of landing page optimisation is to make that transition fast and painless. In most cases, a user hitting a landing page is trying to make a decision – they are ready to make a judgement and it will probably be a snap one. The ‘back’ button is very tempting. There are other tabs to explore, and if they don’t find what they’re looking for quickly, they’ll almost certainly be looking for it on a competitor website in just a few seconds.

Copywriters, designers and strategists will contribute to this optimisation by making sure the written content, images, and even the structure of the page explain what you are offering (as well as who you are), reducing distractions and giving the user a clear call to action. The developer’s role in this is to ensure this content is served in the most efficient and effective way possible.

The need for speed

Someone looking to make a purchase might click several links at once with the intention of comparing offers, so a fast-loading page could grab their attention ahead of the competition. Even if yours is the only site they open, you don’t want to annoy them by making them wait or slowing down their device with heavy page load.

Speed also has the doubly whammy effect of improving a page’s position in search rankings – search algorithms aim to preempt the user’s judgement by analysing page performance – so it is almost always a key development consideration for landing pages. Sometimes a developer will need to push back if what has been designed is going to need a five-second loading screen; elaborate animations and high-resolution photography have their place, but a landing page is probably not it unless you can find a way to make it work at pace.

Techniques for achieving a strong page speed score include:

Minifying code to reduce the size of files the browser needs to download to display your page.

• Avoiding loading stylesheets and scripts that are used elsewhere on the site but not needed on that specific page.
• Optimising image files to use modern compression techniques and lightweight file formats (WebP is the current format of choice, though JPG and PNG are still sometimes appropriate).
• Including multiple versions of images suitable for different screen sizes (specified with the ‘srcset’ attribute – the browser picks the best one based on the choices you give it).
• ‘Lazy loading’ images as the user scrolls the page (see below for some important caveats on this).
• Using page caching to save the server work each time it loads the page.
• Hosting images and other assets on an external content delivery network (CDN) to spread the burden across multiple servers.

Steady as she goes

Sometimes striving for speed has unintended consequences. Lazy loading, for example, can cause problems if the main image in the ‘hero’ section (typically the part of the page the user sees first) has this feature enabled. Lazy loading pauses the download of images until they are actually in view on the screen, but this is going to delay your most important graphic appearing – by pushing it to the back of the queue, the browser will load everything else before it loads the image, leaving the user staring at an empty space.

This contributes negatively to a metric called Cumulative Layout Shift (CLS), a figure used by Google and other search engines to evaluate pages. It refers to changes in the screen layout as different elements appear. The <img> tag is the best example: if no size is specified on the element, the browser won’t know how much screen space is needed until it has loaded the image file; it will take up a minimal area initially, then expand once the browser knows the correct height, pushing everything below it down the screen and possibly out of view.

Website content jumping around like this is bad for anyone trying to take it in and is another factor in the snap judgements people make about your site. At worst it can make the site look broken and this reflects badly on the brand. Fortunately these layout shifts are avoidable with modern CSS techniques like Flex and Grid, but it requires a solid device testing program to ensure a rule set for one screen size or type doesn’t compromise another.

Text also contributes to CLS. Large font files can delay text appearing (or worse, have it flicker between the browser’s fallback and the font you intend to use) and sometimes alternatives should be considered. Remember that font files get cached by your browser so will load quicker for you than for a user downloading them for the first time.

As well as the visible structure, developers must consider the technical structure too. We can look at the scripts required on the page and prioritise or defer them depending on what’s needed for the ‘above the fold’ content – if there’s an embedded video in the hero section we need to load the appropriate script as soon as possible, but if the video is not visible until the user scrolls then wait to load it. Internet speeds these days mean lazy loading assets on scroll creates a steady flow of traffic, but the tops of the pages need to be content expressways.

Less is more(ish).

We mentioned in the introduction that other members of the team will be responsible for reducing distractions on the landing page, but a developer can have an impact here as well. When building templates powered by a content management system (CMS), creators should have the ability to toggle items in the site header to achieve a minimal version of the regular template. At Uplift we would typically add additional options to WordPress allowing the main navigation and calls to action to be hidden so the user is focussed on the desired outcome of that landing page.

Developers will also be involved in post-launch A/B testing, helping copywriters and strategists test different versions of the content to see which gets the most responses from potential leads. Tools such as Convert and VWO can alter content on the fly, serving alternative copy, images or links to a sample of visitors, but it might be more efficient to build entirely different versions of the page in the templates or stylesheets.

A page involved in lead gen will be subject to constant analysis with quantifiable results. If Cost Per Acquisition (CPA) starts to increase, expect requests for changes to parts of the site with ads pointing at them. For this reason, landing page development should always anticipate the evolution of the template and content.

This opens up a whole debate about whether such pages should be built with a fixed structure or allow for modular content that can be re-ordered, added and removed within the CMS. This decision should be made early in the project and take into account the long-term strategy. A modular approach may provide flexibility, but could that compromise consistency or performance? There’s no point agonising over the loading speed of the hero if a freelance copywriter replaces it with a different element a few months later.

—

When building landing pages, developers are responsible for many of the technical considerations of the project, but they should also be aware of the wider picture. It’s easy to view a single page-build task in isolation, but lead gen content is always part of a wider journey that starts several steps before the potential customer arrives on the site and – if you make a good first impression – potentially continues long afterwards. A holistic approach is required to keep user experience, business goals and marketing strategy in mind throughout the development process.