3 Straightforward Tips That Improve Landing Page Mobile Speeds
Your perfect landing pages isn’t converting. What went wrong?
You created the perfect landing page. And then, it doesn’t convert.
To your dismay, you realize that your page speed score is ABYSMAL.
Dreadful!
Shameful!
Deplorable!
Other complicated words!
So what can you do?
Let’s break down the most common reasons:
- Your page is demanding too many round trips to the server.
- Your files are HUGE!
- You’re trying to do everything at the same time.
We don’t have time to lose, you have a landing page to save!
1) Your page is needing too many round trips to the server
So here’s the secret of the internet…
Every image, every sentence of your copy, every color and every line of code that your page is made up of — All of that is saved in a server somewhere.
When your browser accesses a website, it’s not actually “accessing” the website. (At least not in the way you think it does)
What it’s actually doing is arriving and DEMANDING that the server send over the files that make up your site.
(Although we programmers are a little nicer, so we prefer to call them requests.)
Server says “sure” and sends over the files.
What files could those be?
- The html file that has the words that’s on your page.
- The css file that has all the pretty colors and placement of elements on your page.
- The possible JS file that shows off that cool new thing that only YOUR landing page does.
- And then one image.
- And then another.
- And then another.
- And then that weird stylish font you payed $82 bucks for that’s only used on 3 other pages on the internet.
- And can’t forget about that background video that’s above the fold that makes your page look so dynamic.
- And then another 455 elements that I’m choosing to not type out.
Your browser grabs all those files and uses them to build up your page locally on that person’s computer.
And thus — a person “accesses” a page.
But every request takes time. Yes, they’re milliseconds, but those milliseconds add up.
When this happens, it just means that you’re making too many requests.
So here comes the first tip…
Tip #1 — Make less requests, cease the unnecessary and (in most cases) combine requests when possible.
Things you can do:
- Cut out the fat — Use less images and videos that aren’t needed.
- Don’t use weird fonts that users have to download.
- Remove plugins/files that your page doesn’t use/need.
- Combine CSS/JS files. It increases the size of some files but you end up making less requests.
2) Your files are HUGE!
Now that we know that our browser has to do a bunch of requests to the server, there’s something else we have to realize.
“Oh dang, if I upload a really high quality image or video, that means their sizes are bigger too”
Which means those files take longer to download.
Which also means it takes longer to load said files on your page.
Boom — high bounce rate.
No bueno.
This leads to the second tip…
Tip #2 — Compress files where possible and replace heavy plugins with lighter alternatives.
Things you can do:
- Compress images and videos before uploading (The difference is rarely noticeable. Test videos first though.)
- If you use plugins (like in WordPress), try to find lighter alternatives.
- Minify CSS/JS files (removes whitespace, strips comments, shortens variables, etc)
- Prefer to use videos over gifs. They’re better quality and they only start downloading after the user clicks play.
- Don’t use huge images that are later resized onto your page. Adjust size first and then use them. The idea is to not use image sizes you don’t even use.
- If there are images that show up on desktop but NOT on mobile, by default, they download anyway. There are workarounds to avoid this.
3) You’re trying to do everything at the same time.
Which basically means — your page is trying to download every file possible, all at once, one after another.
And while yes, we can speed things up by lowering the amount of requests and the size of files…
Another option might be to space out all the downloads.
What if didn’t have to do download everything at the same time?
Which brings us to the third tip…
Tip #3 — Focus on showing SOMETHING to your lead as quickly as possible. Download first only what they immediately see. Do the rest of the requests later.
Ways to do this (They’re more code heavy though!):
- Use lazy loading for images — Technique where images at the bottom of the page are only loaded once your lead has scrolled down enough to start the request process.
- Defer or async css/js files — Don’t make leads wait for unnecessary files to download before showing something. In the case of CSS, there are a few tools for in-lining only what’s above-the-fold into your html.
- Avoid redirects! If a user clicks on a link and it has to do a redirect to your actual landing page, that adds to wait time for the user.
Hopefully these tips will help your pages speed up.
Other extra tips to consider:
- Create your pages with mobile in mind first. Your pages are most likely to be viewed on a small screen, so if you develop for phones and speed first, you’re less likely to run into problems later on.
- Use your dev-tool’s lighthouse feature to measure your page speed. It’s built into your browser already and can tell you exactly what you can do to fix the biggest problems.
- Use a CDN if possible. It stands for Content Delivery Network and helps speed if your servers gets easily overwhelmed. Most builders already have a set-up ready for their users, but if you’re developing for yourself it’s important you consider one if you have long-term goals.
Want to take a peek at what makes Landing pages convert?
My free landing page swipe file includes annotated examples and studies from real landing pages on the web.
You get it as a bonus for signing up to In One Snap: weekly insights for marketers, designers and devs who want to increase conversions on their landing pages.
