Daily designer news

Posted: 29 Apr 2013 04:52 PM PDT

Many studies (PDF) have proved how important speed is to a successful site, and the results are convincing: almost a third of users won't hesitate to abandon a site if it takes over five seconds to load. With these findings in mind, most designers know that a slow website can be a killer to conversion rates. But they often wipe their hands of the issue, resting all the blame on bad back end practices.

So it might come as a surprise that the majority of the issues that lead to poor performance are front end problems. Your CSS, Javascript, images, and HTML all need to be optimized to get your site up to scratch. This can sound like an intimidating task at first, but there are many useful tools you can take advantage of to simplify the process. First, use a site speed tester to find out how slow your website is at present. Then browse through the tools listed below to find out more ways to accelerate your site.

1. Clean up your PNG files with ImageOptim

ImageOptim is a handy little tool that quickly strips your PNGs of irrelevant information like color profiles and comments, reducing the file's weight in one simple step. All you have to do is drag and drop a file into the window, and ImageOptim will show you the reduced size and the percentage of savings you've achieved. It can handle JPEGs and GIFs as well as PNGs; really the only downside to the tool is that it's just for Mac users. For a Windows alternative, try PngOptimizer.

2. Quickly make image sprites with SpriteMe

Grouping background images into sprites is a great solution for reducing HTTP requests and speeding up your site. But making them requires carefully aligning the images, and doing annoyingly laborious calculations to make sure that they're placed correctly. SpriteMe lets you skip both these steps; not only does it find, group, and save your images into a sprite, it also reconfigures all the CSS positioning and neatly places it in your site. It's a huge timesaver that also reduces your HTTP requests an average of 11 times per sprite!

3. Apply web performance best practices with Google's mod_pagespeed

Image optimizations are best used for when you're actively building parts of your site, because they're accomplished incrementally. But many designers are looking for ways to improve their site in one fell swoop. One option for this approach is using mod_pagespeed, which filters all of your content, variously altering HTML, changing CSS and Javascript references and combining files, inlining resources, and much more. All of these reconfigurations can help to speed your site without changing anything in its appearance or functionality.

4. Debug any browser, system, or platform with Fiddler

Fiddler is a great tool for monitoring traffic from any browser, ensuring that all the requests and responses transfer smoothly between clients and servers, by adding in the right cookies, headers, and cache directives in the right places. It's the perfect tool for testing changes to your site, allowing you to flag and inspect performance issues, test the security of your applications, and add customized applications as they apply to your needs.

5. Streamline your Content Delivery Network with a CDN service

Use a CDN to vastly increase the speed of your content delivery, by taking advantage of a group of geographically distributed servers that have far more power than a regular single-server setup. You can accelerate your entire site with automated integrations, simply by sharing your website domain, and then using the faster link that's provided sitewide. Or you can also choose to speed up only smaller portions of your site, like large image files or videos.

Whether you're looking for a quick and simple method of optimize your images, or a complete overhaul to your Content Distribution Network, each of these tools offers a different point on the scale of changes you to make. They're all major time-savers that make it simple to drive traffic to your sleek and speedy new site.