Forest Software

Web, SEO and IT & Business Advice for the Smaller Business

Website Development

Last updated on April 28th, 2012 at 05:52 pm

In our 1st article on this subject ( how to squeeze some extra speed from your page ) 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.  This included removing unwanted spaces in the html, css files and optimising images and were things that almost anyone can do.

This article shares how I got a 68% saving in file sizes as a miminum on my website pages, reduced the time taken to send css files and javascript.  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.

First, you should know that this works on Linux servers and not Microsoft IIS servers.

The first thing that I did was to compress css and javascript files.  To do this I created a php file calles csszip.php that had the following code in it :-

<?php
ob_start ("ob_gzhandler");
if( isset($_REQUEST['file']) ){
$file = $_REQUEST['file'];
if( goodfile($file) ){
$ext = end(explode(".", $file));
switch($ext){
case 'css':$contenttype = 'css';break;
case 'js':$contenttype = 'javascript';break;
default:die();break;
}
header('Content-type: text/'.$contenttype.'; charset: UTF-8');
header ("cache-control: must-revalidate");
$offset = 60 * 60;
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
$data = file_get_contents($file);
$data = compress($data);
echo $data;
}
}
exit;
function goodfile($file){
$invalidChars=array("\\","\"",";",">","<",".php");
$file=str_replace($invalidChars,"",$file);
if( file_exists($file) ) return true;
return false;
}
function compress($buffer) {
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
return $buffer;
}
?>

Then, in the .htaccess file the following lines were added :-

 # compress css and js files
RewriteRule ^(.*).css$ /csszip.php?file=$1.css [L]
RewriteRule ^(.*).js$ /csszip.php?file=$1.js [L]

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 brower can handle compression (all modern ones can).  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.

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

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

  • The home page dropped by 64% to 5.72kb
  • The html colour code page dropped by 83.96% in size
  • The office types page dropped by 65.2%
  • The starting page of our business directory dropped by 75.56%

As I mentioned above, this is not something that you should attempt if you are not familiar with php code and changes to htaccess files – and I would not recommend taking code from just any website and adding it to your own site unless you understand what it is doing, but Google webmaster tools is already reporting an improvement in page downloads and since page load times are a small factor in the results now on Google I figured that any improvement is worth having if it helps keep the site in the rankings for our target phrases.

Last updated on September 5th, 2010 at 06:08 pm

The recent Google announcement that they were officially adding a new signal to their search ranking algorithms to take account of site speed (Google blog) prompted me to write these few tips about getting your page to load as quickly as possible.

There are many things you can do to speed up a page, these range from the purely technical that you may or may not be able to implement through to much more simple options.

Images

File size and resolution – Do you have images on your page?  I once looked at a site for a prospective client that had a photo of a boat on the home page, the image looked nice but when I looked at the image properties the file was 4 Mb in size – the client’s designer had taken a digital photograph, placed in on the page and resized it.  By taking the photo into a graphics editor, changing the resolution to 72dpi (dots per inch)  (most monitors display at 72 or 96dpi while printers work at 300dpi) and resizing the image in the editor we reduced the file size down to a much more reasonable 120Kb.  This means that the image took only 3% of the time that the original image took to download.

HTML code

Whitespace – If you write your own code have a look at the number of blank lines and amount of whitespace in the code – I often work on pages that have multiple spaces between words (normally as a result of someone that has copy and pasted from a word document).  Removing the extra whitespace can reduce the amount to time taken to send the code from your server to the browser.  This is often only 1 or 2Kb of data but every little bit helps.

Extra code – If you are copying and pasting from some word processors or programes like MS Publisher (yes some people design their web pages in publisher and send them to us to build) there is often lots of extra code embedded in the page.  Removing this can take some time and effort but can produce a good saving in file size.

Extra code (unwanted html) – older pages and pages that have been put together in a graphics html editor can often have unwanted spans, divs, font changes etc.  These often are opened and immediately closed and if they are not needed for page layouts (some layouts use empty divs) they they can be removed to once again save space.

Styles – If you are using styles on your pages try to put the common ones into a style sheet and only embed those styles that will be used once and only on that page.

Styles CSS files – The same thing applies to CSS files as to webpages where whitespace is concerned – I have worked on style sheets where the creator has used 20 or 30 blank lines between sections, this resulted is a style sheet that was both unreadable and extremely large.

All of these are simple ways to improve the speed of your page and, as a by product, reduce the band width that your site uses when sending the pages to visitors.

More technical ways of speeding up your web pages will be in another article – but at least the tips above will give you a good start.

About this blog

Over the years we have published many articles based around the questions that we get asked from small businesses relating to marketing, SEO, general business advice and other subjects.  You can find a list of related articles grouped by subject below or can even search for a word or phrase or browse our recent articles.

We hope that you find our articles useful.

Other sites of interest

The Crafty Kitten, a local craft business.

UK Business Services directory.

Are you a UK based firm of Accountants looking for a new websit for your firm? Check out totalSOLUTION,for responsive, cutting edge websites for accountants, viewable across all modern devices. totalSolution specialise in designing and building websites for UK accountancy firms.

Categories