Portrait of Martijn

Performance testing with webpagetest

16 Jun 2011

Oh wow, how did I miss this one?

www.webpagetest.org is like YSlow and Safari's Web Inspector timeline, but as a hosted service in multiple locations, and is very comprehensive.

My results show the homepage starts to render 0.5 seconds is "document complete" in 2s, and finishes delayed loading in 3s. Total bytes in: 124KB. In repeat view it's 0.5s, 0.8s and 1.4s, with 44KB. Page Speed 1.9, score 95/100. That's what I expected based on my local testing, and I'm happy with that.

Going with London/Chrome config, I got completely caned by 1s DNS, and twitter fails alltogether. That will need looking at another day.

Things I want to improve in the short term:

  • add missing epxirations tags to my static assets
  • making my own twitter widget will help the most (I knew that already)
  • consider CloudFront for static assets for at least template images. I have a slight philosophical objection against using CDN resources as URLs; I wish you could list CDN copies and your original as a fallback.
  • fix their IE text centering (for the screenshots)
  • look into delaying jQuery loading (tricky, and maybe not worth the hassle)

Then there is of course pre-baking the currently-lazily-loaded content, but that's going to require a bunch more coding and can come later.

Update. June 18th:

  • added Expires with Lighttpd mod_expire, disabled etags with static-file.etags (fails for compressed content because of a lighttpd issue)
  • made my own twitter widget with jQuery.getScript. This makes inital rendering fast, but actual tweet loading slower because twitter redirects to HTTPS. I don't know if there is a way to stop that ("Always use HTTPS" is off in Twitter's account settings), but this issue will go away in future
  • moved images to S3 manually (s3cmd sync would help) and enabled CloudFront with a CNAME. Annoyingly CloudFront doesn't do gzipping of text/css and text/javascript of S3 content; workarounds are unsatisfactory and the Custom Origin mechanism a bit of a faff. For now I just use my own copies.
  • fixed the IE centering with the use of netrenderer.
  • decided against delayed jQuery loading because of the complexity. Did combine my JS files, and delayed their loading.

The result is 0.8/1.7/2.6 (139K), and 0.1/0.3/1.5 (10K). Not much difference, but these are small margins anyway. Fixing the data flow will have more visual impact. Log analysis on my server (excluding my browser, w3c validator and webpagetest requests) shows no meaningful reduction in traffic, a reflection of the fact that it is dominated by search engines and malware bots. Heigh-ho.