Attn: to detail

Mostly about speeding up a web site

I made several subtle UI updates to Design Opus, mostly minor things, but I think it looks a lot better now, and folks on low-bandwidth connections will notice a big difference in the speed of the site.

Small things

  • Local navigation (the green box): I got rid of the thin border and rounded corners in favor of the styling I used for the spotlight box on the homepage. I also made the active-article pointer similar to the gold ul bullets used elsewhere.
  • I totally overhauled the site footer to make everything resize smoothly if someone increases text-size in their browser, as I often do when my eyne are tired.

Optimizing images & styles

I was also concerned about the page-load speed— broadband users might not notice, but the page-weight was over 1MB, and things were sluggish.

  • I optimized all the images using ImageOptim — ImageOptim was able to shave off almost 10% of the image disk-space without sacrificing quality.
  • Still, the biggest files were the map and the semi-transparent grunge overlay used in the header (what makes the map look weathered). Even after ImageOptim, the files were massive. Since the grunge is mostly transparent, I created a more pixelated version of it that loads much quicker— this reduced that file’s size from almost 900K to 16K! Because of its transparency, the difference is negligible compared to the tradeoff in bandwidth. For the map, I changed the file format from high quality PNG to a medium quality JPG.
  • The footer had another massive repeating PNG of the map, grunged up with the same overlay. I nixed this and created a smaller 150px repeating background image that makes the area much more versatile if viewed at different sizes.
  • I enabled Shaun Inman’s css-cacheer, a PHP utility that intercepts all requests to the CSS directory and delivers a compressed version of your stylesheet. (It has several other capabilities too, which I haven’t delved into.)

Giving Textpattern a boost

I researched and learned more about speeding up Textpattern too. I already use external CSS files, rather than Textpattern’s built-in style editor, but I knew there was more I could do.

One thing I did was install a plugin called asy_jpcache, which caches the site between updates. This had a major impact on the site’s speed. I also offloaded logging to Google Analytics, and turned it off in TXP (Textpattern has built in hit tracking).

The third major thing I did was enable FastCGI on the Tiger Tech server (Tiger Tech is my awesome hosting provider). Even though database access wasn’t slowing my site down before (Textpattern is naturally light and nimble), the results are astounding— this just came in from Tiger:

According to ApacheBench, your home page is now serving over 120 page loads per second, so you can handle any conceivable load in that sense.

EDIT: As noted on the Tiger Tech support page, FastCGI also speeds up other content publishing tools, such as Movable Type, Wordpress, and Drupal.

Wow. This earned asy_jpcache a place on my TXP Essentials list.

Unsettled display issues

I did note a few remaining minor display bugs though— all but one of which pertain to Windows and Internet Explorer —that I will fix as time permits. I’m just glad that IE doesn’t present the site as a disaster area. (Seriously Microsoft, why don’t you stick with what you’re good at— the Xbox!)

  • In the main navigation, the tab to the right of the active tab overlaps the active tab.
  • The site-map’s bullet list displays buggy: the bullets are invisisble unless you hover over the links. I will be making a second pass over this section anyway. FIXED on 2009-01-26
  • The spotlight section’s border-top is invisible; I might be able to fix this by adjusting z-index, but this is a difference I can live with.

The other idiosyncrasy has to do with Firefox on Windows: The checkbox in the contact form overlaps the submit button. Surprisingly, IE 7 gets this right! What up Firefox?

UPDATE: I totally re-coded the contact form today, and it now renders coherently in all major browsers— props to Nathan Smith for pinpointing the the problem. /2009-01-15

Google Chrome displays the page perfectly, but that’s no surprise: it’s based on Webkit.

The last display challenge appears on ultra-high resolution screens and browsers with out-zooming enabled (like FF): the footer’s background doesn’t extend to the bottom of the screen. I know how to fix this, but the fix undermines a lot of the choices I made with this layout, and it isn’t worth redoing the whole thing at this time.

I added a border to the bottom of the footer as a way of saying “This is the end of the web site. Any white space you see beyond this point is your own business.”

powered by TinyLetter