Subscribe
Yesterday John Resig, the creator of Jquery, posted on Reddit’s rage comic section offering a simple CSS technique that would greatly improve the performance of that section’s main page. By removing random query strings from identical CSS image sprites, the page size would be reduced from 4.14MB to 512KB (over 6x improvement!).
If you look at that page’s Slowcop Report, you can clearly see the problem: an identical image is being loaded 37 times!
Read John’s full post for details about the optimization. The gist of it is in this CSS diff.
Yesterday Facebook opened part of its new datacenter in Pineville, Oregon. Around half of the datacenter is online, 150,000 out of 300,000 square feet! Facebook hasn’t specified what kinds of workloads these servers will run, but with over 500 million users, there’s a lot of different possibilities.
One neat thing about this datacenter is that Facebook is sharing the specs as part of its OpenCompute project. Facebook managed to cut power consumption by 1/3 by a variety of methods, like regulating the central power supply, and reusing hot aisle air in winter to both heat the offices and the outside air flowing into the data center. Building datacenters is still a massive business, and investing in low-power solutions can save a lot of money in the long-run. Some of these features include:
You can find more pictures of this unveiling on Scobles’ blog.
survey.io is a useful way to create a short customer-development survey for your product or service. They provide an embed code that creates a banner on the top of your website. You can see an example on my friend’s reminder service. However, the Javascript file itself is 11.13 KB, and furthermore, it loads a flash widget which records mouse clicks. It’s not the kind of embedded content you want to expose to your users.
For the same effect, you can just add four lines of HTML which just links to the survey itself. Although this doesn’t let you view the survey in a lightbox (like the widget does), it’s a fraction of the size, and saves a couple requests.
<a href="http://survey.io/survey/survey_id"> <div style="width: 105px; height: 105px; z-index: 9999; position: fixed; top: 0; right: 0; background: url(http://cdn.survey.io/embed/1.0/right_top_orange.png);"> </div> </a>
Yesterday the page speed plugin for Chrome was updated. One of the new features is rules now carry an impact score, which represents the significance on the performance of the web page. Before, it was common that some insignificant rules (but lower-scoring) were displayed more prominently than more meaningful ones. Now these weights have been adjusted.
This new version has already been integrated into Slowcop, and rules are now ranked by impact.
Also, the deploy tracking is getting close to launch – an e-mail will go out soon with install instructions.
Enjoy!
Mahdi Yusef, a developer in Ottowa, wrote an interesting blog post about the cost of ASCII art in Tumbr’s source code.
The Tumblr home page contains the following ASCII art image:
. .o8 oooo
.o8 "888 `888
.o888oo oooo oooo ooo. .oo. .oo. 888oooo. 888 oooo d8b
888 `888 `888 `888P"Y88bP"Y88b d88' `88b 888 `888""8P
888 888 888 888 888 888 888 888 888 888
888 . 888 888 888 888 888 888 888 888 888 .o.
"888" `V88V"V8P' o888o o888o o888o `Y8bod8P' o888o d888b Y8P
He calculates that, if the Tumblr page is visited 500 million times a year, and the size of the art is 514 bytes, the cost to Canadians is around $120 dollars a month (Canada’s bandwidth is capped at 2 GB and extra bandwidth is $0.50/GB)
As someone pointed out in the comments, Tumblr supports gzip compression, so this ascii art is being compressed to a much smaller size. Also, it’s likely the art won’t cause extra packets to be sent, because it represents a small fraction of the page.
That being said, sites with huge amounts of traffic should be aware of these issues, and analyze exactly what the cost/benefit is.
I just wanted to post a quick update on the progress of Slowcop. A lot of improvements have been in the past week, most notably:
Overall, Slowcop should feel much faster. Next week I’m planning to roll out some of the beta monitoring features!
The other day I was debugging a strange issue in Slowcop: in the timeline view, some urls weren’t being displayed:
This was only happening in Chrome, so I first thought it related to Chrome’s handling of overflowing divs. But that didn’t make sense because other overflowing urls were being displayed perfectly.
It turns out the problem was Adblock.
I use Chrome for most of my browsing, and running adblock really speeds up browsing at cafes and other places with public internet.
The Slowcop timeline shows all assets belonging to a website, including ones that are advertising related. These type of links to these sites were hidden by the Adblock rules:
a[href^="http://ad.doubleclick.net/"] { visibility: hidden !important; display: none !important; }
As a work-around, I just moved the url text to div tags. This seems to work for both Chrome and Firefox. With some clever Javascript hacking, this might be a way to bypass adblock :)
So, just a word of caution – some popular browser extensions may have unintentional effects on your website, especially if they involve hiding or modifying content.
Today the Slowcop Blog got a few updates: it now has an RSS feed, and a comment system (a la Disqus). There’s a lot of articles and updates I’m planning in the next few weeks, so make sure to subscribe!
Although I was advised by my friend Rishi (from Flying Cart) to just use a regular Wordpress blog, I decided to do it in Rails. There’s a nice system in place to post code snippets, and redoing that as a Wordpress theme doesn’t sound too appealing.
Let me know what you think!
These are some browser statistics for Slowcop for the past few days. Most of this traffic is referral traffic from Hacker News:
Surprisingly, IE makes up less than 3% of traffic. I’d suspect for most large-traffic websites, this number over 50%.
Another possible explanation is that, until today, Slowcop wasn’t working properly in IE. These visitors most likely didn’t share the site with their friends or co-workers. This is why I spent the better part of today hunkered down in a Windows VM.
Digression: if you have a Javascript-intensive app, I highly recommend using underscore.js. It provides cross-browser support for a lot of common Javascript tasks. For example, IE’s setTimeout doesn’t work the same way as Firefox/Chrome – it doesn’t let you pass additional arguments. Underscore’s _.delay is a workaround.
Tomorrow I’m planning to share Slowcop in a few other tech blogs. It should be interesting to see how that affects the percentage of IE users.
Whenever Slowcop makes an http request, it uses the following request structure:
GET / HTTP/1.1 User-Agent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US) AppleWebKit/533.3 (KHTML, like Gecko) Qt/4.7.2 Safari/533.3 Accept: application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Connection: Keep-Alive Accept-Encoding: gzip, deflate Accept-Language: en-US,* Host: www.google.com
In this request, Slowcop is fetching google.com.
These headers are being constantly updated to get maximum compatibility. For instance, Accept-Encoding was recently changed from gzip to gzip, deflate. Some servers respond better when Accept-Encoding is set to gzip, deflate.
If you run a report on hotmail.com, this is the kind of url structure you see:
Who comes up with this type of structure? It seems to be some kind of an asset packaging system.
One of the benefits of working on Slowcop is you get to see what kinds of fun information is hidden in HTTP response headers.
For instance, I was running some tests on gigaom, and I came across the following HTTP header while examining a CSS file:
X-hacker: If you’re reading this, you should visit automattic.com/jobs and apply to join the fun, mention this header
So, if you’re looking for a job at wordpress, make sure to include this in your cover letter!