Dynamic content, and why it sucks

PHP is all about creating dynamic web pages and content that can change on the fly. Static pages are awful to maintain and frame based web designs are not particularly fun to do, as most starting webmaster will realise sooner or later. Making the websites dynamic is a naturaly way of doing things and it works well in general. There's just one tiny little problem with dynamic content, which happens when you start turning your static files of the website into dynamic files, such as your stylesheets, images and other external objects linked from web pages.

I have seen, for example, a PHP script for compressing your CSS stylesheet before it is sent to the browser. You might think that there is absolutely nothing wrong with that. I mean, all your web pages are already dynamically created, then why not your stylesheet too? As I've said in my previous post about the useless optimizations, the biggest optimization doesn't often come from the code itself, but from caching methods used.

Indeed, one very important thing to remember in the web is that browsers can cache quite a bit of stuff for the user, which saves bandwidth and also speeds up the web for the browser (when you don't need to load every image on every page load, for example). The reason that things such as stylesheets are provided in external file, rather than the page itself, is because the browser can cache the external stylesheet on the computer. While it doesn't make much difference to the web developer, it does make a big difference to the user viewing the website.

In order to understand the local browser caching, you need to understand a bit about the HTTP protocol. Not much, just a little. When you try to open a page in the web, the browser sends a bunch of data called "request headers" to the server, which the server uses to determine what content is returned. These headers contain a bunch of information, which I will get more into later. The server responds similarly with bunch of data called "response headers" which contains information about the content. The actual content of the page, if any, is sent right after the headers.

Basically browser caching works so, that in the response headers, the server tells the browser when is the last time content was modified and the browser stores this along with the cached content. Next time the browser requests the same content it sends a field in the request headers which indicates the last modification time the browser received from the server. The server then checks if the content has been modified since that time, and if it isn't, the server just sends a header to the browser that no changes have been made to content, instead of sending the entire page again, which allows the browser to use the copy in it's local cache. For example, instead of downloading a 100kb style sheet all over again, the browser just uses the copy it already has, because the file hasn't been changed since it the last time it was downloaded.

This same caching method applies to pretty much everything on the web: Stylesheets, images, javascript files, anything. This method of retrieving web pages is called "Conditional Get". To be honest, the actual method of doing things is slightly more complicated, but you should get the idea, anyway.

The problem with dynamic content is that the server can't determine the last modification time for the files, because they basically change every time the user requests the file. That's why they can't be cached locally by the browser. So, when using a CSS compression script to dynamically create a CSS file on request, you are actually multiplying the bandwidth consumption rather than reducing, because the browser can't cache the file and needs the request it again on every page load.

Stylesheets may not be the best example of this, of course, because dynamic stylesheets are not exactly a commonly used practice on the web. Dynamic images are much more common example, because people use them more often without thinking about the consequences. Think about script that generates a dynamic signature for you to use on your forum. Now, every time every user of the forum views a topic with your post, they have to redownload the image from your server, which is probably regenerated on every request. Not only does it waste large amount of bandwidth, but it is also very costly on your server, as image processing is quite resource itensive.

Obviously, there are solutions, as you can see quite a few dynamic signatures and other dynamic things on the web. There are two main solutions for this: Build static content with dynamic scripts or implement support for conditional get with PHP itself.

Building static content with dynamic scripts means that you use another script to build the content when ever it changes and then link that static content instead of the script that generates it. A good example is RSS feeds. RSS feeds are easily loaded with RSS readers numerous times a day. However, these feeds are generally supposed to reflect content of a website, which means they are dynamic by nature. Building the entire RSS feed can be very resource intensive on popular websites, since RSS readers tend to make requests much more frequently than any human would. Thus, a good idea is to generate the RSS feed file only when the content is actually changed and only give link to the static generated RSS file. That way, you allow server software to take care of handling conditional get for the feed readers, which makes it very efficient.

Obviously, this doesn't work very well with dynamic signature images, which can't be easily generated when their content "changes". Often the images need to be generated by the browser's request. Implementing conditional get in PHP is relatively easy, however. Conveniently, I've written a tutorial about it, which goes into more detail about the exact procedure.

Even though it's possible to implement conditional get with PHP, it's still better to use static files whenever possible. This is becauase using php files will always invoke the PHP parser, which consumes server resources, even if the processing is not very intensive when "Not modified" header is sent. With static files, you also save the resources needed to parse the PHP file in addition to the bandwidth saved by not needing to transfer the entire file.

To summarize, PHP is a great tool, which allows you to create dynamic content, but you should still use static files whenever possible. This can save you considerably amount of bandwidth and server resources especially on a popular website.