linz.id.au

Setting HTTP headers on CSS fonts for great justice (and performance)

2011-02-08T00:53:00-05:00

Some tips for configuring your web server for optimum performance when using CSS fonts (’@font-face’, as some would call it).

1. Certain types of font files don’t have any sort of compression in the actual file, so your web server should be configured to serve them up compressed. Compressing the font files can give significant file size savings, Museo Sans weighs in at 48KB for the TTF version, gzip compression drops this to 26KB. Compressing SVG can give even greater savings – from 53KB down to 15KB.

2. Setting a far future Expires header for font files will make them cachable & reduce HTTP requests on subsequent visits.

3. In addition, not having the correct content type can cause display issues (i.e. they don’t display at all).

This handy table summarises what is what:

Name	Extension	Compressed file?	Content type
EOT	.eot	yes	application/vnd.ms-fontobject
TrueType	.ttf	no	font/ttf
OpenType	.otf	no	font/opentype
WOFF	.woff	yes	font/x-woff
SVG	.svg	no	image/svg+xml

Clear as mud? Okay, let’s move on to…

Configuring the server

Three things need to be done: - enable gzip compression for the non-compressed fonts (TTF, OTF & SVG) - add correct content types for all font types - add far future expires header for all font files

Configuration for specific servers will differ, but these should get you started:

Apache 2:

IIS7:

Nginx:

This doesn’t cover all the other juicy bits you can do to improve performance when using CSS fonts – removing kerning, subsetting, base64 encoding, etc. – these will be dependent on your own personal preferences & the needs of your particular project.

Impact of attribute order on compression

2010-12-19T19:19:00-05:00

One of my personal coding standards is to keep similar HTML attributes grouped together in a consistent order at the start of the element, e.g.

12	<script type="text/javascript" src="foo"></script><script type="text/javascript" src="bar"></script>

vs.

12	<script src="foo" type="text/javascript"></script><script src="bar" type="text/javascript"></script>

This helps with readability, maintainability, &c. &c.

Recently another thought occurred to me: that this would also help with HTTP compression.

I ran a quick test using these two (very simplified) HTML documents:

With the following results (taken from the Firebug Net panel):

File	Size (uncompressed)	Size (compressed)
ordered.html	240b	145b
unordered.html	240b	148b

So, the ordered version gives us a saving of 3 bytes – not a massive gain, but in a much larger document it could be significant.

I imagine this would also hold true (and possibly give much more significant savings) for CSS if property/value pairs that are the same are grouped together.

For those of you interested in such things, I tested the compressed vs. uncompressed HTML by first soft linking the HTML files:

ln -s ordered.html ordered-uncompressed.html
ln -s unordered.html unordered-uncompressed.html

The adding the following .htaccess:

AddOutputFilterByType DEFLATE text/html
SetEnvIfNoCase Request_URI uncompressed no-gzip dont-vary

which disables output compression for any URI that contains ‘uncompressed’.

Redesign in progress

2009-03-28T12:00:00-04:00

I’ve finally started doing the redesign I’ve been promising for so long.

It’s not finished yet, so if you whinge about it not working in whatever stupid browser you’re using then I’ll just laugh at you :p

TODO:

Finish the background (cloning & dodging & burning etc. to make it tile horizontally)
Get the skipnav thinger workign better
Funky JavaScript animation
Print CSS
Sekrit awesome stuff that will blow your freakin mind (if I ever finish it)
Spinning bits
Bacon

Fun bits:

Using HTML5 properly (aww yeah)
Liquidy-proportional-whatever layout so you can stalk me on your iPhone or your 36inch 29000×4282 monitor or whatever

Spinning Flaming Skull

2008-11-12T12:00:00-05:00

Spinning Flaming Skull was created to fill a gaping void that existed on teh interwebs – until December 9th 2008 there did not exist an animated gif of a skull that both span and was on fire.

And turn your speakers up, the soundtrack rocks!

Webjam 8

2008-11-09T12:00:00-05:00

Webjam is back!

Webjam 8 is on Thursday the 25^th of September, just after the first day of Web Directions South ‘08.

I may even present What Cheeses You Off? if you’re lucky.