Thursday, April 7, 2016

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 submitting your email you'll receive more Unbounce conversion marketing content, like ebooks and webinars.

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 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.


No comments:

Post a Comment