Performance Tweaks

Overview

This is simply a record of my investigation into merging and compressing my static resources (css and js files) on a personal website. What follows is the resources I looked at and how I hoped to use them on my site.

In summary, I have not found a good solution and I will revisit the subject in the future.

Goal

As part of the ongoing work for www.rc-stats.com I have decided it is time to try and increase the sites performance (from the end user perspective). I decided to start by tackling the issue of merging and compressing my css and java script. Being a relative green horn to site administration and web dev I started using the following resources to help me try and speed up my Django site:

• http://www.hanselman.com/
• Following the interesting reddit post, I learned about the Django app compressor
  • http://django_compressor.readthedocs.org/en/latest/index.html

Using the advice from Hanselman, I tried Yslow and decided to start by reducing the number of http requests.

Grade F on Make fewer HTTP requests

This page has 19 external Javascript scripts. Try combining them into one.
This page has 12 external stylesheets. Try combining them into one.
This page has 7 external background images. Try combining them with CSS sprites.

Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

I have considered compressor for this, but for my first attempt I will try something a bit more manual until I understand the problem space better. I will start by using YUI Compressor, I was able to quickly grab it with the synaptic package manager. Taking an initial swing, its clear I am missing something

$ cat *.css > combined.css
$ l
boilplate.css  custom-rebuild.css  elastic-noscript.css  jquery-ui  prettyPhoto.css  reset.css  slides.css  superfish.css
combined.css   elastic.css         flexslider.css        layouts    rebuild.css      skins      style.css   test.css
$ yui-compressor combined.css -o combined-min.css

  <!--
  <link rel="stylesheet" href="/media/css/superfish.css" media="screen"  />
  <link rel="stylesheet" href="/media/css/style.css">
  <link rel="stylesheet" href="/media/css/flexslider.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="/media/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" />
  <link rel="stylesheet" href="/media/css/custom-rebuild.css" media="screen"  />
  -->
  <link rel="stylesheet" href="/media/css/combined-min.css" media="screen">

Result:

It looks like the template designer I used followed this advice of using one stylesheet for everything and then using @import. From the post:

“I am of the belief, as are others, that it is better to split stylesheets into a few different ones for big sites for easier maintenance and for better modularity. Maybe I’ll have one for a CSS reset, one for IE-specific fixes, and so on.

By organizing CSS into disparate stylesheets, I’ll know immediately where to find a style I want to change. You can do this by importing all the stylesheets into a stylesheet like so”

It would seem given my limited css knowlege and what I can gather about the difference between @import and link and the suggestion to not use @import on a high performance site that this probably not a problem worth tackling at this stage. This is enough information for me to move on to more low hanging fruit (like caching), I will revisit this issue again in the future when I have more time/resources to invest in css.