Speed : Part 1. Decreasing load times and increasing site performance

Importance of performance?

As load time increases so does users patience and user experience decreases.

Amazon

For every 100 milliseconds Amazon took to load they lost 1% of revenue. Millions of pounds!

Introduction

Get in a problem solving mood and you will go far when it comes to performance.
The tips in this episode halved the load time of this site.
You can replicate the techniques in every site you build.
Inspired by YSlow

Some irresponsible sites out there

Every image, font and javascript add ups. When Oakley was launched it was a huge 80mb. Site weight is now 1.5mb in September 2013. If your site is 10-20 or above then there better be good reason for it. Every site and project is unique but building a credible and engaging site well under 1mb is more than achievable.

Don’t make performance an afterthought

Many projects ignore performance completely. Some think of it upon launch and think only get to it when an issue is found. The best way is to involve everyone including developers, designers and clients from the beginning.

1. Server

Performance is only as good as the weakest point. Bottlenecks with servers and hosting will make other techniques irrelevant. Media Temple and Ehosting in the UK can be vouched for.

2. GZIP

Very easy to add in with an htaccess file. Please see the example htaccess file as used on this site. Make sure the Apache deflate module is enabled.

3. ETags / Expires

Again very easy to add in with an htaccess file. See example file.

4. Minimise http requests

Every file you add, JavaScript, CSS adds to requests. Combine CSS and JavaScript into single files.

5. CSS Sprites

You can combine many images if they don’t tile. TinyPNG is a great tool and reduced the sprite file on this site by 68%.

6. Source Order

Css at the top and JavaScript at the bottom. If at the top JavaScript blocks all other files from loading, till itself has all been loaded.

7. Software Caching

Reduces server parsing and database calls to your applications and sites. CE Cache on ExpressionEngine and Super Cache on WordPress are great choices.

Next week we will go further into performance with more tips and techniques. For now, how much time can shave of?