Advanced Performance Optimization Strategies at SMX Stockholm 2012

All right folks, it’s that time of the year again – and I mentioned it in earlier posts that I usually call Oct. / Nov. something like the “conference madness”. And what would fit better than a re-cap on a talk I just gave yesterday at SMX Stockholm. I had the pleasure to close the conference sessions part with a 45 minutes solo-talk titled “Advanced Performance Optimization Strategies: 10 tips to make your site lightning-fast”.

Maybe you do remember a post I wrote over a year ago here on StateOfSearch where I basically talked about three different approaches and areas on how to speed-up a website. Interestingly enough, a lot of the stuff I mentioned there is still very much valid as of today – which is good, I think – but for SMX Stockholm, I decided to break it down in a lot of small and hopefully actionable advise. My goal was, to have tips that people really can start implementing right away – but I also had the challenge to squeeze something in for everyone, without actually knowing how much technical knowledge the audience has.

To make that happen, I decided to come up with ten different areas on how you can improve and then just deep-dive into each of those. If you prefer to just flip through the slides, here you go – but if you want to have some more background, be sure to keep’ on reading just below the deck where do comment on the different items:

And now, without further due, here is the latest on how to make sure site as fast as possible:

1) Reduce the amount of requests

HTTP requests do consume a lot of time, which is mainly because a connection needs to be established for each resource (like images, JavaScript & CSS for example), the content has to be passed and afterwards, the connection needs to be closed again. So one basic rule of thumb: Do as few requests as possible and combine contents of multiple CSS / JS into one single file (also consider file order: CSS on top, JS in the footer) and for images, make sure you combine your small images into one big image – and rely on CSS sprites to display just the necessary parts of it.
Another big issue – especially when serving a lot of resources – is limitations in terms of parallelized requests per hostname. Even modern browsers do not allow more than six connections at a time. Using img1/img2/ allows balancing requests to and between multiple sub-domains – which results in a massive improvement in performance due to more parallelized connections.

2) Decrease the size of each request

Obviously, for the remaining requests, it makes quite a lot of sense to make sure that these are as small as possible – because you want those files to be send as quickly as possible. For CSS and JavaScript, I’d strongly recommend the approach to minify files (which basically means you’d remove unnecessary whitespaces, line breaks, comments, etc.) as well as have gzip compression enabled (it’s similar to using zipped files on your desktop: They’re just smaller and therefore can be sent way faster!). Another, very important thing to do is serving your static assets from “cookie-less domains”. The issue with cookies is, that once they’re been used once on your site, all resources of that website will be having a cookie header attached to it (use Live HTTP Headers for Firefox to verify) – which is completely unnecessary and produces quite some overhead (per requested resource). That’s by the way also the reason for Google to server there static assets from (and if you check, there won’t be any cookies).

3) Implement a proper caching

Caching the remaining requests (after having them optimized as outlined just before) is key for your success. Doing so is pretty much straight forward and comes down to using the right HTTP cache headers: It’s important to specify one of Expires or Cache-Control max-age, and one of Last-Modified or ETag, for all cacheable resources. I strongly recommend checking out slides 25 / 26 on how to do so.

4) Clean-up that source-code

As for the next minutes I talked about various approaches to optimize the HTML source code. Especially since development is kind of an on-going process, your HTML does change quite a bit. And, of course, leaves room for performance optimization as well. So my advice on HTML was:

– Remove HTML comments
– Move inline CSS / JS to external files
– Don’t scale images using width / height
– Don’t use empty href-attributes
– Don’t use @import in CSS

Slides 27 to 34 do have all the details on that.

5) Consider asynchronous requests

Next one up was AJAX and JS parallelizing: The one advice I gave was off-loading unnecessary fragment and parts of a site (which you don’t want to have indexed anyways) into AJAX fragments. And secondly I talked a little bit about HeadJS which is just really awesome. I don’t want to go into too much detail on what this handy library can do for you – but its’ must-try if your site relies on JavaScript. It does for example manage all your JS includes, allows you parallelizing them and much, much more!

And a lot more…

After talking quite some time about the sites and its components, I also decided to dive a little deeper into the server-side to get the maximum out of the hard- and software-setup as well: If you’ll jump to slide 37 you can find some handy tips on how to make your MySQL server faster. After that I also talked about the web-server itself (like Apache vs. nginx) as well as how to get the maximum out of PHP (including PHP accelerators + caching, using memcached sessions as well as switching to a PHP-fpm setup to really get PHP to the max).

Again, here’s the link to the full deck on SlideShare account:

I hope you find some of the stuff usefully – as always I’m looking forward to feedback in the comments via mail, Twitter or whatever you prefer.

Opt In Image
Know about what is changing in marketing!

Keep up with the latest digital marketing developments, views and how-tos through State of Digital’s digest newsletters. Be the first to hear about events, white papers, e-books, webinars, training and more!

You will receive the free e-book "Content Marketing Essentials" as a thank you!

* Personalize your experience when signed up!

About Bastian Grimm

Bastian Grimm is founder and CEO of Grimm Digital. He mainly works as online marketing consultant with a strong focus on organic search engine optimization (SEO). Grimm specializes in SEO strategy consulting, website assessments as well as large scale link building campaigns.