Now Playing Tracks

Quick silverstripe performance - part 1

I think you can get a 33% improvement in performance in less than a hour on a typical silverstripe site.

Firstly most of the clients I have won’t pay more than that anyway so I think 1 hour is a pretty good target.

There are three areas for improvement:
1) Files
2) Silverstripe caching
3) Apache setup

Files
To improve performance of files you need to start thinking about page requests like conversations on a cell phone. The more efficient the conversation the less it costs you. The efficiency comes down to two factors: less transactions and smaller transactions.

Less transactions
The easiest way to have less requests is to combine your CSS and JavaScript . Silverstripe makes this really easy. In your Page->init function you can use the Reqirements class to include CSS and JavaScript. You can also tell it to combine these files very easily.

http://www.pastie.org/2090172

Notice I set the combine directory to the themes folder? Normally silverstripe puts combined files into your assets so that it’ll stay out of any versioning. The issue with this is that if you do background images with syntax like URL(‘../images/myfile.png’) then it’s going to break. So an easy fix is to tell your version control system to ignore any files in these folders called combined.

I’m of the opinion that you should include all the CSS you’re going to use at this point. I used to have a combined CSS file which covered generic stuff and then I would include page specific stylesheets page by page, such as homepage.css. There is two things wrong with this. One, you really shouldn’t have page specific styles, I’m a big advocate for OO CSS. Second since the user is most probably going to visit the homepage first you might as well just combine with your other files.

JavaScript is slightly different. It would be nice if you could include everything up front but sometimes that results in worse performance. Firstly because you gave code that isn’t needed. Second because your may have code looking for things that don’t exist. So combine the stuff you use on all or multiple pages and leave page specific stuff out.

Now if you’re afraid its going to make your debugging harder, don’t worry silverstripe won’t combine the files until you put silverstripe into live mode.

Smaller transactions
So now we have less files we also want smaller files. The nice thing about the previous step is that combining files will reduce filesize. CSS will get slightly smaller and due to the fact silverstripe uses jsmin when combining JavaScript your overall JavaScript filesize should reduce. The downside of using jsmin is that it sometimes introduces code that older browsers like IE6 spit the dummy about. Make sure you always test your site in live mode if your combining any JavaScript.

Images
The other files you want smaller is your images. Firstly make sure you’re compressing the images when exporting from photoshop or fireworks. Second use smush it. Smush it is an image compression tool developed by the yahoo performance team. It strips out extra bytes from your images, however it will not change how your images look. It comes as a tool in ySlow, but normally I use the uploader. Don’t do this too early in your development, wait until your template images (logos, background images, icons etc) are almost ready for launch. Running these images through smush can save some easy Kbs. I’ve run some 450kb homepages through smush and seen 45k drop off. That’s the easiest 10% you’re ever going to see.

Part 2 coming soon, it will cover Silverstripe caching.

Update
As it turns out google has done some more performance testing and due to some changes in how resources are loaded newer browsers can load up to 6 smaller files quicker than 1 large file. See here: http://pagespeed-velocity2011.appspot.com/#14

blog comments powered by Disqus

2 notes

  1. experience-ss reblogged this from pitchandtone
  2. pitchandtone posted this
We make Tumblr themes