Speeding up Websites

This month we are lucky enough to get the guys from Dash Media to present.

Jon Hasslet is presenting today about the things that you should be doing on your website.

Why should you care about speed?

• People hate waiting for things
• not everyone is on the same connection
• Google LOVES fast websites

What makes my site slow?

• amount of data sent
• number of requests that are sent
• the order the files are requested
• caching of static files
• server side work for dynamic assets

How can I speed things up?

• Combine all JS and CSS files – this reduces the number of HTTP requests and lowers the overal amount of data that is sent.
• Minify – this reduces the white space extra content that is in the file
• Compress – compress the files through gzip

Jon fires up two examples that we can see the difference of performances.

dev.jon.haslett.id.au/speed1

dev.jon.haslett.id.au/speed2

Mac Tool called Compressify that reduces the files.

Move your JS to before the </body> tag

Browsers wait until all of the javascript is loaded until it loads anything else, get it in your HTML document last.

Use a CDN

Everyone is using JQuery these days, so take advantage of the version running on Google Code so you don’t even have to download it again.  Duh!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

User Browser Caching

Grab a .htaccess file and make sure that the files are cached where possible.

<ifModule mod_expires.c>

  ExpiresActive On

  ExpiresDefault "access plus 1 seconds"

  ExpiresByType text/html "access plus 1 seconds"

  ExpiresByType image/gif "access plus 2592000 seconds"

  ExpiresByType image/jpeg "access plus 2592000 seconds"

  ExpiresByType image/png "access plus 2592000 seconds"

  ExpiresByType text/css "access plus 604800 seconds"

  ExpiresByType text/javascript "access plus 216000 seconds"

  ExpiresByType application/x-javascript "access plus 216000 seconds"

</ifModule>

<ifModule mod_headers.c>

  <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">

    Header set Cache-Control "max-age=2592000, public"

  </filesMatch>

  <filesMatch "\\.(css)$">

    Header set Cache-Control "max-age=604800, public"

  </filesMatch>

  <filesMatch "\\.(js)$">

    Header set Cache-Control "max-age=216000, private"

  </filesMatch>

  <filesMatch "\\.(xml|txt)$">

    Header set Cache-Control "max-age=216000, public, must-revalidate"

  </filesMatch>

  <filesMatch "\\.(html|htm|php)$">

    Header set Cache-Control "max-age=1, private, must-revalidate"

  </filesMatch>

</ifModule>

If you want a good .htaccess file grab it from HTML5 Boilerplate

Image size

Image Optim – I use smush.it personally but this is pretty freaking sweet!