Book of Speed

June 12th, 2011. Tagged: book, performance

#3 This post is part of the Velocity countdown series. Stay tuned for the articles to come.

Without further ado, please point your browser to the newborn bookofspeed.com.

It's a free (public domain), online, open-source, not yet finished, book about web performance.

Contributions welcome

The source files are on Github - https://github.com/stoyan/Book-of-Speed. I'll be glad to receive any errata, technical mistakes, requests, grammar checks, anything really. Just edit the stuff in /src and send a patch. /src is the text for the chapters alone, then what you see on the site and in the main directory - TOC and chapters - are generated by a build script (of course a javascript).

How did we end up here

Year and half ago I did this Performance advent calendar experiment (since moved to a new home), writing an article a day for 24 days (sounds vaguely familiar?). PeachPit press approached me about publishing a book based on those. PeachPit publishes mostly web design books (like Designing with Web Standards) and I thought designers should know about performance. Also business folks, product managers. So why not write something more accessible and less technical?

"Speed Matters" was the title.

Fast forward... I kept missing deadlines (a favorite thing, ask Douglas Adams) until eventually after 5 and a half chapters out of 9, the publisher decided to cancel the project. Fair enough. Wasn't meant to be. We're grown ups, no hard feelings. (Well, I did try to save the project by suggesting Marcel Duran who now works on YSlow to finish it, to which PeachPit expressed interest initially but then didn't bother to follow up with a comment or explanation)

So instead of letting PeachPit keep the content and maybe publish it on their site, I decided to keep the chapters and return them the money for the royalty advance they have given me. After all, I did wanted to try self-publishing for some time .

Fast forward again... I didn't do anything further. Changing computers, failing disks and non-existing backups convinced me I should let this content free sooner. "Information wants to be free". So I managed to restore from emails (but not the images, had to copy images from Word) and thought the Velocity countdown is a good excuse to release this thing.

I mentioned to my good friend and designer Yavor about the project two days ago, he had a few free cycles and sent me a mock. Awesome! the only "brief" I gave him was "it's to be a free online book, like diveintohtml5.com and eloquentjavascript.net". And here's what he came up with, how cool is that! (oh and I gave him a turtle drawing, see below)

(As you can see, he's so humble he doesn't want any credit on the site. But this is my blog and I can give credit as much as want now, can't I? :) )

So last night between writing last night's post and today, I turned this mock into HTML (not fully complete, missing ego-header and pagination) and converted the 5 chapters I have so far from word docs to HTML.

Audience

If you follow my blog there isn't much new for you. Like I said, the audience was to be less technical. But there are a few new never-before seen bits and pieces.

Assuming the html-writing part of the PeachPit audience will be still very attached to XHTML, I decided to do what I generally tend to avoid - closing tags, using type="text/javascript" etc. Further edits should convert these to more compact html5-allowed syntax.

In the markup for the site though, in the rush to convert everything I started not closing P and LI to save time :) Feel free to send a patch.

No credits

I was planning on having one round of credit-giving either as footnotes or appendix once the book is done. But the books is not done, so forgive me if I havent given you credit where it was due.

No links

It's silly to have no links in an online publication, but given the rush, I didn't edit the content at all to add them. Again I was planning on appendix, or actually a companion site. Will do. Will accept a patch :)

On editing

My editor from PeachPit sent me notes and edits. These are not in the online edition. Partly because I don't think it's fair (what's in it for them?) and partly because, trivially, I didn't have the time.

On reviewing

I got technical reviews from Marcel Duran and Sergey Chikuyonok while working on the book. I haven't incorporated their feedback. Will do ;) (Sergey said my chapter on image optimization was too basic :) It is, especially compared with his articles on smashing magazine and his blog )

But Annie Sullivan from Google went way above and beyond any review I have seen. She actually read the chapter with her husband (not technical) and explained to him what's going on. So I had very eye-opening observations and I'm grateful and indebted for this.

(As you guessed, the feedback is not yet reflected in the text)

PageSpeed

PageSpeed runs on Dreamhost where the site is. So I though I should check the "use pagespeed" check in DH's panel. Not bad, not bad at all. Having your images and other stuff taken care of for you automagically. I have 99/100 Page Speed score and 94/100 YSlow.

I do minify CSS myself though and inline it, because it's small

Turtle

I couldn't use the turtle (nor the title) from Speed Matters. But my kid drew a turtle in drawing class so I thought I should use it. Here's what it looked like before the my designer friend took over:

Happy reading!

Like I metioned, regulars on this blog won't find much new information, but feel free to send your junior team members to learn from the free source.

And don't forget to send patches - book editing via GitHub sounds pretty nice to me.

Once again - here's the book of speed and here are its source files.

Tell your friends about this post: Facebook, Twitter, Google+

15 Responses

  1. After a quick glance, I can already see there are a lot of things that are either misleading or just downright wrong with this book, especially around your advice on PNG compression.

  2. Thanks Tom, please send your feedback any way you prefer

  3. People (including me) have been talking about the need for a free, online, patchable web performance book for years. Bravo for stepping up and delivering! I love that it’s on github and people can contribute.

  4. Stoyan,
    Have you played with the history.pushState API. This project seems like a perfect candidate, since the pages are static, and the flow is linear.

    The next chapter can be pre-fetched when the user scrolls to the bottom of the page, which will make the site appear lightning fast, while nicely degrading for older browsers and search engines.

    The JavaScript should be only few lines.

  5. Looks fantastic – thanks for putting this online!

    Are you planning a chapter around gathering large-scale statistics using Episodes, Boomerang or other beacon-sending libraries? A couple of years back, my team rigged up Episodes to report page component timings as custom data in Google Analytics, and it was hugely helpful. Am happy to give you notes or draft something up if it’s the kind of thing that’d make a good addition.

  6. Excellent work, Stoyan. Really great of you to spend the time putting this together. I’ll be firing chapter 1 over to the client services team tomorrow.

  7. Can’t wait for the HTTP “Chinked” encoding in chapter 9.

    Also, you are right, PNGs are amsller

  8. [...] in visual search suggestions #5 – perfplanet.com is open #4 – YSlow 2.0: the first sketches #3 – Book of Speed #2 – Sultans of Speed #1 – Overlooked Optimizations: Images – guest post by Billy [...]

  9. Love this and I hope to be able to contribute. I work with a team at Within3 (www.within3.com), where performance is an extremely high priority. We work with hardware setups. We work to keep our client side lean. We are working on our server side/memcache architecture to get it tweaked to our liking. I spent many nights reading an applying the recommendations from Mr. Souders as well as several other performance gurus.

    Appreciate your work to get this going!

  10. When you finish could you please provide a print-on-demand version?

  11. [...] Came across this excellent resource on how to improve web page performance in of Stoyan Stefanov’s blog posts. [...]

  12. Thanks so much for the effort of hosting this!!! It’s a great resource, especially for oldfart opensource/Linux n00bies like myself. I found book-of-speed several entries down in a Gsearch on image64. I had searched this previously and both times found the other results either bloated or uselessly technical for my needs until clicking your link.

    Keep up the great work. You’ve created the base of a useful, well-written site. I hope the hit$ keep on coming, you deserve it.

    Just coincidently, I’ve been in a similar situation with a book in a totally different genre. Several years ago I outlined and half wrote (years later it’s still half!) a book and a full publishers proposal for my agent. I was unable to finish because of a career change and move. However, I found the experience quite valuable and have no regrets about the time spent on it.

    Thanks again Stoyan for your effort. Time for me to check out your blog.

  13. Fantastic post however , I was wondering if you could write a litte
    more on this topic? I’d be very thankful if you could elaborate a little bit further. Cheers!

  14. [...] Originally concepted by Stoyan Stefanov it’s been a great resource for many people already. Take a look and perhaps you can get a few tips out of it. [...]

  15. Without doubt, Apple’s application store wins utilizing a mile. It’s many hundreds all kinds of apps vs a fairly sad range of a smattering for Zune. Ms has designs, especially with the realm in games, but I’m unsure I’d like to bet in the future in cases where this aspect is extremely important to one. The apple ipod is a greater choice it’s likely that.

Leave a Reply