Speed to the Max

By Richard X. Thripp at 2008-08-19T14:29:55Z in News, with these tags: blogs, css, features, gzip, images, javascript, pages, posts, speed, jump to comment form. 413 words.

Thripp.com is now 30% faster than I said it was in my previous post. Brilliant Photography gets the biggest chunk of the speed boost, because it was the slowest to start.

All the HTML is now one line. That doesn’t yield a big speed improvement, but it’s just cool. The big thing is that I turned small images into CSS sprites and merged all the JavaScript files into one honker (148KB). That file is compressed with gzip if your browser allows it, and all the current ones do, so the bandwidth hit is only 45KB. Still big, I know, but considering it contains prototype.js (used for the clickable smilies in commenting screens, 124KB), the media player (check out JT’s blog for an example), the pop-up thumbnail effect (this blog, my blog, and the clickable smilies effect, that’s pretty good. Lazy loading might be better, but getting it out of the way at once reduces HTTP requests and 45KB is not much on a modern connection. Your browser caches it, too.

The site is fastest if you’re not a member, because then I can use caching and gzip to the max. If you are logged in, I can’t because the page has to be dynamically compiled each time for the links in the sidebar and the administrative controls above the header. If you make a comment, the cache is invalidated temporarily for that comment to appear, and then you don’t get compiled pages anymore. It’s still fast, just not as fast. 99% of visitors actually don’t interact at all, so most of you will be enjoying uber speed.

I already had caching and gzipping; today’s improvements are mainly on the client side. Note that pages aren’t cached or compressed till the 2nd visitor in a 24 hour period visits a particular page. JavaScript and CSS is always compressed, though.

The Google search box in the sidebar is faster to load, because I switched from the fancy JavaScript version to the plain HTML + CSS one Google offers. And I made the Google logo part of the CSS sprites file.

So the typical page is 65KB (20KB HTML + 45KB JS), plus the sprites image file (10KB), plus background (15KB), plus Google AdSense ads (who knows how much). Everything except the first 65KB can be loaded in the background, so a figure for a typical visitor, pages load in 2 seconds. That’s pretty good. It’s not fast like Google, but probably the fastest WordPress blog around. And that’s for everyone.




Have no fear — commenting is here. Comments RSS feed.

These HTML tags work: a href, abbr, acronym, b, blockquote, code, em, i, strike, strong, u. You will be emailed if anyone replies to your comment. Gravatars work here. Thanks for commenting!