Web Dev Blog

Often as a site grows, its performance degrades sharply. This can happen for many reasons, and is typical for a site that continually undergoes maintenance. As a project ages, the content often grows as well. More data, more code revisions, more ideas to turn into code for the site, etc.

I’m exploring this subject because a site of mine is in need of a performance boost. It was a snappy little site when I first launched it, but I’ve had many more ideas since then, and I’ve implemented almost all of them. Now regular browsing through the site is noticeable slower.

I’ve got a short list of performance enhancing ideas that I’m going to explore below.

Separating CSS and JS Files

For starters, if you have inline CSS or JS, you should separate these into separate files. This is a huge performance win, because a browser can cache mystyles.css or javastuff.js, but can’t cache it if it’s included inline in your page source code. Most performance wins happen client side – taking advantage of caching is often more efficient than making slight changes to server side code, though this isn’t a rule that’s set in stone; You could have terrible server side code that slows down the site too. My site in question already has the CSS and JS files separated, but it’s worth mentioning in case you haven’t done this.

Minifying CSS and JS Files

This is something that enterprise many sites do, so I thought I would go ahead and do this. Basically, it means removing spaces,tabs, and line returns wherever possible so that the file size is smaller, but the code executes as normal. When minifying a CSS file, I prefer to leave one CSS selector per line, and then listing each CSS property after it. This reduces file size, but makes the file still human readable/editable.

Here is an example of a fully minified CSS file from MSN – http://tk2.stc.s-msn.com/br/hp/11/en-us/css/hp_1.css – I think this is overdoing it, and doing it this way is probably done through an automated script, as this would be next to impossible for a developer to edit in a development environment.

For complex sites, this is going to be a better win than for simple sites. I saw about a 20% decrease in file size. For very, very simple sites (read very), using an external CSS file can slow things down because of the server disk access time of retrieving the external CSS file. The original Google page, for example, only has a few lines of CSS, and therefore uses inline CSS. For anything more complicated, include it in an external file.

Reducing Image Use

Many blogs and news oriented sites use too many images. This slows things down for first time readers, who don’t have the images cached. A good tool to examine load times of everything on your site is Firebug, a plugin for Firefox. You can get the latest version of Firebug here. The image below is a screen capture of one of the features in Firebug that lets you examine exactly how long everything took to load. If your site is nearing half a megabyte (~500kb), it’s time to put less on your pages, or use smaller images.

Using Less Database Queries

This is very important on some sites, and irrelevant on others. If you are using a basic installation of Wordpress, for example, there really aren’t too many ways for an average person to speed it up, without writing the developers and telling them to use less queries next release. For heavily customized sites based on existing platforms and fully custom database driven sites, database queries can be the make or break of your site performance. Basic rule: if you are writing your own queries, and you don’t know how they perform, then you shouldn’t be writing your own queries. Having said that, never outright trust queries from other somewhat experienced developers. Developing for my firm, a Fortune 500 company, we have often encountered popular plugins for Wordpress or modules for Drupal that have queries in them that are written poorly. Just because another developer made it, doesn’t mean they did it right.

Another way to use less queries, is to outright display less content. This is easy to accomplish if you’re using a blog platform. If you’ve got 20 posts a page, reduce this number. The number of queries your blog site makes is directly proportional to the number of posts or entries it is trying to display.

Better Hosting Plan or Better Hardware

This isn’t an option for me, because the next level of hosting plans with GoDaddy is out of my current budget range. For others, however, it may be an option. It’s worth looking into.

Again?

Awhile ago I posted a PHP Execution class article for timing various PHP elements. Since then, a few developers have requested that I include the ability to start and start the timer, so you can be more precise with elements that you want to time and elements that you don’t. I decided to code this class in full PHP 5+ object-oriented structure. In addition to increased functionality, sticking to this style of programming supports PHP as an enterprise level language, and helps its standing among other more weathered and commercially used languages.

The Timer Script

This script returns the time in ms (milliseconds) rounded to the nearest ms when used in a php script or web page.

<?php
class Timer{
 
  private $start_time;
  private $end_time;
  private $accumulated_time;
 
  //Public constructor
  public function __construct() {
    $this->start_time = NULL;
    $this->end_time = NULL;
    $this->accumulated_time = 0;
  }
 
  //Public functions
  public function start() {
    if ($this->is_stopped()) {
      //add time so far to accumulated time
      //reset end time and set start time
      $this->accumulated_time += ($this->end_time - $this->start_time); 
      $this->start_time = $this->get_timestamp();
      $this->end_time = NULL;
    }
    else if (!$this->is_started()) {
      $this->start_time = $this->get_timestamp();
    }
  }
 
  public function stop() {
    if ($this->is_started()) {
      $this->end_time = $this->get_timestamp();
    }
  }
 
  public function reset() {
    $this->__construct(); 
  }
 
  public function retrieve() {
    $this->stop();
    return round($this->accumulated_time + ($this->end_time - $this->start_time));
  } 
 
  //Private functions
  private function is_started() {
    //if start is numeric but end is null, we are started
     if(is_numeric($this->start_time) && is_null($this->end_time)) {
      return true;
    }
    return false;
  }
 
  private function is_stopped() {
    //if end time is numeric, we have a stopped timer
    if(is_numeric($this->end_time)) {
      return true;
    }
    return false;
  }
 
  private function get_timestamp() {	
    //retrieve seconds and microseconds (one millionth of a second)
	//multiply by 1000 to get milliseconds
    $timeofday = gettimeofday();
    return 1000*($timeofday['sec'] + ($timeofday['usec'] / 1000000));
  } 
}
?>

Usage

Using this script is relatively easy as you can probably see from the function names. The 4 main functions in addition to the constructor are start(), stop(), retrieve(), and reset(). Here is an example of usage of this class:

<?php
//instantiate the timer object
$timer = new Timer();
 
//start the timer
$timer->start();
 
//... do something worth timing
 
for($i=0;$i<10000000;$i++){}
 
//stop the timer
$timer->stop();
 
//... do something NOT worth timing
 
//start the timer again
$timer->start();
 
//... do something worth timing
 
//stop the timer
$timer->stop();
 
//print the time accumulated
echo $timer->retrieve();