Making Landing Pages Lighter and Better-looking

Visuals of a landing page

No landing page optimization would be complete without working on visuals. Images weighing a few MBs are not a rare sight, nor are landing pages that are completely unprepared for browsing on mobile devices.


These are cardinal sins in landing page design, so let's focus on cleansing your landing pages and making them as lightweight as possible.

Start with image optimization

It's one of the most prevalent causes of slowly-loading pages: too big image files. Get back to PageSpeed Insights (or whichever tool you've picked during the previous lesson) and find the "Largest Contentful Paint" section (or it's equivalent) – that metric tells you how long it takes to load the largest element (which probably is an image or a video). I've seen cases where it took more than 20 seconds for this!

Now imagine what happens if this is the primary image of the page. When visitors open the landing page, they see plain text for 20 seconds before the graphic file finally loads. That's simply unacceptable since people tend to leave pages if they don't load in 5-7 seconds.


Example of image optimization

Image compression

Optimizing images is almost always a good plan. And when I'm saying "optimizing," I mean "compressing."


Find an online compression tool or, if you have access to professional graphic design software, such as Adobe Photoshop or CorelDRAW, you can compress your files there. It will significantly reduce the size while maintaining the original quality of the image.


During this step, the other thing you can do is make your images a bit smaller – minimizing the dimensions and, thus, making them lighter. Still, it will also affect the quality, especially when you allow people to enlarge pictures upon clicking, so proceed with caution.

Check your video hosting

That's a rare situation, but if you have videos uploaded directly to your landing page, it's a great idea to host them somewhere else (YouTube, Vimeo) – it'll unburden your server and make your landing page load much faster.

Responsive Web Design is a no-brainer nowadays when people use mobile devices far more often than desktops. Almost all landing page builders allow you to edit the mobile view of your landing pages.


In Landingi, for example, it's as simple as clicking "Rebuild Mobile" to optimize the layout of your landing page to display correctly on mobile devices. Truth be told, though, it's always a good idea to check if it looks exactly as you hoped it would.


Equally important, you may give up on some elements visible on the desktop and not show them on mobile devices. Unburden your landing page if you want visitors to stick around – keep in mind that users are even more likely to abandon a slowly-loading page while using mobile devices.

Pay attention to RWD

Find some elements to remove

Seriously, landing pages are often overwhelming. It comes from great intentions – marketers want to convey all the information they have to potential customers, but it turns out poorly most of the time.


Include only the most essential benefits for your target audience. If it's too broad and you can't decide which benefits are more critical for them, there's one thing you could do: create another landing page.


Embrace the opportunity of making clones of your landing pages in seconds and take time to adjust both of them to meet their respective recipients' expectations and address their problems.

People have only so much time to spend on your landing page (they could have been scrolling through memes at that time, appreciate that). Make sure that all the crucial pieces of information are above the fold (which means on the first visible screen, with no need to scroll down for them).


What should you place above the fold? A headline (remember message match?), value proposition (why are your visitors here and what would they get if they stay or click the button?), a Call to Action, and (optional) a form.


To sum up, I'm pretty sure that if you look hard enough, you'll find some unnecessary elements on your landing pages. Remove them; nobody will shed a tear over them. Make sure that your landing page provides a straightforward and quick experience.


If you want people to gather in-depth knowledge about your product or service, make contacting your company a landing page's goal. You may then heat a newly acquired lead with direct contact and share (almost) as much information as you need.

Short landing pages don't have disadvantages

Share Your Thoughts and Get a Free Landing Page Checklist!

Let us know what you think about Landing Page Academy, and we’ll send you a handy Landing Page Checklist in return. The checklist will help you make sure your landing page is ready to rock!

DOWNLOAD

FREE PDF

Takeaways

1. Compress all the images you have on your landing page…

2. ...but before you do that, make sure each of them is necessary…

3. ...and remove those which aren't.

4. Apply the rule above to every element on your landing page.

5. Cut the landing page to make the experience short and engaging.

Make a Copy on Your Landing Page More Effective

Next lesson

Landing Page Academy

More lessons

What's next?

Lesson five will be about copy optimization. Words can be powerful, but trying to say too much at once turns into gibberish. We'll try to fix that and create simple, understandable, and engaging content!