As we both expect and need things to be faster and faster in every aspect of our lives, even a slight delay in a landing page loading will cause us to lose faith, trust, or simply leave.
Make sure your landing page loads quickly. How quickly? 2 seconds or less, with a strong emphasis on less.
But remember, load time can vary greatly based on a number of circumstances. There’s a world of difference between a fast work connection on a fast laptop vs a slow mobile connection on an older phone.
If you’re always working on your site from the same device and location, your site might seem faster than it is to everyone else.
And load time has a direct impact on conversions. Amazon found that one in four users will abandon a site if it takes longer than 4 seconds to load, and an increase in load time of just one second could cost them $1.6 billion a year. (source)
Remember, slow page load times affect 100% of all visitors, so any improvement benefits everyone.
How to fix it:
Step 1: Find landing page speed issues with WebPageTest
It’s really hard to know what the issues are without some sort of baseline, and WebPageTest is the best tool to help you discover your landing page speed issues.
Just paste your landing page URL into WebPageTest and not only will you get a time estimate for load time, you’ll also see how every element of your page impacts load time.
Save the URL for this first test, as this will be your reference to see how future changes affect the load time.
The results from WebPageTest can feel a little overwhelming at first, but I’ll show you how you can use it to fix the most common issues below.
Step 2: Optimize the images on your page
This is, by far, both the most common problem and the one with the highest return on investment.
The two biggest issues with images on a webpage: image sizing and image compression.
Image sizing issue is when an image is displayed as much smaller than the actual image is. While complicated by things like retina and responsive images, the real issue is more about accidental re-size displaying of images.
How much of an issue can this be? I’ve seen preview pages that had thumbnails of individual images, and each one was about a 100 times larger file size than they needed to be (40KB resized in an image editor vs 4MB resized via CSS), loaded regardless of whether the user wanted to see the larger version.
WebPageTest can help, as once you’ve analyzed your page, you can then go to Details and sort Request Details by Bytes Downloaded, which will show you the largest files used for your landing page, including oversized images. Once you find them, use a program like Photoshop or Pixlr to resize them, then replace the large images on your site with the new, smaller ones.
The other issue, image compression, is actually the bigger problem of the two, because even if you have images at the right dimensions, they might not be properly compressed.
Use ImageOptim which takes care of all compression settings for you automatically. Just drag and drop your files into ImageOptim for optimal compression. Then replace the old image files on your landing page with the new compressed versions.
Don’t have a Mac? Use Compressor instead.
Step 3: Invest in good website hosting
Too often, website hosting is seen as more of an expense than an investment. But if you use really slow shared hosting, all of the other stuff I’m telling you to optimize will not make a difference.
I’ve had discussions with founders and business owners who didn’t understand that a 12 second load time could be dropped to 2 if they paid an extra $10 per month, but then marveled at the increase in key metrics once they made the switch.
If you’re using a service that provides hosting for your landing pages or websites, make sure they take speed and uptime seriously.
Step 4: Use caching if pages are dynamically created
Many popular Content Management Systems (CMSs), such as WordPress, create each page of the site dynamically, meaning every time a new user lands on that page, server resources are used to construct that page new, making sure that all content is fully up to date.
While this is fine for real-time products, for more static pages, like landing pages, pages don’t need to be rebuilt each time someone visits it.
For those pages and sites, caching can be used, in which the server generates the page one time, then stores a static copy to be served to future visitors until the page is edited.
Those static pages not only load significantly faster than their dynamic counterparts, it also allows your existing hosting to scale much farther, so sudden traffic spikes or heavier overall traffic is less likely to slow your site or crash it.
Setting up caching can be a very technical process, but if you use a more popular server configuration or CMS, there are often out of the box solutions to help you set up caching.
For any site using WordPress (such as UsersThink), use a plugin like W3 Total Cache.
Step 5: Remove anything extraneous from your pages
Often when you’re first setting up your landing pages, you’re experimenting with a number of different things, from designs to tools to extra bits of code that we comment out. Over time and after many iterations, a lot of stuff you no longer need piles up in your landing page.
This might seem like a minor issue, but you’d be surprised how many of those little extras you no longer need.
Consider this spring cleaning for your landing page.
Step 6: Use a Content Delivery Network (CDN) for static files whenever possible
A content delivery network (CDN) is a system of servers placed at multiple geographical points, designed to send static files to a user as quickly as possible by being as physically close to a user as possible (physical closeness of servers to users reduces the number of bottlenecks in transmitting data).
By taking many parts of your website and putting them on a CDN, your site will load faster, it will move strain off of your servers, and your hosting costs might even decrease if you have heavy traffic.
If you have trouble setting those up, or there are some sort of restrictions around you using those services with your landing page, you can always build a poor man’s CDN by setting up a storage bucket in Amazon S3, storing your static files there (then making sure the files are publicly accessible), and using those files for your landing pages. This won’t be quite as effective or as cheap as a solid CDN, but it can be setup quickly, and will help offload the files from your hosting server.
Step 7: Treat this as ongoing improvements and experiment
The issues I mentioned above are the most common, as well as being the issues, when fixed, that have the biggest impact for the least amount of work, but that doesn’t mean these issues will cover 100% of the things causing slow page load times.
The goal is to always make your page load faster, but it doesn’t have to be something you do only one time.
As long as you keep the link to the initial test, you can see how each change you make affects load time and page size, and adjust things as you go.
But any decrease in how long it takes your landing pages to load will result in more conversions, so keep iterating to get them as fast as you can!