{"id":49,"date":"2010-04-29T12:10:56","date_gmt":"2010-04-29T11:10:56","guid":{"rendered":"http:\/\/www.forestsoftware.co.uk\/blog\/?p=49"},"modified":"2024-05-03T20:39:50","modified_gmt":"2024-05-03T19:39:50","slug":"speeding-up-your-webpages-part-2","status":"publish","type":"post","link":"https:\/\/www.forestsoftware.co.uk\/blog\/2010\/04\/speeding-up-your-webpages-part-2\/","title":{"rendered":"Speeding up your webpages \u2013 Part 2"},"content":{"rendered":"Reading Time: <\/span> 3<\/span> minutes : <\/span><\/span>

In our 1st article on this subject ( how to squeeze some extra speed from your page<\/a> ) we looked at some of the things that anyone can do to reduce the size of your web pages and speed up the visitors experience.\u00a0 This included removing unwanted spaces in the html, css files and\u00a0optimising images and were things that almost anyone can do.<\/p>\n

This article shares how I got a 68% saving in file sizes as a minimum on my website pages, reduced the time taken to send css files and javascript.\u00a0 This improves the speed that the pages are displayed in the visitors browsers and reduces the bandwidth used by the server all for very minimal extra work.<\/p>\n

First, you should know that this works on Linux servers and not Microsoft IIS servers.<\/p>\n

The first thing that I did was to compress css and javascript files.\u00a0 To do this I created a php file called csszip.php that had the following code in it :-<\/p>\n

<?php
\nob_start (\"ob_gzhandler\");
\nif( isset($_REQUEST['file']) ){
\n$file = $_REQUEST['file'];
\nif( goodfile($file) ){
\n$ext = end(explode(\".\", $file));
\nswitch($ext){
\ncase 'css':$contenttype = 'css';break;
\ncase 'js':$contenttype = 'javascript';break;
\ndefault:die();break;
\n}
\nheader('Content-type: text\/'.$contenttype.'; charset: UTF-8');
\nheader (\"cache-control: must-revalidate\");
\n$offset = 60 * 60;
\n$expire = \"expires: \" . gmdate (\"D, d M Y H:i:s\", time() + $offset) . \" GMT\";
\nheader ($expire);
\n$data = file_get_contents($file);
\n$data = compress($data);
\necho $data;
\n}
\n}
\nexit;
\nfunction goodfile($file){
\n$invalidChars=array(\"\\\\\",\"\\\"\",\";\",\">\",\"<\",\".php<\/a>\");
\n$file=str_replace($invalidChars,\"\",$file);
\nif( file_exists($file) ) return true;
\nreturn false;
\n}
\nfunction compress($buffer) {
\n$buffer = preg_replace('!\/\\*[^*]*\\*+([^\/][^*]*\\*+)*\/!', '', $buffer);
\n$buffer = str_replace(array(\"\\r\\n\", \"\\r\", \"\\n\", \"\\t\", '\u00a0 ', '\u00a0\u00a0\u00a0 ', '\u00a0\u00a0\u00a0 '), '', $buffer);
\nreturn $buffer;
\n}
\n?><\/code><\/p>\n

Then, in the .htaccess file the following lines were added :-<\/p>\n

\u00a0# compress css and js files
\nRewriteRule ^(.*).css$ \/csszip.php?file=$1.css [L]
\nRewriteRule ^(.*).js$ \/csszip.php?file=$1.js [L]<\/code><\/p>\n

The next thing that I did was to put some php code into the top of every page (my server is already set up to allow php to be embedded in html pages) that compresses (gzips) the page contents if the visitors browser can handle compression (all modern ones can).\u00a0 While I was at it I realised that the server did not return the date and time of the last changes to the page do this was also added so that when bots come and visit the page they know that nothing has changed so that they do not need to download the page again – a further saving on time and bandwidth.<\/p>\n

<?php
\n# if the brower accepts compression than gzip if, if not proceed as normal
\nif (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start(\"ob_gzhandler\"); else ob_start();
\n# The Last-Modified time is the newer of this script's modification time
\n# and the File contents file modification time
\n$mtime = filemtime($_SERVER['SCRIPT_FILENAME']);
\n$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
\nheader(\"Last-Modified: \" . $gmt_mtime);
\n?><\/code><\/p>\n

Finally the pages were checked in broswers and also using the gzip compression testing tool at http:\/\/www.whatsmyip.org\/http_compression\/<\/a>.\u00a0 This tool shows the savings in size, for example :-<\/p>\n