Ahmed Nuaman

builder of internets ~ developer of dreams ~ tamer of Dachshunds

Posts Tagged “compression”

• Compressing and Caching Static Text-based Assets with PHP

  Friday, July 10th, 2009

  So recently I’ve been playing around with GZIP compression on Apache and PHP to see how fast I can get my assets to load. Now I’ve written a post already on how to compress sites with GZIP.

  Now I’ve taken my script to a new level, that is the asset loader script that compresses text-based assets using GZIP. I’m not using any sort of code compressor on the assets, yet, as I’ve already compressed the scripts using YUI. More importantly, I’ve now added the ability for me to cache a number of files into one rather than loading several, as we all know: less HTTP request = more fun.

  So the concept is quite simple: pass a list of files, separated by a comma, to the script and it will then combine the files, compress with GZIP and cache the file for future use.

  Before I had something like this:

  <script type="text/javascript" src="/assets/js/jquery.js"></script>
  <script type="text/javascript" src="/assets/js/jquery-easing.js"></script>
  <script type="text/javascript" src="/assets/js/jquery-flash.js"></script>
  <script type="text/javascript" src="/assets/js/jquery-scrollTo.js"></script>
  <script type="text/javascript" src="/assets/js/jquery-ui.js"></script>
  <script type="text/javascript" src="/assets/js/suitcase.js"></script>

  So you see that we’re loading files separately, they are already compressed and the GZIP’ed, but we’re not caching them, so there’s always some latency, so with the new script I do this:

  <script type="text/javascript" src="/gzip-service.php?f=assets/js/jquery.js,assets/js/jquery-easing.js,assets/js/jquery-flash.js,assets/js/jquery-scrollTo.js,assets/js/jquery-ui.js,assets/js/suitcase.js"></script>

  Now for the PHP script:

  <?php
  /**
   * @author          Ahmed Nuaman (http://www.ahmednuaman.com)
   * @langversion     5
   *
   * This work is licenced under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License.
   * To view a copy of this licence, visit http://creativecommons.org/licenses/by-sa/2.0/uk/ or send a letter
   * to Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
  */
  
  if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) )
  {
      ob_start( 'ob_gzhandler' );
  }
  else
  {
      ob_start();
  }
  
  $dir            = '/path/to/public_html/';
  $test_file      = $dir . 'cache/' . md5( $_GET['f'] );
  $files          = explode( ',', $_GET['f'] );
  
  if ( strstr( $files[ 0 ], '.js' ) )
  {
      $content_type = 'javascript';
  }
  elseif ( strstr( $files[ 0 ], '.css' ) )
  {
      $content_type = 'css';
  }
  elseif ( strstr( $files[ 0 ], '.xml' ) )
  {
      $content_type = 'xml';
  }
  
  header( 'Content-type: text/' . $content_type );
  
  if ( !file_exists( $test_file ) )
  {
      foreach ( $files as $file )
      {
          $feeds .= file_get_contents( $dir . $file );
      }
     
      file_put_contents( $test_file, $feeds );
  }
  
  echo file_get_contents( $test_file );
  
  ?>

  So it’s a pretty simple script to dissect. The only thing you need to worry about is changing the “$dir” and “$test_file” to specify what the base directory is (so people don’t steal your GZIP’ing service) and where you want the files to be cached.

  Tell me what you think.

  Tags: cache ~ caching ~ compress ~ compression ~ CSS ~ gzip ~ JavaScript ~ PHP ~ text ~ XML ~ zip
  Posted in Actionscript 3 ~ APIs ~ CSS ~ Development ~ JavaScript ~ PHP ~ XML

  ---

• Speeding up Sites with GZip

  Thursday, May 28th, 2009

  Web sites need to be fast! Recently I’ve had some time on my hands so I’ve done some tests to see which is the best solution. I’ve had a read about different ways that web sites can be sped up, from compression before you upload files to server side compression.

  Whenever it comes to speeding things up, I always remember the saying that “loading data from a flat file is slow, a database is slower, but memory is the quickest”. So that means if you’ve using server-side scripting such as PHP or Python, the best thing to do is to use memory caching such as APC or MemCache.

  Now memory caching is awesome, but as good as it is, some hosting environments don’t have it turned on, so what can you do? Well I’ve put together a list of the ones that I’ve used on my portfolio and blog sites that don’t require non-standard configuration settings.

  YUI, JSMin and other “before you upload” compression

  When you download your copy of jQuery or your favorite framework, it normally comes compressed making it faster to serve. Now there’s been lots and lots of articles about which is the best compression utility available and I’m not going to tell you which one to use, but I use YUI compressor for both JavaScript and CSS.

  Now a good compressor will compress your code to a ratio of about 30-60%, and that’s cool! Here’s a good comparison picker tool that’ll help you make your decision. Don’t forget to compress your CSS and XML as well!

  Using Apache’s mod_gzip and mod_deflate

  This is a nice and handy trick. You basically tell Apache to serve text files (such as XML, JavaScript and CSS) to GZip compress them on-the-fly before they’re served to the browser. GZip compression is pretty much the best widely available text compression you can get.

  So how do you do it? Well simply open up your relative .conf file or .htaccess file and stick the following in there:

  AddOutputFilterByType DEFLATE text/html text/plain text/xml
  
  <files *\.(js|css|xml)>
  SetOutputFilter DEFLATE
  </files>

  You need to make sure that you have mod_gzip and mod_deflate working on your Apache configuration. But if you haven’t got that, then the next one is for you.

  Using PHP’s Ouput Buffering

  PHP has the a great function called “ob_start()” that allows you to buffer the output of your contents of your PHP script and make it faster. But there’s more, you can set the type of compression you’d like PHP to use. If you pass “ob_gzhandler” as the variable for “ob_start()” it’ll use GZip to compress your output.

  So, to use this, add the following to the top of your PHP file:

  if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) )
  {
      ob_start( 'ob_gzhandler' );
  }
  else
  {
      ob_start();
  }

  You’ll see your file sizes drop! Now you’re probably saying that this isn’t practical for loading in CSS and JavaScript file, well there’s nothing stopping you from creating a proxy:

  if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) )
  {
      ob_start( 'ob_gzhandler' );
  }
  else
  {
      ob_start();
  }
  
  $feed = file_get_contents( $_GET['f'] );
  
  echo $feed;

  You can then simple set up your HTML script code like this:

  <script type="text/javascript" src="/gzip-service.php?f=assets/js/jquery.js"></script>

  Now using FireBug you’ll see that the file size has dropped, awesome!

  So you can now take this and hopefully it’ll speed up you web site, and to test, download and install a FireBug extension called YSlow.

  Tags: apache ~ apc ~ caching ~ compress ~ compression ~ compressor ~ CSS ~ gzip ~ htaccess ~ JavaScript ~ memcache ~ PHP ~ XML
  Posted in CSS ~ Development ~ JavaScript ~ PHP ~ XML

  ---