A quick way to speed up your website

Getting a faster internet is great – it gives us loads of opportunity to improve the browsing experience through more advanced javascript and designs – I still remember the dreadful websites of the late 90’s that took an hour to download and only showed a few random pieces of text on a bright pink (or yellow/ green) background.

Unfortunately not everyone is lucky enough to have the latest technology and with mobile internet becoming more and more popular it’s still a very good idea to try to optimise site download time.

Optimising javascript and css is a simple way to speed up the loading of your site. However with more and more frameworks being created and projects growing in scope it’s getting harder and harder to manage these things. Nobody wants to optimise a css framework each time it’s updated, and invariably these things are made up of multiple files anyway – so I put together a simple script to speed up the download of these files.

Theory

When it comes to css and javascript there are a few things that can affect the download speed – the main factors are…

1. The number of files. The more connections that are made to the webserver the slower things download.
2. The amount of code (which in turn increases filesize). This is fairly obvious in principle, but people often forget how big css and javascript libraries can be, and optimising them by hand is not feasible.
3. The speed of the users internet connection. Something I am always very conscious of. As much as it sucks – not everybody is on broadband, and not everyone with a broadband connection can download things at the same speed you can

Unfortunately number 3 is not something we can change. Yes, connections are getting faster, but that doesn’t mean we should use large javascript and css libraries without thinking about visitors who are less fortunate than ourselves.

Solution

The easiest way to reduce the number of files to download would be to copy and paste them all into a single document but that’s a pain to update each time you change something. So I developed a simple php script that let’s you combine lots of different javascript or css files into one.

The script is below…

<?php
	/*
		select the content type this script will be serving. This script was
		designed for javascript and css files but will no doubt work with other
		text files
		
		javascript = text/javascript
		css = text/css
	*/
	$s_contentType = "text/javascript";
	
	/*
		file extension for the specified content type
		
		javascript = js
		css styles = css
	*/
	$s_fileType = "js";
	
	/*
		base folder to load the files from
		this is from the site root so will be something like
		http://www.websitename.com/basefolder/
	*/
	$s_baseFolder = "/scripts/";
	
	/*
		use gzip compression or not?
		 
		this can also be done on the server side or via htaccess but not all
		servers give access to these things so this is a simple workaround. It
		may not work or may not be desired so set below as required
	*/
	$s_useGzip = true;
	
	// -----
	// THE BIT THAT DOES STUFF
	// -----
	
	$files = $_GET["f"];
	$files = addslashes(stripslashes($files));

	if($files != null) {	
		// content type
		header("Content-type: " . $s_contentType);

		// caching
		$offset = 3600 * 24;
		header("Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT");
		header("Cache-Control: max-age=" . $offset);

		if($s_useGzip) {
			ob_start("ob_gzhandler");
		}

		// get files
		$files = split(",", $_GET["f"]);

		// print out the files
		foreach($files as $file) {
			if($file != "") {
?>
/* [INCLUDE FILE] <?php echo $file; ?> */
<?php 
				$file = $_SERVER["DOCUMENT_ROOT"] . $s_baseFolder . $file . "." . $s_fileType;
				if(file_exists($file)) {
					$fileData = readfile($file);
				} else {
?>
/* [FILE NOT FOUND] <?php echo $file; ?> */
<?php 
				}
			}
		}
		
		if($s_useGzip) {
			ob_end_flush();
		}
	}
?>

To make use of the script you would have to set the different properties at the top (content type, file type, base folder and gzip compression). The precautions over file extension and folder location are in place to prevent people from being able to include random files from your site (such as wp-config).

You can then work out your new file url. The filenames should be in a comma separated list without extensions. It should be called something like this…

script.php?f=file1,file2,file3

Because the content type has been set already it can then replace all of the previous scripts (javascript/ css styles) on the site with a single file call.

<-- css file -->
<link rel="stylesheet" type="text/css" href="script.php?f=file1,file2,file3" />

<-- javascript file -->
<script src="script.php?f=file1,file2,file3" type="text/javascript">

I should point out that I’m not a security expert so if anybody has any ideas for improving the script then please let me know and I’ll update accordingly.