How To Compress CSS/JavaScript Files With PHP

A quick way to speed up your site is to simply limit how much the user has to download. This tutorial will show you how to automatically gzip (compress) your files with PHP.

Speed Benefits

CSS and JavaScript files for some sites can become quite large. Using caching and compression, your website download times can be drastically improved. Text files are known for compressing very well. Sometimes reducing sizes by up to 80%. This is specifically important for JavaScript files as they lock down loading of other assets until they are done. Of course there are ways around this, but we won’t get into that here.

Starting Off

First we need a website. For this example we are going to go super simple. It probably isn’t worth compressing such a simple example, but this is just for demonstration purposes.

Here is the HTML:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-type” content=“text/html; charset=utf-8”>
<title>test</title>
</head>
<body>
<div id=“text”>Sample Text</div>
</body>
</html>

We also need some CSS:

1
2
3
4
5
6
body{
background-color:#ededed;
}
#text{
color:#06C;
}

And some sample JavaScript:

1
alert(“test”);

How it Works

There are a couple of ways of compressing files with PHP. One is using an .htaccess file, and the other is placing some PHP at the top of your CSS and JavaScript files. I chose the latter simply because it’s easier.

The idea is to change your .css and .js into .php files. That way your asset files are passed through PHP and are gzip’d.

The Files

For this example I’ll create 4 PHP files, two being the CSS and JavaScript files, and the other two being includes that do the magic.

testCSS.php : CSS file
testJS.php : JavaScript file
gzipCSS.php : CSS Header include file
gzipJS.php : JavaScript Header include file

I seperated the header information into seperate files so it’s simple to reuse the code, feel free to add the contents of these files directly in to your CSS and JavaScript files.

Lets have a look at the asset files:

testCSS.php

1
2
3
4
5
6
7
8
9
10
<?php 
    require_once(“gzipCSS.php”);
?>body{
background-color:#ededed;
}
#text{
color:#06C;
}

testJS.php

1
2
3
4
5
<?php 
    require_once(“gzipJS.php”);
?>alert(“Test”);

Simple enough, just take your original CSS and JavaScript file and include the PHP that relates to that type of file.

gZippage

Now here is where the magic happens. Inside the include files we’ll be placing the PHP to gzip the file and a header to tell the browser what type of file it is suppose to be. I’ve also added some caching, this isn’t required for gzip to work, it’s just a good idea to help speed up download times.

gzipCSS.php

1
2
3
4
5
6
7
8
9
10
11
12
<?php
//PHP gzip method
ob_start (“ob_gzhandler”);//Header to tell browser what kind of file it is.
header(“Content-type: text/css; charset: UTF-8”);//Caching
header(“Cache-Control: must-revalidate”);
$expires = “Expires: “ . gmdate(“D, d M Y H:i:s”, time() + 3600) . ” GMT”;
header($expires);
?>

The gzipJS.php file is pretty much the same, the only difference is the header content-type.

gzipJS.php

1
2
3
4
5
6
7
8
9
<?php
ob_start (“ob_gzhandler”);
header(“Content-type: text/javascript; charset: UTF-8”);//Caching
header(“Cache-Control: must-revalidate”);
$expires = “Expires: “ . gmdate(“D, d M Y H:i:s”, time() + 3600) . ” GMT”;
header($expires);
?>

Putting it Together

The only thing that is left is to include your CSS and JavaScript files into your main file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-type” content=“text/html; charset=utf-8”>
<title>test</title><!– Include CSS and JavaScript PHP files. –>
<link rel=“stylesheet” href=“testCSS.php” type=“text/css” media=“screen” charset=“utf-8”>
<script src=“testJS.php” type=“text/javascript” charset=“utf-8”></script>
</head>
<body>
<div id=“text”>Sample Text</div>
</body>
</html>

El Finito

That is it here is an example of the working file.

Read More

Scroll to top