2012-11-05

Co.Labs

Inside The Candidates' Code: What The Campaign Websites Say About Obama And Romney

Both presidential candidates say they can slice the budget and make better use of national resources. So who is smarter and more efficient on the web?



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.

To measure up the candidates’ online properties, FastCompany tapped Daniel Lacy, lead front-end engineer at the dating site HowAboutWe in Brooklyn’s DUMBO neighborhood, and an expert on website minification and accessibility. To examine the candidates’ websites, he’ll be using the Safari Web Inspector in Mac OS X, a Javascript performance tool called DOM Monster, Yahoo's Yslow speed diagnostic tool, and the web development utility Firebug.

Under the Hood: MittRomney.com

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.”

Romney’s site does have some cutting-edge components. For one, he’s using CommonJS, a modularization system built for using Javascript libraries outside the browser. The way Romney's site uses it, CommonJS helps streamline packages, requiring less work for the server to load the page. It also uses scripting to discover data dependencies in the code, which can help the page load faster. Storage is on an NginX server, a flexible and high-performance open source server solution developed first in Russia. It’s badass compared to Obama’s more old-fashioned server.

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.

Under the Hood: BarackObama.com

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.

Moustache.js is a library popular with front-end developers right now because it provides sites like Obama’s with visual templates that require less coding to implement. It also uses Modernizr, a component which detects support for modern browsers and lets the site load conditional Javascript and CSS based on the capability and vintage of your particular computer. Another friendly addition is wide use of Polyfills, which allow older browsers to run newer site features. Obama's site also features a more recent version of J-query.

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.

“This looks like it was built by more modern people, but not using traditional optimization,” says Lacy. “They've forgotten basic optimization stuff: caching, minimizing requests.” His Javascript isn't packaged up well and his Index page needs three times as many server requests as Romney’s to load a page that’s 40% smaller. The CSS page is a little sloppily written, too: the typical layout is styles at top, then a Javascript footer, then dynamic content written below. Obama’s code appears out of order.

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.




MittRomney.com: The Specs

  • 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)
  • Common.js
  • Using CDNs, which do xyz
  • Using Gzip to reduce the number of downstream data
  • Has basic login plus Sharethis for social stuff
  • Mobile-capable
  • Clickable for display advertising
  • Shortlink: Mi.tt

Analytics

  • ShareThis
  • Google Analytics
  • Optimizely

Stats

  • Splash Screen: 44 requests, 706k, 2.9 seconds 
  • Index Page: 79 requests, 1.4MB, 4.3 seconds
  • 11 million Facebook likes


BarackObama.com: The Specs

  • Moustache.js templates
  • Sweet ASCII Art
  • Modernizr
  • Up-to-date jQuery library
  • Poly-fills to bring old browsers up to snuff
  • Optimizely
  • Custom fonts from Typography.com
  • Gzip
  • Mobile-friendly
  • Shortlink domain: OFA.BO
  • Storage on Apache server
  • LucidMedia, Double-click and Adnxs for display advertising

Analytics

  • Google Analytics
  • Chartbeat
  • New Relic

Stats

  • Splash Screen: 74 requests, 633k, 3.7 seconds
  • Index Page: 1MB page, 245 req, 9 seconds 
  • 31 million Facebook likes

Article Tags: politics





Add New Comment

0 Comments