Optimizing your sites speed and minimising bandwidth usage

If you have any popular sites, you will know that bandwidth usage can become an issue very quickly. If the site isn't optimised, you're increasing your usage, slowing down the users experience on mobile and probably experiencing a negative affect on your Google rankings as well.

Here are 8 tips for optimising your sites page load and minimising bandwidth.

Avoid redirects

Redirects requires a new and full round trip back to the server. These are usually quite quick, but it becomes a very different story on mobile. If you want to keep your mobile users happy, avoid redirects where possible.

Compress images

Images use the most bandwidth on page loads and image heavy sites can take what seems like an eternity to load on slow connections. Optimising your JPG's and PNG's can shave a considerable chunk of your sites page load and overall bandwidth usage without any loss of quality. There are tools available that will optimise them for you on deployment.

Set expiry headers and use versioning

Setting expiry headers for specific file types on your server tells the browser to use its cache whenever possible. This reduces HTTP requests significantly after an initial page load and the browser only asks the server for changes and new files. However, when implementing this method, also consider using cache busters to force new versions of files to be downloaded by adding a version querystring.

Minify Javascript/CSS

Javascript and CSS files can be very large, minifying these files when deploying cuts out any whitespace and renames variables to much smaller names, saving valuable bytes.

Minimise http requests

The more HTTP requests you have means more time the browser is spending getting the assets to render the page. Reducing these will improve your page speed and your users' experience.

Concatenating CSS/Javascript

If you have several local CSS and JS files, merge them together. Sometimes they need separation because of when/where they're being called. But if you call more than one local Javascript or CSS file in the same place, they need to be merged together. If you're using an external file that isn't likely to change, consider bringing it local and merging with the others. There are tools available that will merge them for you on deployment.

Sprite your layout images

Layout images rarely change and combining them into one sprite will reduce HTTP requests significantly.

Turn on GZip Compression

If you don't have this enabled, your server is sending all of it's data uncompressed. Enabling GZip on your server will compress files before they're sent, saving even more bandwidth.

14kb TCP

Now a recommendation of Google, try to ensure that all of the critical CSS (CSS required to render all content above the fold) is within the first 14kb. This means that the site will be rendered within the first round trip to the server and your mobile users won't be sat waiting.

Use Google Page Insights

Google Page Insights is a useful online tool to see where you can improve page speed and bandwidth usage. Use this to see where your site is failing.