GZIP Problem with CSS and JavaScript

Question

jonow 0 Junior Poster

14 Years Ago

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

php

3 Contributors
9 Replies
277 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by jonow

All 9 Replies

almostbob 866 Retired: passive income ROCKS

14 Years Ago

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 866 Retired: passive income ROCKS

14 Years Ago

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 14 Years Ago by almostbob because: n/a

digital-ether 399 Nearly a Posting Virtuoso

14 Years Ago

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.

almostbob commented: Thanks, this is better, +2

Reply to this topic

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.

jonow 0 Junior Poster · Answer 1 · 2009-12-06T22:24:36+00:00

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

jonow 0 Junior Poster · Answer 2 · 2009-12-07T07:07:11+00:00

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

almostbob 866 Retired: passive income ROCKS · Answer 3 · 2009-12-07T16:42:29+00:00

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

digital-ether 399 Nearly a Posting Virtuoso Team Colleague · Answer 4 · 2009-12-07T17:49:04+00:00

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.

jonow 0 Junior Poster · Answer 5 · 2009-12-08T11:47:18+00:00

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

jonow 0 Junior Poster · Answer 6 · 2009-12-18T06:14:20+00:00

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

GZIP Problem with CSS and JavaScript

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers