Linux and PHP web application support and development (Bromsgrove, UK)
One often overlooked, area ripe for improvement on websites is that of page weight – namely how much data needs to be downloaded by the web browser before the page is rendered. Most web pages will be constructed from a mixture of Javascript, Stylesheets (CSS), Images and HTML. A BBC news article states that the average page ‘weight’ is approaching 1mb
Why does it matter? Well, although it’s tempting to think everyone must have pretty quick >4mbit ADSL, it’s not always the case –
We seem to be seeing mobile users accounting for around about 10-20% of the traffic to websites at the moment – and this figure is likely to grow as tablet computing becomes more popular. Having a mobile theme on your website is likely to help with this – so resources are loaded via AJAX (see e.g jQueryMobile)
From a developers point of view, there are a number of things we can do to help reduce the ‘weight’ of a web page – for example :
If you’re using Apache, enabling the ‘deflate’ module and then having something like the following in a .htaccess file should work well –
AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html
PHP can also perform the compression for you, but handling the compression through the web server will give better results (more stuff will be compressed).
If a graphic designer has uploaded an image to the website, and it then gets resized through CSS, your browser is technically downloading more data than it needs to. Instances of this can be easily discovered using the Google PageSpeed tool.
Dynamic resizing of images can be done using the phpImageResize tool (and I’m sure there are many other alternatives) as follows – on the assumption we want to only show a 20px x 20px image:
<img src="<?php echo resize('images/whatever.jpg', array('h' => 20, 'w' => 20, 'scale' => true)); ?>">
For one customer we found correctly resizing the images reduced page ‘weight’ from around about 5mb originally to 1mb (it is a very image heavy news site/blog). Such a drastic reduction will make the site feel ‘snappier’ and more responsive to all users, save on server resources (bandwidth) and allow the server to handle more traffic at once. This should lead to more page impressions and therefore greater advertising revenue.
Adding something like the following to a ‘.htaccess’ file should work well, assuming Apache as your web server:
ExpiresByType text/css A7200
ExpiresByType application/x-javascript A7200
Which tells the browser to cache the javascript and CSS files for 2 hours after access. Often the expiry value can be far higher – often days, or even years.
It’s also normally useful to turn off eTag support at this point (“FileEtag None” in .htaccess) – to try and stop browsers trying to validate whether their cache is up to date on each request.
For example, rather than hosting jQuery from your own server (which is probably identical to jQuery on many other servers) you could use e.g.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
Which is both minified and there’s a reasonable chance the end user may already have it cached due to other websites using it. See the Google code site for more information.
‹ The Circuit Breaker Design Pattern PHP UK Conference 2012 ›