You Need a Faster Website. Here Are 8 Ways to Achieve It Right Away.

The average size of a web page has ballooned as of late, with statistics showing that total transfer size (which includes the page itself, along with any stylesheets, scripts, fonts, or media your browser downloads when you visit it) has nearly tripled over the past five years alone:

chart
Source: HTTP Archive

Even more, the trend doesn’t seem to be slowing down, as more and more sites are making liberal use of background videos, cinemagraphs, and large hero images. Content providers are less and less concerned about making their visitors wait for their pages to load, as high speed internet and 4G-capable mobile devices have become ubiquitous in today’s day and age; as long as they can deliver an enticing, unique experience when the download completes, they’re not so worried about the extra few seconds it might take to get there.

But maybe they should be.

Studies in recent years demonstrate that users tend to abandon a website if it takes too long to load (and will all also be less likely to return to that website in the future). As many as 47% of users expect a website to load within 2 seconds, and 40% will leave if it takes longer than 3 seconds. And this is effect is even more pronounced for mobile users (who account for over half of web traffic in the US), where as many as 53% of users will give up if a page takes longer than 3 seconds to load, while the average load time over a 3G connection is a whopping 19 (!) seconds.

The fact is, slow-loading pages kill pageviews, interactions, and conversions. And if that alone isn’t enough to convince you, remember that Google takes website speed into account when determining its search engine rankings.

So does this mean your website has to be boring, with only a limited number of tiny filler images?

Of course not. Now, I’m not saying that you should load your pages up with massive media files, but there are plenty of things you can do to ensure that your site loads quickly, even while delivering a remarkable, visually-exciting product. Here are eight of them:

1. Optimize Your Images.

It seems so simple, but I’m amazed at the number of sites that include excessively huge or unoptimized images. Having large images on your site is one thing, but having images that are ten times the dimensions at which they actually appear on your site (and contain all of the unimportant metadata created by your digital camera) is just absurd.

Whether you use FileOptimizer (Windows), ImageOptim (Mac), or even just plain old Photoshop, your photos should be scaled to reasonable dimensions and compressed, with all unnecessary metadata removed. If you (like me) use WordPress a lot, I recommend the WP Smush plugin to help automate this. If you’re a developer, writing good media queries and using the HTML5 srcset and sizes attributes to make your images responsive can also be a very useful way to avoid unnecessarily large images being downloaded:

<img alt="Responsive Image" src="https://e4rpna2pel-flywheel.netdna-ssl.com/images/test.png" srcset="/images/test@2x.png 2x" />

2. Defer Loading of JavaScript

If you’re including numerous JavaScript scripts in your <head>, you need to be careful to ensure that they aren’t keeping the rest of your page from loading. By default, a visitor’s browser will try to completely download all of the .js files in the <head> before even beginning to parse or render the <body>. If one of those scripts is taking a long time to load (or you have too many of them), that’s going to significantly impact your page load times; users will see a blank page for too long.

One solution is to place your JavaScript files, whenever possible, near the bottom of your HTML (ideally right before the closing </body> tag). That way, the entire page will be parsed before the browser begins to download the JavaScript. But with modern browsers, you can also add either the “async” attribute (to make a parallel request without stopping the browser from parsing the page) or the “defer” attribute (to do the same, but wait until everything on the page has been parsed before executing the script) to script tags as well:

<!-- Don't stop parsing, run script immediately -->
<script type="text/javascript" src="https://e4rpna2pel-flywheel.netdna-ssl.com/myscript1.js" async></script>

<!-- Don't stop parsing, run when parsing is finished -->
<script type="text/javascript" src="https://e4rpna2pel-flywheel.netdna-ssl.com/myscript2.js" defer></script>

3. Combine & Minify Scripts & Styles.

Reducing the number of requests your website makes can have a sizable impact on its performance, so you should combine your CSS and JavaScript into as few individual files as possible (you might also consider using sprites, base-64 encoded images in your CSS, or icon fonts in place of image files). I also suggest minifying your CSS and Javascript files, which reduces your code to the fewest number of characters (and thus the smallest filesize) possible.

There are a number of great solutions that can pretty much automate this for you; I use CodeKit (a Mac app) since I develop sites locally, but there are also solutions that can achieve this on your website itself (such as the Autoptimize plugin for WordPress, which can also minify HTML and move your scripts and styles to the footer— see #2 above).

 4. Use a CDN.

A CDN (content distribution network) is a system of servers/datacenters that are distributed over a wide geographic area, providing content to the user much more quickly than the traditional single server or datacenter model. You could either host your entire website on a CDN, or just use it for static assets like videos, images, and scripts (like me).

I won’t endorse a specific CDN solution here, but MaxCDN, CloudFlare, Amazon Web Services and Rackspace are some of the most prominent providers; setting up may be a little intimidating at first, but it’ll be well worth it in the end, especially if your site is well-trafficked by users far away or if you’re serving up lots of media like video and large images.

5. Make Sure You’re Using Gzip Compression.

This is pretty standard these days, but you’ll want to make sure that your web host (or your server, if you’re your own host) supports Gzip compression, which significantly reduces the size of your web page when it’s being downloaded by the a visitor’s browser. You can run a quick test to see if you’re already covered, and if not, you should either contact your host, switch to a new one, or follow the instructions to enable Gzip yourself.

6. Leverage Browser Caching.

Make sure your host (or your web server configuration) tells web browsers to aggressively cache static resources. If you’re running on Apache, you can typically accomplish this inside the .htaccess file. I won’t go into detail about how it’s done here, but there are already plenty of resources that should have you covered.

7. Utilize Server-Side Caching.

The browser cache is not the only cache in town. What about serving your pages more quickly and efficiently? What about caching your database query results in memory? Not only can using things like a page cache (e.g. Varnish) and an object cache (e.g. Memcached) reduce server load (making your site much more scalable and capable of handling traffic spikes), but it can also help your overall performance from the user’s perspective.

If you don’t want to hassle with managing your own production environment (what developer or site author does?), the W3 Total Cache plugin for WordPress is a popular choice, but some managed hosting providers (such as WP Engine) offer even better alternatives yielding even more improved performance (yes, I use WP Engine, and I can’t recommend them enough).

8. Test Your Site Speed Now and Then.

Finally, you can’t fix poor performance if you’re not aware of how your website is performing (and what issues you might be able to fix) in the first place. I recommend using GTMetrix or Pingdom to test your website performance at least every few months. Not only can these sites give you a good idea as to how long it takes your pages to load, but they can provide specific recommendations to improve your performance. Yes, Google does offer a similar tool with PageSpeed Insights, but at the time of this writing, a lot of their recommendations aren’t all that practical (e.g., deferring all CSS that isn’t required for “above the fold” content, or leveraging browser caching for Google’s own analytics.js script), and may not really affect your performance too much.

No matter which tool you use, however, don’t get caught up on attaining a perfect score in every nit-picking category, but instead focus on reducing your average page load time (the thing that really matters) as much as possible. In an ideal world, I’d recommend aiming for 2-3 seconds or less, but any reduction can make a  real difference to your website’s engagement (so if your home page takes 6 seconds now, try to at least get that down to under 4).

Remember, your visitors expect speed, and the more you can do to remove their frustration, the more effective your website will be. Even if you personally couldn’t care less how about quickly your pages load, you almost certainly care about your traffic and engagement (whether your conversion goal is to sell products, collect information, or receive phone calls). By following some (or all) these suggestions, you should see some real and positive change in those areas, ultimately contributing to your organization’s success. And hey, be proud about that, because you’re also making the web a better place.