what is unbounce
CATEGORY
DID YOU KNOW WE HAVE A PODCAST?

Become a Better Marketer. Anytime, Anywhere.

Listen and learn on the go with Unbounce’s Call to Action marketing podcast. Tune in and get inspired in the car, while you cook, or at the gym.

11 Ways to Accelerate Page Load Time Before Your Prospects Bounce

Science of Speed
This photo is called “Split second before motorcycle crash” — no joke. Image via Skitterphoto.

The creative is stellar.

Headline and value prop impactful. Hero image delightful.

But peeps ain’t converting.

Because the single biggest conversion killer is lurking behind the scenes, completely untouched.

Which is a shame, because speed (or lack thereof) often has a bigger impact on campaign conversions than any of that other stuff.

The impact of speed

Google experienced a 20% traffic drop years ago as a result of a 0.5 second delay — 0.5!

Think that’s bad? If an ecommerce page fails to load in under 3 seconds, it stands to lose nearly half its traffic. As a result, some of the savviest online brands now load in under a second. Less than one second!

The impact of speed only becomes exacerbated on mobile, where limited processing power and spotty connections are the norm. According to Kinsta’s excellent page speed guide74% of people on mobile would abandon if the page doesn’t load in 5 seconds.

Mobile data
Image via Kinsta.

And this is a world where mobile internet usage is fast outpacing desktop. Where a single conversion event isn’t limited to a single page.

The point? If pages aren’t loading, ain’t nobody converting.

Yes, your headline is important. The value prop needs to be clear. A beautiful page is nice to have. Social proof critical to adding credibility.

But if fast loading times aren’t happening, then landing page conversions aren’t either.

Here’s how to fix that.

(Please note that you’ll probably need some technical help to implement some of the following recommendations.)

Page speed TLDR

Accelerate your page load time with these 11 tips and tricks

Grab the 300-word summary of Brad Smith's actionable post.
By entering your email you'll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

1. Clean up your code

Tidy code doesn’t just make your developer happy, it makes pages load quicker, too.

Reducing the size of site files, especially front-end ones, can have a big impact. Even small issues like excess spaces, indentations, line breaks and superfluous tags can hurt your page load time.

JavaScript is fun. It allows you add little details, like that funny snake or tail that follows a user’s mouse pointer around the screen. Clever! (Sarcasm!) Often, though, JavaScript can be overkill on a landing page. Same with Ajax and other similar extravagances.

Instead, KISS. If you focus on simplicity, there’s (almost) no need for extra stuff.

But if you’re dead-set on keeping your precious scripts (read that in your best Gollum/Sméagol voice), at least load your above-the-fold content first, which is Google’s recommended method.

Gollum
Whoa, someone’s touchy about their scripts. Image via GIPHY.

Find out how your page’s JavaScript is loading with Varvy’s handy JavaScript Usage Tool, and then work on optimizing.

2. Minify HTML & CSS

Jumping on the reducing requests bandwagon, minifying HTML and CSS will help you to package and deliver page data in the most streamlined way possible.

Admittedly, we’re getting out of my comfort zone here. If you’re confident in your technical ability, check out this helpful article. Otherwise open up Google’s PageSpeed Insights, drop in your URL and then send the results to a trusted developer.

3. Utilize GZIP compression

GZIP compression deals with content encoding to again minimize server requests made by your browser. Ouch — that sentence made my brain hurt.

In non-technical terms, GZIP compression reduces your file sizes to enable faster load times. If a more detailed explanation piques your interest, here’s a helpful article.

Use GIDNetwork to see what the current compression on your site looks like now, as well as to get a few ideas of how it could be improved. (Insert helpful developer here.)

4. Minimize redirects

301 redirects are a standard SEO-friendly practice used to tell both search engines and visitors that a page has permanently moved to a new location. It’s a common best practice used when campaigns and sites evolve or change over time, and can help you cut down on broken links or 404 errors.

Computer error
404 errors make everyone angry. Image via Giphy.

Trouble is, too many redirects can also negatively impact speed. So the question is: How many? In typical fashion, Google’s answer is vague — they simply suggest minimizing or trying to eliminate them all together, because they cause extra network trips to verify data (which can be a killer on mobile devices especially).

Screaming Frog can help by quickly identifying all of the redirects currently on your site. In the example below, we found a little over 14% of Runnersworld.com pages contain a redirect. Ouch.

Screaming Frog
How do you get a frog to scream? Toad-al up your redirects.

The key is to dig deeper. What types of redirects are you seeing and why? What are they trying to accomplish? Looking at the example above, there seems to be a lot of temporary 302 redirects from social sharing platforms that can probably be cleaned up to avoid slowing page speed. Here’s a detailed guide from Varvy for more.

5. Relocate scripts

Believe it or not, even script placement can affect load times.

For example, if your tracking scripts are located above the fold or in the <head> of your landing page, your browser will have to download and deal with those scripts before getting to the stuff people actually come to see (like the page content).

It should also go without saying that having duplicate scripts (which is pretty common when multiple people are working on the same page) will slow things down a bit.

And do you really need five analytics packages on that landing page? Probably not. Like most things you’ve read so far, simplify and minimize to reduce the back-and-forth between browsers and servers.

6. Limit WordPress plugins

“Easy.” you say. “Obvious!” you exclaim.

If it’s really so easy, then open up WordPress right now and look at how many plugins your team has installed for simple things like social sharing or tracking. Things that can — and should — be done by a professional so you can completely avoid having to install these plugins in the first place.

The problem is: taking a bunch of third-party tools built by different people and shoehorning them into a Frankenstein-esque page is a recipe for disaster.

If you’d like to diagnose which plugins are worth keeping and which need to be deactivated immediately, you’re not going to like the answer… add another plugin!

P3 (or the Plugin Performance Profiler) will measure your site’s plugin performance and measure their impact on load times. At least you can rest assured knowing that this one will serve some utility while it’s installed.

7. Upgrade hosting

If you have plans to someday make money from your website (so probably everyone reading this blog), paying $3 per month for Godaddy hosting is not going to cut it.

One big reason is that many cheap hosting solutions are shared, meaning you’re sharing server space with many other sites (whose own performance might drag down yours).

That might also mean limited control over what you’re able to affect or change to improve things like site speed. This is especially true for ecommerce sites, which can experience sudden traffic jumps and contain many large media files. Simply put, hosting can make or break your campaign.

If you know what you’re doing, PCMag does a decent job ranking and rating dedicated web hosting services.

Best web hosting

If you’re less sure of what you’re doing or would simply like to not worry about it, a managed hosting option is preferable. This is especially true for WordPress websites — besides speed improvements you’re also getting extra security against external threats plus backups for internal mistakes. The aforementioned Kinsta, WP Engine and Pagely are some of the most popular choices.

8. Resize images

Death, taxes and people not resizing images before uploading them. These are universal truths you can always count on. Also, Mashable publishing terrible articles.

Tweet “Death, taxes & people not resizing images before uploading them. These are universal truths you can always count on.”

Asking browsers to automatically squeeze your original 1200px image down to 600px every time your landing page is loaded, multiplied across all visits for all pages and posts, creates a ton of unnecessary extra work. (Especially on mobile devices with limited processing power and relatively poor connectivity.)

Ideally, resize images before uploading them to the server. If that’s too much work (I ain’t judging, I’m lazy too), at least use WordPress’ built-in tool to resize images for you.

Image resizer

Taking this time-consuming, menial step helps you limit potential errors in mediocre browsers like Internet Explorer, because, well, everything causes errors in Internet Explorer (or whatever they’re calling it these days).

9. Compress images

After resizing your images, the next step should be to compress them to again reduce file size.

This is another often overlooked step, with an infographic from Radware claiming that 45%(!) of the top 100 ecommerce sites don’t compress images.

But optimizing your images can be a low-hanging-fruit approach to quickly speed up loading times, drastically reducing the amount of space — and work — they require.

There are a number of fast, free tools out there, like TinyJPG or Compressor.io, which can significantly reduce file size. The test seen below using Compressor.io resulted in a 73% reduction! Multiply that across all of your landing page images and we’re talking serious results.

Image compressor screenshot

10. Deliver Images with a CDN

See a pattern here yet?

Delivering images with a Content Delivery Network (or CDN) is like calling in reinforcements from servers located closer to your site’s visitors. That means it will try to use the closest ones first, using every trick in the book to cut down on the time and effort required to deliver content from server to a user’s browser.

Popular ones like CloudFlare and MaxCDN can drastically improve performance on highly visual sites.

Image CDN
Image via Cloudflare.

11. External Hosting

Another prudent option is to move large files, like images, audio or video, off of your servers entirely and use an external hosting platform like Imgur for images or Wistia for videos.

While we’ve beat the importance of image size to a metaphorical death already, bigger files like audio and video should almost always be hosted externally.

That’s critical, because rich media adoption is immense. It’s predicted that a whopping 74% of internet traffic in 2017 will be video.

Beyond the performance issues, external hosting providers also offer additional benefits like increased audience reach or features that increase interactions and conversions. Wistia founder Chris Savage lays out a few more reasons why external hosting is a good idea, if you’re interested.

Conclusion

74% of people would leave a site if it doesn’t load within 5 seconds. Which means that even if you’re leveraging all the best practices in the world to get those conversions, people won’t stick around long enough to actually see any of it.

Page speed improvements can range from the basic (upgrading your hosting and removing unnecessary plugins) to the more advanced (minifying files). But anything is certainly better than nothing. Even paying extra attention to how you’re uploading images can go a long way to improving performance.

Yes, implementing all of these changes will be a time-consuming process. No doubt. But it’s also the best way to give your landing pages a fighting chance to convert visitors.

About Brad Smith
Brad Smith is a marketing writer and founding partner at Codeless Interactive, LLC, an Orange County digital marketing agency.
» More blog posts by
  • Happen to be working on a mobile landing page today, useful to have a check-list to hand. One thing I’m considering Brad is switching the logo to a SVG so it can be small in size and look supper crisp on high resolution/retina displays. Do you have any option on this, have you come across compatibility issues using SVG?

    • Just noticed that the Unbounce logo is .svg and using a CDN so double win for unbounce.com I have a feeling what your reply might be now.

  • Al-Falah University
  • I am already doing a lot of these steps and more on top. My images are warehoused for storage in the cache and carefully compressed, despite being retina enabled for quality. I am also using a CDN and a fast VPS with an SSD and plenty of Ram. I am even using some clever tricks for fast font delivery and in speed testing with Pingdom I found my site was in the top 1% of sites on the web, despite lots of images.

    Sadly this was all undone the day I inserted a video through Vimeo that insists on making callouts to their servers, which I gather are for analytics I am not even interested in, however this can significantly slow down the page opening. I am looking at other alternatives now but marketers should be aware that callouts to external services can and usually do have a major impact on page loading speed.

    • Great tip Ashley, thanks for sharing!

      I <3 Wistia typically for external video hosting, but admittedly don't know how it might pose the same problems you're experiencing. Something to keep in mind and research – thanks!

      • One piece of advice I would offer to all online marketers is to run speed tests like the one at Pingdom or elsewhere and become well acquainted with the waterfall results that show precisely how your page is opening and where bottlenecks occur.

        Using the waterfall results opened my eyes and led to lots of changes. It’s also how I pinpointed the problem with Vimeo. There is actually a lazy loading script for WordPress that can delay callouts like this until the page has finished loading but I’m not using WordPress, so this would be trickier to implement in my case. I also need to resolve an issue of render blocking above the fold but it’s not an easy one to fix.

        • If you are using a php framework, async loading javascript is super easy, in wordpress it actually gets really stupid because plugins that modify the DOM become dependent on external scripts which are inserted into the header by default. Sure you can fix the stupidity, but every time the plugin is updated you have to ferret out the out of order calls.

          One thing you can do and I would suggest is to wrap all your external calls into one http request and script anything user dependent directly on the page. That way, the page still loads and the user has no idea that the scripts failed.

          • Thanks Shawn, that sounds a bit complicated but I’ll look to see if any of that is possible.

            I built the site myself using Rapidweaver & Foundation with a system called Stacks and I have a feeling that is controlling the order of external calls but CloudFlare is also in the mix. All I know right now is that the site was blazing fast and then became slower the moment I added the video from Vimeo. Waterfall results clearly show the culprit.

            I can certainly investigate this and it may just be a question of adding a line or two of code somewhere.

            • If you share your URL I will happy to take a quick look and let you know the easiest way to remove that vimeo problem :)

              • If you click on my name that will take you there. Previously it used to load in the blink of an eye without any delay but now it tends to pause for a second or two and then rush in. Looking at the waterfall results that delay is caused by the connection to an external server controlled by Vimeo.

                • Ok the issue is the loading of the iframe on DOM load. If you have a developer friend handy give him/her this link

                  http://www.phpied.com/non-onload-blocking-async-js/

                  Other than that I would say you should look into Wistia for this as you are actually cannibalizing your traffic with vimeo anyway

                  • Thanks Shawn, I’ll look into this. I have Vimeo setup so it doesn’t steal any traffic from my site but the delay is downright annoying.

  • I’m seeing external Gravatar calls causing problems on high-comment posts (I’ve paginated the comments but it’s still and issue). I’ve tried to see if there are ways around using Gravatar but it’s not easy. Also if you use your own uploaded image then everybody’s comment has the same image which makes following threads more challenging. anybody have any ideas for how to speed up Gravatar? I’m using a Gravatar caching plugin but it doesn’t seem to make much difference :(

    • again look to async loading of javascript. Your theme is probably putting the gravatar function in the header, which causes the entire page to stop as they fetch the gravatar.

      Move that function to the footer, the bottom of the DOM and the user will have a much better experience. Everything that is needed to be seen by the user will load instantly and the rest of it will load as they consume the content above.

      By the time they get to comments, gravatars have loaded.

  • Great piece on a complex topic.

    Excellent job making it genuinely manageable and useful.

    Oh … and geez this was timely. I just posted a VERY similar piece on Content Marketing Institute. http://contentmarketinginstitute.com/2016/04/tips-tools-speed-site/

    (Hopefully it’s too shamelessly self-promotional to mention that in the comments.)

  • Really informative and well written post. Can I add a couple of things for those people who can’t afford or don’t know a developer?

    Google insights for speed is your absolute best friend in this situation. Not only do they tell you specifically how to fix the problems on your page, they literally give you the files you need directly from your own website.

    Magic you say? Bullshit detector going off? Muahaha, pull back the curtain and!

    https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Funbounce.com%2Flanding-pages%2F11-ways-to-accelerate-page-load-time-before-your-prospects-bounce%2F

    http://imgur.com/D33wCI3

    Do you see that wonderful, sexy, beautiful link array below the passed rules?

    Oh yeah, look at it. Now look back here. Now look back at it.

    Them there be gold in the hills….

    So, you download all those nifty files that are copied and minimized, then saved as the current file name. Open your handy dandy FTP client and find and replace said files.

    This will take an average person about 5-10 minutes the first time and like 30-45 seconds each time after.

    Just doing this will decrease your load time significantly across all browsers.

    Also setting expiration dates in the long term future and removing version requests from your scripts will significantly increase your load time, but that may be outside the scope of a marketer.

    Tl:DR google insights for speed gives you all you need to fix almost all problems

    • Love it Shawn – thanks for sharing your insight! Great actionable tips for us semi-technical folk :)

  • I cannot download the guide for some reason. The button does not work when I click on it.

  • Page load time matters a lot, many people leave webpage because it takes much time to load. Thanks for sharing your views to decrease page load time.

  • Such a nice post
    Searching for cheap and reliable services for Fifa Coins.
    Get it with us….
    http://fifacoins4sale.com/

  • Hello Brad!

    Thank you very much for this great post! Accelerating your page load is important; it can be the cause of bounce rate and traffic drop to your site. One of the best things to do is to clean up your code. It is not just for accelerating your page load but also to help your website to rank up in the Google.

  • Hi Brad, first of all thanks for this amazing blog. Every point you have mention is very important and useful. We have many sites with high bounce rate and low in traffic. And after reading this blog I think we need to accelerate the site loading speed to improve bounce rate.

  • this is useful

  • Now what I’m going to try and do is cause you to wait for
    my next article. You may even appreciate electronic multichannel
    sorround sound systems, HD video content and Blu-ray online video media by way with this particular
    setup.

    com which is really a cabana with UV protection of 60 to
    maintain sun off your skin. Wireless range extenders are home networking devices that assist create a larger area for your network’s signal.
    Wireless wifi range extender reviews The power
    output may be the same to all directions meaning that it’ll be
    perfect for usage in homes where you’ve got one computers
    in various rooms and so on different floors.

  • Hi, Smith!
    Really great, informative and well-written article. accelerating page load time is very important. People don’t have enough time to waiting for your website to load, instead of waiting they prefer, leave your website and trying for new one. each and every point you mention in the post is helpful and very important.
    Thanks for sharing your views.

  • It’s really help. But I still have question about third party script from ads. some times it’s slowing page load for my site.

  • Hi Admin,
    Nice post.Thank you for sharing the information.I really enjoy rad that topic.

    Toyota Innova Hire in Chandigarh

  • Great post as always. Although it is a shame to not see https://www.keycdn.com mentioned. Half the cost of MaxCDN, more POPs, HTTP/2 support and Free SSL. But some awesome tips on reducing your bounce rate none the less.

  • how to create a word press with google terms and polies http://www.getinfocenter.com

  • However, few specifications are slightly completely different from a normal digital camcorder, particularly the lens and battery.
    The cameras function and menu buttons are typically conveniently located on the correct hand side of you.
    Nikon dive camera It houses the look stabilized 3x optical zoom lens therefore it may
    relocate and out so we wonder how Olympus manage to acquire their compacts to zoom and never use a fat front finish.

    We have underwater video cams, and helmet cameras for ones adventure.

    For feet water shoes work the top, no flip-flops from the raft.

  • Great article! Page load time is more important than a lot of people would think. I trust soulpepper digital marketing agency with all my website needs and they taught me the effect it can have on traffic and acquisition.

  • I apply your tips on my blog and got better results.

  • Dear Brad,
    Thanks for your outstanding post regarding page load issues for wordpress site. It will be great resources who engage with wordpress site development.
    You already illustrated core task for increasing speed for wordpress site. According to me, selecting proper hosting, light theme, minimize plugins are core task for getting super fast wordpress based site.

    Thanks
    Ben William

  • Informative article on increasing page load time. I agree with the hosting the tips. Bluehost India is one of the best hosting provider which largely helps bloggers and online marketers with min down time and support. Few hosting platforms lag in support when there is huge traffic flow to the site. all these factors would play a major role in site performance. Thanks for sharing.

  • Hi Brad,
    Page load can be a very frustrating thing for me to optimise – it’s like their are so many variables to test and then see which one makes the biggest marginal improvement.
    Thanks for these tips.