Web Page EnvelopeWhen I built this website I wanted it to be as fast as possible for it’s visitors. To this end, I implemented the majority of the Yahoo! performance guidelines (as documented in an earlier article).
Unfortunately, I wasn’t able to secure the biggest win —
The ability to compress web pages is important in a world where the popularity of mobile browsers is growing by the day. Mobile data is expensive and often capped, so if we can reduce the volume of the data we serve then we should.
I decided to write a little wrapper for my web-pages, one that would create the necessary headers and compress the page data prior to transmission.
What It Does
The wrapper will take a URI or URL and serve the corresponding file with headers for ETags, Expires and caching directives. It will then compress the content and deliver it to the browser. Files served via this wrapper will be smaller than their source.
The wrapper can serve both static and programmatically generated content. This includes the output of scripts and regular file-types such as: HTML, XML, JS and CSS.
How to Use
Adjust the header values and define variables to match your requirements. Then simply call the wrapper with the URI/URL of the target file as follows:
http://example.com/web-page-envelope.php?uri=/blog/hello-world.htmhttp://example.com/web-page-envelope.php?uri=http://example.com/scripts/hello-world.php
The most elegant way of doing this is by using mod_rewrite:
# Example rewrite rule
RewriteEngine on
RewriteRule ^(blog\/([A-Za-z0-9_-]+)\/?)$ web-page-envelope.php?uri=/$1 [L]Final Note
Because of the additional processing, there is a slight performance overhead in using this wrapper and I wouldn’t recommend it for a heavily-trafficked website. In my case, I consider the performance penalty to be an acceptable trade-off for the potential bandwidth savings.
Code
This project is on GitHub.