Tips For Improving Your Site Speed

Written by Kevin Liew on 23 Apr 2013
17,092 Views • Web Development

Designers are increasingly aware that, in this era of Internet branding, their sites have seconds to make an impact. If the ethos, efficiency and professionalism of a brand can be conveyed on first glance, you're onto a winner. If a site is over complicated and difficult to navigate, or if its purpose and layout are unclear, the extra time required to process it will turn users off in a flash. One simple way to make sure that your brand message is received -- and fast -- is to give your site speed a boost.

What's more: designers are not the only ones catching on to the importance of site speed. Google factors site speed in its search engine rankings. So with fast-loading sites = happy users and improved Google rankings, it's time to learn more about getting your site speed up to scratch.

1. Test Your Current Speed

Begin by finding out how fast your site is running on average. After that, you can begin testing individual pages to isolate where your site is particularly slow. Testing the speed of your site is simple and can be done for free online. You can also use a program like Google Analytics to give you data on other aspects of your site in order to help pinpoint additional causes for slow loading. (Still getting to grips with Google Analytics? Try this step-by-step analytics guide.)

2. Know Your Web host

Find out if your web host uses GZIP compression and deflation on their servers. These are two of the simplest ways to reduce file size (up to 70%) without compromising the quality of images, videos or sound files. You check whether your web site host is already using these speed-friendly techniques by running a test here.

3. Go Minimal

Certain types of content will you cost you those all-important milliseconds in load time. For example content that is heavy with embedded images and videos will naturally take longer to load. There are a few crafty ways to avoid this. The current trend for minimalism in web design is great for keeping site speeds optimal. (See Roger Burkhard's site above.) Fewer graphics, simple layouts and clean color schemes will not only give your site a cool, contemporary edge, they will also perform better and keep users happy. You can find out more about minimal web design here.

4. Optimize Images

For some sites, images are essential for communicating specific content. But there are ways to keep the quality of your images without compromising on load times.

First off, don't rely on HTML or WordPress formatting tools to resize your images. They don't actually alter the image file and thereby take just as long to load despite displaying smaller. Instead, always manually resize your images before uploading them to your server.

Optimize your images for the web. Image quality is far less important in web formats than for any sort of print applications. Therefore, make sure to compress your images accordingly. Usually jpeg's at about a 70% quality rate will perform well. While Photoshop is standard practice, there are a number of great online tools available to help you optimize your images. Try this for starters.

5. Cache Webpages

Caching allows individual browsers to save information from a page. This means that when a user returns to the page, it loads in less time as files can be pulled from the browser's local cache instead of requesting the same information from the server over and over again. You can make adjustments to suit each page, dictating which information is to be cached and how long it should be stored on the browser.

Caching can be cost-effective, too.

6. Stay Balanced

Good web design is a constant balancing act. But by becoming more aware of the kinds of content that are likely to increase page load time, you can make your designs more effective from the outset. Designing with site speed in mind will improve usability, bounce rates and conversions, allowing you to create more effective and profitable designs.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.