Speeding up our website - My experiences with Sitecore

Have you ever ran YSlow or PageSpeed against your site and you get poor grades in the following categories

1. Make fewer http requests
2. Minify javascript and css
3. Compress components with gzip.

Our site got poor grades for these items and my initial response was who cares.  Bandwidth is almost unlimited anymore and we are conditioned to sites taking a few seconds to load.

I had this who cares attitude until I started actually profiling our site and realizing that minimal changes could make a big difference in user experience.   Instead of our site taking 5 - 8 seconds to load it could take less than 5 seconds to load.

Also, as a developer I typically never involve myself in the http request pipeline from the browser perspective.  I'm abstracted from that, especially being a .net developer, we are abstracted by many things.   

But, making the site perform well from a browser perspective is just as important as making your code algorithms perform well.    Think about it for a minute, your end users only interact with your site via a browser.  They don't care how optimized the back end code is if the browser experience is slow!

Here are a few simple things I did to get better grades from YSlow and PageSpeed.

Tip #1 - Get lucky and quickly reduce a few image sizes...

  Run Firebug and enable the Net panel.   Look at the Images tab and sort by the size column.   Do you see any large images being loaded?  

 I was surprised to see three images with a total size of almost 700kb being loaded.    Looking at the request I could see the images were coming from the Sitecore media library.      The images had sizes ranging from 800x600 to 1200x2200!   All of the images were being scaled down by the img tag.   

  I made our content editors aware of these three large images, they uploaded new images and reduced the size from 700kb to 50kb!

Tip #2 - Reduce http requests 

If you have 5 javascript files and 5 css files and you include all of those in your head tag it takes 10 http requests to load all of these files.    

You can easily reduce http request by including all javascript files into one file and doing the same with the css.  Just be sure the one file you create for your javascript includes files in the appropriate order to ensure javascript dependency issues don't occur.

Search the web for this and you will find two main approaches to being able to include all of your js / css files into one.    I call the approaches dynamic and static.  The dynamic approach happens at runtime, the static approach happens during compile or build time.

The dynamic approach is to add code into a custom http handler / pipeline which does combining of files for for you, with some configuration.    Many elaborate solutions exist but I don't like these solutions for a couple reasons...

  1.   It takes many configuration settings to get correct.  These settings vary based on if you are on .NET 3.5, .NET 4.0 etc.    Several of the solutions are not well commented.

  2.    You  are adding overhead into the http request / response on the server, sure you can utilize caching, but you are still adding overhead to each request.  One more pipeline the http request has to go through.  With Sitecore we have enough pipelines already.   And with caching you have to worry about when the cache expires.

  3.  Many of the solutions are neat code but they come with their own API which introduces a learning curve.  Many will be open source and require a fix or two to work in your environment.  Always something a little different with your environment  :-)

The other approach is to perform some type of post build task which combines files into one file.

I chose this approach.  I use a post build task to combine all javascript files into one large file.  I do the same with our css files.  

Good luck speeding your websites :-).