One of the reasons I moved this site away from Wordpress is because the performance was very poor. By using a static framework instead of having to dynamically fetch content from a database and re-render the pages with each view, the static architecture vastly speeds up the server-side rendering.
However, the biggest performance effects come on the client side. Specifically, there are a number of things that you can do to improve the performance of almost any site:
</html>tag. When the browser encounters a
- Cache everything. Resources load the fastest when they don’t have to be fetched from the source each time.
- Compress the content. Using GZIP compression can reduce the total amount of data transferred by 50% or more.
There are a number of other tips and tricks that you can do, but these will have the most impact. See the Yahoo! best practices for speeding up your site.
Click here for a performance analysis of the home page of this site.
For reference, here is the
.htaccess file that I use:
From top to bottom:
- Custom 404 page.
- Set expires headers for CSS, audio, and other files to be some distance in the future. This ensures that the browser can cache them.
- Compresses everything that can be compressed1.
- Turning off ETags. (Read the Yahoo! best practices; ETags are only useful if you’re running on a single server. I have redundant servers behind a load balancer.)
The real “magic” here is in the combination of the
RewriteRule lines. The
ExpiresByType ensures that CSS and
Expires: header set to 10 years in the
future. This means that the user’s browser will keep them in its
cache, essentially forever.
However, through the magic of the Apache mod_rewrite module, I’m not renaming the file each time; I’m just giving it a different URL.
I’m using Wok, a static
site generator written in Python. Wok allows “hooks”; small pieces
of code that are executed at specific points in the generation
site.start hook is called at the beginning, before
anything is generated.
site.start hook, I have a little bit of code that creates
a variable containing the current UNIX timestamp (the number of
seconds since January 1, 1970). In the templates that create the
base HTML for the pages, I insert that timestamp into the URL for
the CSS and JS files.
So, for example, the CSS file that resides here:
Gets turned into this when the HTML is generated:
Note that the file itself is not moved; it’s only the reference to
it in the HTML that is modified. And here’s where
comes into play. This rewrite rule:
RewriteRule ^v[0-9]+(/.*)$ $1 [PT]
strips the “version” prefix (a literal “v” at the beginning followed by a string of numbers) and continues processing the file.
Note: if you’re looking through the source code, you’ll see that
there’s a bunch of other things that the
links.py file does. This
is mostly to support Wok’s development server, which does not use
Apache. On the dev server, the hooks create a symbolic link from
the version directory to the top-level directory, thus resulting
in the correct URL for the static assets. Those links are removed
when the site is published.
Note that compression may cause problems on some older browsers. Frankly, I don’t care. If you’re still running IE5, then I don’t need you as a reader. ↩︎