Blogs Media Lab

Optimizing page load time

We launched the new walkerart.org late on December 1, and it’s been a great ride. The month leading up to (and especially the preceding week starting Thanksgiving Day, when I was physically moving servers and virtualizing old machines) was incredibly intense and really brought the best out of our awesome team. I would be remiss […]

We launched the new walkerart.org late on December 1, and it’s been a great ride. The month leading up to (and especially the preceding week starting Thanksgiving Day, when I was physically moving servers and virtualizing old machines) was incredibly intense and really brought the best out of our awesome team. I would be remiss if I didn’t start this post by thanking Eric & Chris for their long hours and commitment to the site, Robin for guiding when needed and deflecting everything else so we could do what we do, and Andrew and Emmet for whispering into Eric’s ear and steering the front-end towards the visual delight we ended up with. And obviously Paul and everyone writing for the site, because without content it’s all just bling and glitz.

Gushy thanks out of the way, the launch gave us a chance to notice the site was a little … slow. Ok, a lot, depending on your device and connection, etc. Not the universally fast experience we were hoping for. The previous Walker site packed all the overhead into the page rendering, so with the HTML cached the rest would load in under a second, easy. The new site is heavy even if the HTML is cached. Just plain old heavy: custom fonts, tons of images popping and rotating, javascript widgets willy-nilly, third-party API calls…

Here’s the dirty truth of the homepage when we kicked it out the door December 1:

12/1: 2.6 MB over 164 requests. Load times are pretty subjective depending on a lot of things, but we had good evidence of the page taking at least 4+ seconds from click to being usable — and MUCH longer in some cases. Everyone was clearly willing to cut us some slack with a shiny new site, but once the honeymoon is over we need to be usable every day — and that means fast. This issue pretty quickly moved to the top of our priority list the Monday after launch, December 5.

The first thing to tackle was the size: 2.6 MB is just way too big. Eric noticed our default image scaling routine was somehow not compressing jpgs (I know, duh), so that was an easy first step and made a huge difference in download size.

12/5: 1.9 MB.

On the 6th we discovered (again, duh) lossless jpeg and png compression and immediately applied it to all the static assets on the site, but not yet to the dynamically-generated versions. Down to 1.8 MB. We also set up a fake Content Delivery Network (CDN) to help “parallelize” our image downloads. Modern browsers allow six simultaneous connections to a single domain, so by hosting all our images at www.walkerart.org we were essentially trying to send all our content through one tiny straw. Chris was able to modify our image generator code to spread requests across three new domains: cdn0.walkerart.org, cdn1, etc. This bypasses the geography and fat pipe of a real CDN, but does give the end user a few more straws to suck content through.

Requests per Domain

www.walkerart.org 26
cdn1.walkerart.org 24
cdn0.walkerart.org 24
cdn2.walkerart.org 21
f.fontdeck.com 4
other 7

 

By the 8th we were ready to push out global image optimization and blow away the cache of too-big images we’d generated. I’m kind of astounded I’d never done this on previous sites, considering what an easy change it was and what a difference it made. We’re using jpegoptim and optipng, and it’s fantastic: probably 30% lossless saving on already compressed jpegs and pngs. No-brainer.

12/8: 1.4 MB, almost half of what we launched with.

Next we needed to reduce the number of requests. We pushed into the second weekend with a big effort to optimize the Javascript and CSS. Earlier attempts using minify had blown up and were abandoned. Eric and Chris really stepped up to find a load order that worked and a safe way to combine and compress files without corrupting the contents. Most of the work was done Friday, but we opted to wait for Monday to push it out.

Meanwhile, I spent the weekend pulling work from the client’s browser back to the server where we could cache it site-wide. This doesn’t really impact bytes transferred, but it does remove a remote API call, which could take anywhere from a fraction of a second (unnoticeable) to several seconds in a worst-case scenario (un-usable). This primarily meant writing code to regularly call and cache all of our various Twitter feeds and the main weather widget. These are now served in the cached HTML and it’s negligible in the load time, instead of 200+ ms on average. It all adds up!

 

CSS Sprite for Header and Footer nav images (it has a transparent background, so it’s supposed to look like that):

 

 

So Monday, 12/12, we pushed out our first big changes to address the number of queries. Eric had combined most of the static pngs into a CSS Sprite, the javascript and CSS were reduced to fewer files, and the third party APIs were no longer called in the browser. Really getting there, now.

12/12: 1.37 MB, and 125 requests

Happily (as I was writing this) Eric just pushed out the last (for now) CSS sprite, giving us these final numbers:

12/13: 1.37 MB, and 110 requests! (down 53% and 67% respectively)

This isn’t over, but it’s gotten to the point of markedly diminishing returns. We’re fast enough to be pretty competitive and no longer embarrassing on an iPad, but there are a few more things to pick off around the edges. We’re heavier and slower than most of our museum peers, but lighter and faster than a lot of similar news sites. Which one are we? Depends which stats I want to compare. :)

We used the following tools to help diagnose and prioritize page loading time issues:
http://tools.pingdom.com/fpt/
https://developers.google.com/pagespeed/
http://developer.yahoo.com/yslow/

 

 

 

 

“Gamechanger”: Early reviews of the new Walker website

Launched late last week, the new Walker website is generating plenty of reactions from art bloggers, journalists and our colleagues in the museum world.

Launched late last week, the new Walker website is generating plenty of reactions from art bloggers, journalists and our colleagues in the museum world.

Tyler Green of Modern Art Notes offered a quick response last week, calling the site a “game-changer, the website that every art museum will have to consider from this point forward.” He followed that up with a more in-depth piece today that both praised the Walker (“no American art museum is more prepared to produce journalism than is the Walker”) and offered some challenges (“How probative will the Walker site be about its own institution, which dominates the presentation of contemporary art in a huge section of the country?”).

“Art museum websites typically pretend that the museum is an island unto itself,” he writes. “The new Walker website rejects that approach by presenting the Walker as both a physical and a virtual community hub — and it defines its community appropriately broadly, as both the art world and the Walker’s home state of Minnesota. With its audience thus defined, the new website promises to provide not just information about the Walker, but information about art and artists wherever they are, with an special and appropriate focus on its home region. That’s smart. Next up: We’ll see how the website delivers on that promise.”

Alexis Madrigal at The Atlantic writes that the site “should be a model for other institutions of all kinds.” He writes: “What I love most about what the Walker is attempting to do is that they seem to have realized that they can do more than stave off a slow spiral into irrelevance. The Internet means that the Walker can become a global art powerhouse from the comfort of the upper Midwest.”

Seb Chan, recently named director of digital and emerging media at the Cooper Hewitt, National Design Museum, interviewed Walker staff about the technology side of the site, noting that “it represents a potential paradigm shift for institutional websites.”

Museum Nerd, the popular anonymous art-tweeter and blogger, followed up a tweet from Friday (below), with a fleshed out analysis at Artlog. Calling the site an “earth-shaking gamechanger,” Museum Nerd writes, “They’re not just positioning themselves as an arbiter of taste (the connoisseurship thing has long been in every art museum’s bailiwick): the Walker is also placing themselves at the center of the conversation that their mission is all about.”

Marianne Combs at MPR: “As a reporter, I find this shift particularly interesting, because it marks a significant step forward in an ongoing trend. Namely arts organizations, faced with a lack of media coverage, are creating their own coverage, and taking the dialogue directly to their audiences.”

Secrets of the City: “[P]retty darn cool. The new look moves the site into more of a content focused direction, but also makes it easier to see what’s happening in the galleries.”

The Getty:

Minneapolis Institute of Arts:

ICA Philadelphia:

MoMA:

The Mattress Factory:

Museumnerd:

I’ll continue to update this post as more reviews come in.

Updates

12.06.11: Nina Simon at Museum 2.0:

“Here’s what I see: a website as a unique core offering–alongside, but not subservient to, the physical institution. Walkerart.org is not about the Walker Art Center. It is the Walker Art Center, in digital form.”

 

12.08.11: The Independent (UK):

“It’s curation, but not as we (or other galleries) know it yet. It ought to help hugely the Walker’s role on the arts stage…”

Minnov8:

“To say I was impressed is an understatement: the design is fresh, exciting to view and the content compelling. The breadth and depth of coverage of art and design quickly shifted my mind toward a completely different place, one of consideration, thought and ideas instead of my typical focus on the tech ‘flipper-flappers’ and ‘eye candy’ of this new website they’d delivered.”

12.09.11: It’s Nice That (UK):

“It’s a great step forward that should be welcomed by all creative types – the writing is excellent and it looks great too with lots of interesting web design tricks producing a thing of real beauty.”

 12.20.11: Alissa Walker, GOOD:

“A vibrant and thoughtful portal for the local creative community… Museums everywhere should take note, yes, but publications should be paying attention as well.”

Digital Wayfinding in the Walker, Pt. 1

An ongoing conversation here at the Walker concerns the issue of systemic wayfinding within our spaces — certainly an important issue for an institution actively seeking attendance and public engagement, not to mention an institution whose building is literally a hybrid of the old and new (with our 2005 expansion). While not normally in New […]

An ongoing conversation here at the Walker concerns the issue of systemic wayfinding within our spaces — certainly an important issue for an institution actively seeking attendance and public engagement, not to mention an institution whose building is literally a hybrid of the old and new (with our 2005 expansion). While not normally in New Media’s purview, and only occasionally so for Design, a recent initiative to improve the flow and general satisfaction of visitors brought with it the idea of using digital displays, with their malleable content and powerful visual appeal, to guide and direct people throughout the Walker.

Our new static directional signage

Currently installed in one location of an eventual three, and with a simple “phase one” version of the content, the Bazinet Lobby monitor banks cycle through the title graphics for all the exhibitions currently on view, providing a mental checklist of sorts that allows the visitor to tally what he or she has or hasn’t yet seen that directly references the vinyl graphics at each gallery entrance. The corner conveniently works as an intersection for two hallways leading to a roughly equivalent number of galleries in either direction, one direction leading to our collection galleries in the Barnes tower, and the other our special exhibition galleries in the Herzog & de Meuron expansion. To this end, we’ve repurposed the “street sign” motif used on our new vinyl wall graphics to point either way (which also functions as a nice spacial divider). Each display tower cycles through it’s given exhibitions with a simple sliding transition, exposing the graphics one by one. An interesting side effect of this motion and the high-contrast LCDs has been the illusion of each tower being a ’70s-style mechanical lightbox; I’ve been tempted to supplement it with a soundtrack of quiet creaking.

The system, powered by Sedna Presenter and running on four headless, remotely-accessible Mac Minis directly behind the wall, affords us a lot of flexibility. While our normal exhibitions cycle is a looped After Effects composition, we’re also working on everything from decorative blasts of light and pattern (the screens are blindingly bright enough to bathe almost the entire lobby in color), to live-updating Twitter streams (during parties and special events), to severe weather and fire alerts (complete with a rather terrifying pulsating field of deep red). In fact, this same system is now even powering our pre-show cinema trailers. I’m particularly interested in connecting these to an Arduino’s environmental sensors that would allow us to dynamically change color, brightness, etc. based on everything from temperature to visitor count to time of day — look for more on that soon.

See it in action:

Behind the scenes / Severe weather alert:

 

Installation:

  

New Media Initiatives’ Somewhat Unintentional Tribute to Mr. Jobs (R.I.P.)

Our little corner of the office, over the past few months, has been transformed into a veritable Apple Store in miniature. You’ll be seeing some of these around the galleries soon. Photo by Greg Beckel


Our little corner of the office, over the past few months, has been transformed into a veritable Apple Store in miniature. You’ll be seeing some of these around the galleries soon.

Photo by Greg Beckel

Museums and the Web 2011 recap

I shared a ride to the airport with some colleagues who had very different takeaways from the conference than I did, so it’s clear there wasn’t a universal message. Everyone picks and chooses the ideas that might apply to what they’re working on.  Here’s what stood out to me: Cast wider nets: organize, filter, present. […]

I shared a ride to the airport with some colleagues who had very different takeaways from the conference than I did, so it’s clear there wasn’t a universal message. Everyone picks and chooses the ideas that might apply to what they’re working on.  Here’s what stood out to me:

Open Graph ProtocolCast wider nets: organize, filter, present.

Just as we’re getting good at putting our content online and connected internally, we’re starting to realize that’s not good enough. We need to connect more dots for our visitors: show related content not just from our institution, and not just from other institutions in the sector, but the entire web. We’re still a trusted source dealing with authoritative information, but we’re now expected to use that authority to interpret and present more than just our own content.

Part of this includes opening up our content in return so that we can be part of someone else’s related content. This includes OpenGraph markup (FaceBook, etc), simple machine readable versions, and above all: sort out our licensing and make it easy to understand what can be shared and how!

Standardize access, not content.

There was some of the usual hand-wringing over metadata formats and authorities, but also some new ideas on skirting that hurdle rather than jumping it. While everyone agrees we need to continue to work towards clean, linked, open data using shared authorities, there are a number of steps we can take right now that can potentially have a great impact.

Namely, what if we standardize the access to the data, rather than the data itself? Rather than building another API (although we’re still going to), we can provide similar and simpler functionality right now. (In an afternoon, if my impassioned rant is to be believed!  :)  Details to follow.)

Stop inventing. Iterate.

A great demo (early beta here: http://trope.com/miami/) was given in the unfortunate timeslot of 8am on Saturday morning. The Art in Public Places project by Miami-Dade County is, to quote @minxmertzmomo: “a great example of doing the obvious thing excellently”. There is a tendency to try to solve our shared problems in a unique way with a special and clever twist (guilty!), when instead we should be choosing best-practices from working solutions and applying them in an un-complicated way. To reach higher we need to stand on others’ shoulders instead of building our own stepladders.

Tate Collection OnlineDon’t finish building the wrong site.

James Davis from the Tate presented a great paper describing the process they’ve taken to launch the new (also beta) version of their Collections site: http://beta.tate.org.uk/art/explorer. The paper is a lovely narrative exploring the issues we face when development takes years and we must constantly remind ourselves to not finish building what we started building, but instead what it’s become along the way.

Summary

For me the conference provided a great summary of the latest innovations and thinking of museums online, and affirmed for me many of the choices and directions we’re taking in our current relaunch project. It was fantastic to see old friends and make new ones, and hopefully set the stage for future collaborations. I’ve also got a growing list of stuff to steal (er, shoulders to stand on.. :). Fantastic stuff all around!