A political campaign website has a singular purpose: vacuum up personal information and donations. How they do it is a matter of priorities. Content-heavy sites are slow to load and expensive to operate; running one in a cost-conscious manner means eliminating unnecessary server requests, tracking user behavior, optimizing every interaction, and shaving kilobytes off pages. So who does it better, Barack Obama or Mitt Romney? The answer could provide yet another clue into how effective each man would be leading the country’s economic recovery. A side-by-side comparison reveals that neither site is perfect–and that they are not very similar.
At first blush, Lacy isn’t impressed. “Romney’s using Typekit for custom fonts to get a typeface that looks exactly like Arial,” a font you don’t need Typekit to get. “There’s also a lot of boilerplate geo-location stuff which the site doesn’t seem to use much of. And for some reason, he’s using a version of J-query which came out in 2009.”
Deeper under the hood, things get better. The code is pretty clean, if a little disorganized, and most of it is appropriately commented, or annotated by the developer, to make it easy for other engineers to understand. Load times are a little long, and both the landing pages and the homepage are fairly heavy at 706k and 1.4MB respectively. They could also stand to make fewer server requests.
Romney’s site relies largely on a personal site-library stocked with a whopping 8,000 lines of custom code. Some of it is minified, making it leaner and faster-loading, but that’s still a ton of code. Smartly, the landing page caches all the stuff for the Index page, making it load faster, and it performs its loading asynchronously, in a nice non-blocking way.
“This site is competently made, but there’s a little engineering bloat,” says Lacy. “It looks like it was built by a standard IT firm that hasn’t been creative in a while.”
The Republican candidate’s site is not thoroughly optimized, but not half-bad for a site this size with this much content. “Romney’s site is well planned out and fairly well packaged–much better than Obama’s site in that way,” says Lacy.
Romney’s site also improves the user experience by setting a far future Expires header: This means the page will cache on your machine, so it can re-load faster the next time you visit. However, that doesn’t mean you’re necessarily seeing the same version of MittRomney.com as your neighbor; the site contains analytics code for Optimizely, an A/B testing platform that lets you compare different versions of your site, and rollout the one people like the best.
For the most-part, Lacy says, Obama’s site uses more modern components than Romney’s, but it also seems to forget some of the basics.
There’s more code bloat here than in Romney’s site, but some parts are well-compressed. The bloat in Obama’s code owes itself to Facebook and Twitter integration; code for connecting to those networks accounts for about half of all the code on Obama’s site. Still, the results speak for themselves: his page has earned over 31 million Facebook Likes, to Romney’s 11 million. (At right, Obama’s sharing menu.)
The caching setup isn’t as good as Romney’s; no future expires on most components means your browser has to load it fresh, even if you just loaded the page a little while before.
Still, the Democratic candidate has a superior mobile site, if a little too clever. An initial login screen makes you think you need to be signed up for an account on BarackObama.com just to see the site, but a little clicking around and you can eschew it.
Like Romney, Obama uses a content delivery network to make the user experience on the site better; CDNs disperse your site’s resources to servers in various geographical locations, so the data takes less time to reach people’s computers. The components of Obama’s CDN setup are better organized, with one host server for each of the components, whereas Romney is loading it all from the same server.
Another category Obama wins: analytics. His site is kitted out with ChartBeat and New Relic for analytics. New Relic lets you pinpoint and solve performance issues with web apps, so each user has an ideal experience. Chartbeat lets you see peek at detailed metrics about how people are using your site, like how far they scroll down a page.
Lastly, where Romney’s site looks like commercial code, Obama’s site has a handcrafted touch: the ASCII art in the source code.
- Drupal content management system with a toolkit library to fill in gaps
- Storage on NginX server
- Typekit for custom fonts
- jQuery 1.3.2 (circa 2009)
- Using CDNs, which do xyz
- Using Gzip to reduce the number of downstream data
- Has basic login plus Sharethis for social stuff
- Clickable for display advertising
- Shortlink: Mi.tt
- Google Analytics
- Splash Screen: 44 requests, 706k, 2.9 seconds
- Index Page: 79 requests, 1.4MB, 4.3 seconds
- 11 million Facebook likes
- Moustache.js templates
- Sweet ASCII Art
- Up-to-date jQuery library
- Poly-fills to bring old browsers up to snuff
- Custom fonts from Typography.com
- Shortlink domain: OFA.BO
- Storage on Apache server
- LucidMedia, Double-click and Adnxs for display advertising
- Google Analytics
- New Relic
- Splash Screen: 74 requests, 633k, 3.7 seconds
- Index Page: 1MB page, 245 req, 9 seconds
- 31 million Facebook likes