Member Avatar for jonow

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

  • 3 Contributors
  • 9 Replies
  • 280 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by jonow
Member Avatar for almostbob

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(); ?>
Member Avatar for jonow

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

Member Avatar for almostbob

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!)

Edited by almostbob because: n/a
Member Avatar for jonow

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

Member Avatar for digital-ether

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.

commented: Thanks, this is better, +2
Member Avatar for almostbob

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

Edited by almostbob because: n/a
Member Avatar for digital-ether

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.

Member Avatar for jonow

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

Member Avatar for jonow

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.