Dan Davies{ Front-end Developer }

Page Speeds – Work In Progress

25th April 2013

As a front-ender, I should be aware of how quick things are loading on any site I have built / worked on. If I’m openly honest, up until this week, I didn’t take it that seriously unless something major stood out.

I work with a chap called Colin who is an advocate of reducing your page as much as you can and finally I’ve come around to the same conclusion. Now I’m just starting to get to grips with this so feel free to point out any inaccuracies.

So taking my new found enthusiasm, I’ve made dan-davies.co.uk as quick as I can for now without getting too technical. The obvious problems were Typekit for me or FOUT as we know it. But by using the asynchronously javascript embed code rather than the default code, I was able to load Typekit alongside everything else rather than before or after everything.

Alongside that, I minified /used 3rd party minified code to reduce load times. I’m currently minifying my CSS through SASS and a WordPress plugin called WP Minify for anything else but to be honest, there isn’t a lot to minify.

I’ve also enabled GZipping up of my site to reduce file size. I’ve set it up in my htaccess file so that files are zipped up and then the browser unzips when loading. It has made a massive difference.

[edit]Actually it’s not working as it should so I need to fix that[/edit]

Also be careful playing about with htaccess. I borked my site and feared I’d lost it all.

As well as all that, I’m caching my site using a plugin called WP Super Cache. Basically it generates cached files of your site so that unless things change, you see the same HTML therefor reducing a shed load of time. I have since learnt that there is a major security flaw in this plugin and that if you are using it, do get the latest version which has been fixed.

I’ve also started to compress PNG’s which I didnt think would save much time but it does. I’m using a program called ImageOptim which seems to do the trick. I’d like to look at compressing the header images next as they are rather on the large side.

So what am I using to test all this? Well I’ve been using the google Page Speed tools which tell you what you need to do to sort out. Also Yslow is pretty handy too.

I realise this post is more me describing what I’m doing and probably full of holes but it’s good to get down what I’ve done to look back and see what I was doing and see if things altered for me in my process. Feel free to share your ideas, tips and so on.

It’s good to share knowledge.

Back to top