Blogs Media Lab

Optimizing page load time

By

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

By

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