Wiredbyte A Place to Rant and Muse over all things Tech http://www.wiredbyte.com/node/150/atom/feed 2008-12-11T09:23:34-08:00 Compressing included javascript files http://www.wiredbyte.com/2008/dec/compressing-included-javascript-files 2008-12-11T09:22:32-08:00 2008-12-11T09:23:34-08:00 Michael I have been hard at work on Nanobyte, trying to get it ready for Alpha status. I recently worked out file compression to make the pages load faster, and thought I would share.

When I built Nanobyte, I wrote a function to include JS and CSS files with a function that adds each filename to an array for inclusion. With this array, I can combine all of the files into one large file and compress it for viewing.

  1. public static function CompressFiles($fileArray,$type){
  2.         if($type != 'css'){
  3.                 $ob = "<?php
  4.                 ob_start (\"ob_gzhandler\");
  5.                 ?>\n";
  6.         }else{
  7.                 $ob = "<?php
  8.                 ob_start(\"ob_gzhandler\");
  9.                 header(\"Content-type: text/css; charset: UTF-8\");
  10.                 header(\"Cache-Control: must-revalidate\");
  11.                 ?>";
  12.         }
  13.         $filename = './templates/'.THEME_PATH.'/'.$type.'/compressed.php';
  14.         $fh = fopen($filename, 'w');
  15.         fwrite($fh, $ob);
  16.         foreach($fileArray as $file){
  17.                 $contents = file_get_contents($file);
  18.                 fwrite($fh, $contents);
  19.         }
  20.         fclose($fh);
  21.         return $filename;
  22. }

This function does several things.
First, we set the output buffer and headers to add to the new file.
We then tell the function where the file is going to be created, and open it for writing.
Once it is open, we write our PHP code block to the file. To get this to work correctly, the file must have a .php extension.

Next, we read the contents of every included file one by one, and append them to our new file. This makes for one large conglomerated file to include.
After all files have been added, we close the file and return the filename of the new file to be included.

Since the page is a php file, the code block will run, which uses ob_gzhandler to compress the file. Using this on Nanobyte, I have reduced a 420KB total page size down to 168KB.

A side effect of this process is that we also reduce the amount of server requests tht our server hs to process. Overall, I gained just over 3 full seconds for the page to load. before this function, the average load time was 6.2 seconds, we are down to 3.19. Incredible!

One last note: Though the file is a .php file, it CAN be included like a regular JS file.. e.g.
&lt;script type=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> src=<span style="color: #ff0000;">&quot;/js/compressed.php&quot;</span>&gt;&lt;/script&gt;

]]> I have been hard at work on Nanobyte, trying to get it ready for Alpha status. I recently worked out file compression to make the pages load faster, and thought I would share.

When I built Nanobyte, I wrote a function to include JS and CSS files with a function that adds each filename to an array for inclusion. With this array, I can combine all of the files into one large file and compress it for viewing.

  1. public static function CompressFiles($fileArray,$type){
  2.         if($type != 'css'){
  3.                 $ob = "<?php
  4.                 ob_start (\"ob_gzhandler\");
  5.                 ?>\n";
  6.         }else{
  7.                 $ob = "<?php
  8.                 ob_start(\"ob_gzhandler\");
  9.                 header(\"Content-type: text/css; charset: UTF-8\");
  10.                 header(\"Cache-Control: must-revalidate\");
  11.                 ?>";
  12.         }
  13.         $filename = './templates/'.THEME_PATH.'/'.$type.'/compressed.php';
  14.         $fh = fopen($filename, 'w');
  15.         fwrite($fh, $ob);
  16.         foreach($fileArray as $file){
  17.                 $contents = file_get_contents($file);
  18.                 fwrite($fh, $contents);
  19.         }
  20.         fclose($fh);
  21.         return $filename;
  22. }

This function does several things.
First, we set the output buffer and headers to add to the new file.
We then tell the function where the file is going to be created, and open it for writing.
Once it is open, we write our PHP code block to the file. To get this to work correctly, the file must have a .php extension.

Next, we read the contents of every included file one by one, and append them to our new file. This makes for one large conglomerated file to include.
After all files have been added, we close the file and return the filename of the new file to be included.

Since the page is a php file, the code block will run, which uses ob_gzhandler to compress the file. Using this on Nanobyte, I have reduced a 420KB total page size down to 168KB.

A side effect of this process is that we also reduce the amount of server requests tht our server hs to process. Overall, I gained just over 3 full seconds for the page to load. before this function, the average load time was 6.2 seconds, we are down to 3.19. Incredible!

One last note: Though the file is a .php file, it CAN be included like a regular JS file.. e.g.
<script type="text/javascript" src="/js/compressed.php"></script>

]]>