A slow loading site can cost a business huge amounts of money. A 2006 study by Akamai on MunchWeb points out that big spenders on the net ranks page-loading time as a priority and a whopping 75% of people would not return to a site if it took longer than four seconds to load. A study done by Akamai before 2006 found that people were more patient, with eight seconds being the longest amount of time they would wait before leaving the site. A 2009 Akamai study indicates that consumers expect websites to load in less than 2 seconds, with 40% of people abandoning a website that takes longer than 3 seconds to load. Even the ever-important Search Engine Optimization (SEO) is affected by how fast your website loads. Since 2010, Google has taken loading speeds into account for how high a website is ranked.
Before you start optimizing your website, it’s helpful to know how your website compares to others with regards to speed. Using tools such as Pingdom’s Website Speed Test will allow you to check how fast your website loads, and even shows you how long it takes to load each element. The goal is to shave off a few milliseconds as much as possible. Milliseconds may seem insignificant, but it really adds up when you’re talking about hundreds of elements trying to load in just a couple seconds. Once you’ve gauged your site’s lightening capacity, keep the following tips in mind when optimizing your website:
Minify Your Code
Save for Web
Images tend to take up most of the loading time, so it is important to save your images to be optimized for the web. Image editors such as Photoshop allow users to export or save for web. From here you can choose file types such as png, gif or jpg. Photographs should generally be saved as jpg because you can choose the level of quality. Larger images, such as ones for backgrounds, can be saved with lower quality, whereas prominent or focus images should be saved with higher quality.
Png is for images with transparency. To reduce load time on a png file, you’ll need to reduce the file size. One way to do this is to posterize the image which reduces the number of colors in the image. Gif files tend to have smaller file sizes, especially if working with a very small handful of colors. When exporting a gif, you can choose how many colors are in the file. If you’re working with only a few colors, choose the minimal amount of colors needed, such as 8, as opposed to the full 256 colors. Like png, gif supports transparency, but gif does not support semi-transparency.
Don’t Scale If Unnecessary
While responsive and mobile designs are a current trend, if at the fullest size resolution you need an image at 50×50 pixels, don’t use a 250x250px image that is scaled down to the 50x50px size. The full size image is still loaded onto the page, which means that it has a much larger file size than if it were just loaded at 50×50.
Reduce Number of Files
Yahoo – YSlow – Plugin the grades websites and offers suggestions for improvement