PageSpeed : Truco para subir nota

A pesar de que las conexiones son cada día más rápidas, últimamente se está mirando mucho algunos aspectos que agilicen la carga de las páginas.

Unificar los ficheros Javascript y CSS

Se requiere que sean transferidos comprimidos, en su defecto recomiendan que los minimices. A parte, para reducir el número de peticiones, solicitan que los combinemos en un solo fichero, pero claro, no todas las páginas usan los mismos scripts y ahí es donde llega mi truco-sugerencia, utilizar un PHP que bajo demanda combine los scripts que necesitamos.

Vamos a separar los nombres de los ficheros que se necesiten con guiones, aunque podría utilizarse algún otro símbolo como la barra «/» si os incomoda esta limitación en vuestros nombres de fichero. El script PHP recibirá el listado en el parámetro «files» así como otro parámetro «ext» indicando si se trata de ficheros javascript o css (para adaptar la cabecera «Content-Type»).

Creamos un fichero «index.html» que hará llamadas a los script y estilos.

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

Ahora hacemos un fichero .htaccess que dirija las peticiones de ficheros .js o .css al script PHP. Siempre me ha gustado usar la carpeta «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

El script en PHP que unifica los ficheros esencialmente tiene que hacer un include por cada uno, pero para hacer bien el trabajo vamos a obtener la última fecha de modificación ($lv significa last version) y vamos a recordar cuál es el más joven ($jgr significa junger y está inicializado con la fecha de mi nacimiento, tu puedes poner la tuya) y así devolveremos al navegador la cabecera «Last-Modified». Por la misma razón, para hacer bien el trabajo, vamos a comprobar si el navegador tenía una versión en caché y nos ha indicado la fecha de ésta. Si fuera la misma que vamos a indicar, consideramos que esa copia es válida y por tanto no vamos a enviarle lo mismo que tiene por eso limpiamos el buffer de PHP, introducimos el código de respuesta 304 y abortamos la ejecución del script.

<?

	$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