Optimizing Websites

Optimizing websites helps page loading speeds

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

Using helpful tools like this Compressor to compress your JavaScript and CSS helps reduce load times. Minifying code means to remove all extra spaces, line breaks and comments. This means that the browser will have less characters and lines of code to read. The less lines of code you have, the faster your website will be.

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

Combine your CSS and JavaScript into as few files as possible.

Other Resources

Yahoo – Best Practices for Speeding Up Your Web Site

Yahoo – YSlow – Plugin the grades websites and offers suggestions for improvement

Hongkiat Lim. – Ultimate Guide To Web Optimization (Tips & Best Practices)

Leave a Reply

Your email address will not be published. Required fields are marked *