PageSpeed : Tip to improve the score

Although the internet connections are becoming faster, lately it is taking in consideration some aspects that speed up the page load.

Unifying the Javascript and CSS files

It is required that they are sent compressed, or at least minified. Besides, to decrease the number of request to the server, we are requested to combine them in only one file, but not all the pages use the same scripts and there is where my tip-suggerence comes, to use a PHP script that on demand combines the scripts we need.

We are going to separate the name of the files that are needed with dashes, although any other symbol could be used like «/» if this limitation in the name of your files make you uncomfortable. The PHP script will receive the list in the parameter «files» and also another parameter «ext» indicating whether it is a list of javascript or css files (to adapt the «Content-Type» header).

We create a file «index.html» which will request the scripts and styles.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>PageSpeed : Truco para subir nota</title>
	<link rel="stylesheet" type="text/css" href="csi/common.css" />
	<script type="text/javascript" src="csi/jquery-home.js"></script>
</head>
<body>
</body>
</html>

Now we create a file .htaccess which will redirect the .js and .css file request to the PHP script. I always liked to use the folder «csi» (client side include).

RewriteEngine on

RewriteRule ^csi/([\w-]+)\.js$  /csi/joiner.php?files=$1&ext=js
RewriteRule ^csi/([\w-]+)\.css$ /csi/joiner.php?files=$1&ext=css

The PHP script that combine the files basically has to do an include for each one, but in order to do a good work we are also going to watch the last modified date of each one ($lv means last version) and we are going to calculate which is the joungest ($jgr means junger and it is initialiced with my birthday but you can put yours) and so we response to the browser the «Last-Modified» header. Because of the same reason, to do a good work, we are going to check if the browser has a version in cache and has told us the date of this. If it is the same we are going to say, we consider that copy as valid and therefore we are not going to send the same it has, so we clean the buffer of PHP, we set the response code 304 and we abort the script execution.

<?

	$ext   = $_GET["ext"];
	$files = $_GET["files"];
	$files = split("-", $files);

	if($ext=="js")      header("Content-Type: application/javascript");
	elseif($ext=="css") header("Content-Type: text/css");

	$jgr = mktime(0,0,0,25,2,1977);

	foreach($files as $file) {
		$lv = filectime("{$file}.{$ext}");
		$jgr = max($jgr, $lv);
		include("{$file}.{$ext}");
	}

	$ah = getallheaders();
	if($ah["If-Modified-Since"]) {
		$lv = str2time($ah["If-Modified-Since"]);
		if($lv==$jgr) {
			ob_clean();
			header("Status: 304 Not modified");
			die();
		}
	} 

	header("Last-Modified: ".gmdate("D, d M Y H:i:s", $jgr)." GMT");

?>

noviembre 1st, 2010 · Etiquetas: · Categorías: Programación