954,585 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

GZIP Problem with CSS and JavaScript

I am trying to enable Gzip for CSS and JavaScript but whenever I do it the CSS fails to load (thats what firebug says) and same with some of the JavaScript (like some of it loads and other doesn't. The CSS and JavaScript are external files.

I am using the methods from this tutorial: http://viralpatel.net/blogs/2009/02/compress-php-css-js-javascript-optimize-website-performance.html

More specifically, for CSS I am using this: http://viralpatel.net/blogs/2009/02/compress-php-css-js-javascript-optimize-website-performance.html#highlighter_390959

And for JavaScript: http://viralpatel.net/blogs/2009/02/compress-php-css-js-javascript-optimize-website-performance.html#highlighter_603212

jonow
Junior Poster
104 posts since Jan 2009
Reputation Points: 10
Solved Threads: 0
 

Which method are you using.htacess file handlers, which works only sporadically
php headers within the files which works more often
part of included header

<head><link rel="meta" href="/labels.rdf" type="application/rdf+xml" title="ICRA labels">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php">
<link rel="stylesheet" type="text/css" media="print" href="/pstyle.css.php">
<link rel="stylesheet" type="text/css" media="handheld" href="/stylehand.css.php">
<script type='text/javascript'>
<!--//
if (window != top) {top.location.replace(self.location.href);}
//-->
</script>
<script type="text/javascript" src="/script.js.php"></script>


part of stylesheet and javascripts
style.css.php

<?php header ('content-type:text/css'); 
ob_start("ob_gzhandler"); ?>/*<style>*/
@media all { .dontall {display:none; } }
@media print { .dontprint { display:none; } 
@media screen { .dontshow { display:none; } .doshow { display:inline; } }
p { padding:1px; font-size:100%; line-height:135%; list-style-type:square; }
p:first-line { font-weight:bold; }
p:first-letter { font-size:200%; float:left; } 
<?php ob_flush(); ?>


script.js.php

<?php header ('content-type: text/javascript');
ob_start("ob_gzhandler"); ?>
function newuntill(date) {
 var newimg = "http://pics.mysite.com/new.gif";
 var expdate = new Date(date);
 var curdate = new Date();
 if (expdate.getTime() > curdate.getTime()) { document.write('<img src=' + newimg + '>'); }}
(document.getElementById) ? dom = true : dom = false;
function hideit(id) {
 if (dom) {document.getElementById(id).style.visibility='hidden';}
 if (document.layers) {document.layers[id].visibility='hide';} }
function showit(id) {
 if (dom) {document.getElementById(id).style.visibility='visible';}
 if (document.layers) {document.layers[id].visibility='show';} }
<?php ob_flush(); ?>
almostbob
Posting Sensei
3,149 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
 

But I thought that you shouldn't do that because it is not widely compatible.

jonow
Junior Poster
104 posts since Jan 2009
Reputation Points: 10
Solved Threads: 0
 

BS
not widely compatible -- with what --
the user browser sees nothing of what occurs on the server, only the output
by any method
the browser sends accept encoding ..
the server sends appropriate compression
whether .htaccess php.ini or embedded
the result to the user is identical
many servers do not permit php.ini to be changed
many servers do not permit some apache modules to be accessed through .htaccess
whatever works, is good, use whichever your server is set up for
Tutorials are not rigidly correct, they were correct for the person who wrote the tut, but only serve as a starting point for everyone else
(without a starting point its much harder)
(if the tutorial were correct for your server setup, this thread would not exist!)

almostbob
Posting Sensei
3,149 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
 

ok. I will try the other method. I am on my phone now so I can't but I will try later

jonow
Junior Poster
104 posts since Jan 2009
Reputation Points: 10
Solved Threads: 0
 

Having PHP handle static files, such as JS and CSS and gzipping them on the fly is inefficient.

A better approach is to have PHP write a gzipped version of the static file to the filesystem.

You can check on each request if the file has changed, and then re-write the gzipped version if it has.

eg: simple example

function getGzippedPath($path) {
   $ext = substr($path, strrpos($path, '.'));
   $path_gz = dirname($path).'/'.md5($path).'.gz.'.$ext;

   if (!file_exists($path_gz) || filemtime($path) > filemtime($path_gz)) {
      // file has been modified or never created
      ob_start ("ob_gzhandler");
      readfile($path);
      $gz = ob_get_clean();
      if (file_exists($path_gz)) unlink($path_gz);
      file_put_contents($path_gz, $gz);
   }
   return $path_gz;
}


This would take a file path such as/path/to/file.js and write a gzipped version to '/path/to/'.md5('/path/to/file.js').'.gz.js' if the gizzped version does not exist, or if it is the gzipped is older.

digital-ether
Nearly a Posting Virtuoso
Moderator
1,293 posts since Sep 2005
Reputation Points: 461
Solved Threads: 101
 

THREAD HIJACK ALERT :P
--
Thanks Digital-Ether
this is better code, idea I had not seen b4
my site is from database, results on the fly compression is normal, ecexcluded those from being regenerated every time,
now there is a parallel foldertree of compressed static files, site monitor show 83% of accesses from the gzipped folders, processor use is down 20% over yesterday.
the files that never alter are the files used most often
--
end Hijack

almostbob
Posting Sensei
3,149 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
 
THREAD HIJACK ALERT :P -- Thanks Digital-Ether this is better code, idea I had not seen b4 my site is from database, results on the fly compression is normal, ecexcluded those from being regenerated every time, now there is a parallel foldertree of compressed static files, site monitor show 83% of accesses from the gzipped folders, processor use is down 20% over yesterday. the files that never alter are the files used most often -- end Hijack

These libraries may be helpful:
Standalone minification/gzip - http://code.google.com/p/minify/
Wordpress - http://code.google.com/p/phpspeedy/
Joomla - http://code.google.com/p/joomla-php-speedy/

These implement the YSlow recommended optimizations.
http://developer.yahoo.com/performance/rules.html

There is Google's optimization guidelines as well:
http://code.google.com/speed/page-speed/

It is quite new, so I don't know of any implementations in PHP. I have an implementation but it is incomplete at the moment, and requires Java on the server as well in order to "compile" the JS with Google Closure compiler.

If anyone is interested I can post the code.

digital-ether
Nearly a Posting Virtuoso
Moderator
1,293 posts since Sep 2005
Reputation Points: 461
Solved Threads: 101
 

can you expand a little more? lets just say im not too good with PHP

jonow
Junior Poster
104 posts since Jan 2009
Reputation Points: 10
Solved Threads: 0
 

Can you expand a little more? Im not too good with PHP and stuff. Where should I put that?

jonow
Junior Poster
104 posts since Jan 2009
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You