As internet speeds get faster and our patience gets thinner, there is almost nothing more irritating than a slow-loading website. I can think of at least four instances in that last few months where I wanted to make an online purchase and the company’s website wouldn’t load properly. Either I was prevented from getting the information I needed, or from making the purchase altogether. Needless to say, I took my money elsewhere.

According to Akamai, nearly $3 billion dollars are lost every year due to slow load times, and this number keeps rising. User’s have more options than ever to find information and buy what they need online, and they want it in under 2 seconds. Even if you don’t sell anything through your website, a customer will still associate slow load times as having a bad experience with your company.

“User’s have more options than ever to find information and buy what they need online, and they want it in under 2 seconds.”

So how do you fix this problem? Although it’s really a team effort, there are a lot of simple tweaks that can be made during the design process that make a huge impact on website performance. We’ve created our top tips for improving website speed.

Scale Your Images

A website is not complete without images, but they are usually the number one reason your website is loading slowly.

The most important thing to do when optimizing images for your website is to resize them. Although CSS may scale your image to the proper viewing size, the browser still loads them at full size. For example, if you upload an image that is 1000 x 1000 pixels, but you are only going to show that image at 500 x 500 pixels, your browser is going to be loading an image that is twice the size of what you’re actually showing on your website.

For even better optimization, take the extra 2 minutes to create a different size of your image for every viewport – desktop, tablet and mobile. Using media queries, you can control when each size will be shown. This is especially helpful for speeding up mobile sites since they are often slower anyways.

Find the Right Format

In addition, image formats are not all created equal and also have an effect on page load times. The best format for website images is PNG. They are high quality, supports transparency, have clear edges and lines, which is especially great for logos and charts.

If image quality is your top concern, JPEG is your solution. They are very detailed and have a wide-spectrum color representation. However, keep in mind that they are not great if your image contains text.

The XML-based vector image format SVG was made for retina display, and is by far the best for two-dimensional graphics such as logos. Not only do they reduce the file size by an average of 50 percent, but they also stay perfect and clear on any device, at any size. Check out our comparison below.

Last but not least, avoid using TIFF or BMP formats.

Choose A Typeface

Every custom typeface on your site requires you to download a file (a good rule is to stick with only using two or three different typefaces). If you are using a custom font, even a Google font, think about reducing the weights that you use to reduce file size.

System fonts can drastically cut load times because you are not downloading a file. However, from a design standpoint, they are not very good.

Whichever font type you choose, pick one and stick with it.

Simplify Your Content

It’s so easy to get carried away when designing a website. You find some amazing tricks or inspiration and suddenly you’re trying to cram every cool design technique you’ve ever learned into one page. The sad truth: no one cares.

In the age of mobile optimized and responsive everything, you need to keep asking yourself if what you’re designing will actually help the user. Your cute animal animation might be fun to look at, but it probably isn’t helping the user find the critical information that they came to your site for in the first place.

Delete Unnecessary Code Elements

Get rid of extra spaces, line breaks, and indentations in your code, as well as any unused CSS. Whenever possible, use shorthand code, which has fewer declarations and operators. You can also simplify the code using CSS minifiers such as CSS Minifier and YUI Compressor.

Furthermore, page plugins also have a big impact on your page load times. Only use what you really need.

Reduce Redirects

This one is very straightforward. Every time a page redirects to another page, the user will have an additional time waiting for the HTTP request-response cycle to complete.

Enable Caching

Caching is when your browser takes data from a website that you visit, stores it away, and remembers it when you visit the site again, making it load much faster. There are several caching plugins that you can install to help make your pages load faster.

Bonus Tip

Sometimes, speed is just an illusion. You can use tactics such as progressive rendering to trick the user into thinking that your site is going faster than it actually is when they have to wait for something to load. The key is to keep your users engaged.