Washington State University Optimization Potential

Reading Time: 3 minutes

Washington State University has a single multi-network installation. They serve over 2 million page views a month across almost 1083 WordPress sites. Gak! We choke on the sheer enormity of the project.

We met Jeremy Felt and other’s of the WSU WordPress team at a Meetup in Moscow, Idaho. We admit they intimidated us. We knew these brilliant guys were way out of our league. PagePipe is a little David with a puny slingshot by comparison. Could we make recommendations for performance enhancement to these Giants?

We used Yslow extension for Google Chrome and WebPagetest.org speed testing tools to peek behind the scenes. Here’s what we saw:

There is some low-hanging fruit and unrealized potential.

The Home page had 113 HTTP Requests for elements. Those components added up to a total page weight of 3.45M! We quickly Googled the most recent-published, average-page weight. It’s up to 2.2M as of January 2016. That demonstrates the excesses of designers and developers of recent years. Pages have increased in weight about 30 percent per annum for the last four years. But the “pipe” (throughput) is not getting bigger or faster. Congestion!

So how long did this big page take to load? 9 seconds – occasionally 10 seconds. It could have been worse. On mobile devices, they’re on the verge of the 11-second lost train of thought (see the illustration below). We’ve reported people won’t wait that long. We did another quick-and-dirty test with a hand-held device. Connecting via a wireless router, the Home page load time was over 20 seconds. Hmm? Not good.

Page weight is the aggregate sum of all files creating a browser page. This is usually expressed in “k” (kilobytes). Page weight is an indicator of optimization and speed. Viewers hate slow pages.
These expectations aren’t new. They’ve existed for over 40 years in usability studies of human and machine interaction. Viewers hate slow pages.

WSU is doing many things right. The Home page is impressive and awe inspiring. We admit the perceived load time is pretty fast – between 2.5 and 3.5 seconds on a desktop. Of course, not as good on mobile. Part of the speed problem is not the fault of the developers – but rather the fault of the stakeholders. The desire for impressive and expressive aesthetics have superseded speed as a primary goal for mobile users.

Classic design is strongly connected to perceived site usability. Expressive design is for memorable branding.

A committee with many goals (or values) will create a page with too much – or no emphasis. That sounds harsh. But “no emphasis” is our verdict and it’s causing a speed problem.

When you emphasize everything, you emphasize nothing.

As we scroll deeper on the page, panels reveal new ideas. But what’s most important? We can’t tell. What are we supposed to do next? Is the “beauty” overselling?

Overselling creates suspicion.

Overselling includes using big, background panoramic images. Plus it encompasses interactive elements like a complex Google Map, and parallax scrolling, too. They’re slick, gimmicky, and trendy “features” to impress visitors. They’re expressive aesthetic. They add a lot of page weight.  It’s entertaining – even beautiful – but does it have genuine value?

Some small potatoes:

We’ve a few small questions. They may make no difference whatsoever in speed: Are they lazy loading images? Why no minification plugin? (Some files were minified by hand). Why are they using Typekit Proxima Nova instead of a Google font. Many Google fonts are already cached in every browser on the planet. Not true with Typekit.

We just wonder. We know these aren’t oversights. These guys are thorough and professional.

We see a way to reduce the page weight by 1.4M. But it’s gonna hurt. And it could buy 3 seconds.

“It’s the Map! It’s the Map” – Dora the Explorer

From our rough calculations, we’ve found the biggest culprit. It’s the much-worked-on, sweat-over, interactive Google map – showing all WSU locations. It’s calling 56 HTTP elements. It’s hogging almost half of all HTTP calls. They are mostly loaded in parallel which helps.

The map accounts for 692k – or 20 percent – of the page weight.

But the map is so cool. You can’t kill it. Can you?

The map has too much invested history to let go of this mammoth. It’s not leaving the site – but it should leave the home page. The solution is simple. Place a responsive (or dynamic-resizing) static-image link (screengrab) and simply offload the map to it’s own page.

That would be a brave and gutsy thing to do. But it’s also smart. Why? Because here is the responsive view:

iphone map 2
The Google Map on an iPhone. Tap on one of those little red tags. Good luck. Is the phone broken? No. It’s your fat finger.

And here the WSU map is displayed on an iMac using Google Chrome browser:

Click above image to enlarge.
Click above image to enlarge. The map has become a hole in the page. UX? Anyone?

Wait! There’s more savings:

A beautiful parallax background image. Originally, a 259k Jpeg file size was easily optimized to 88k using "Save for web..." in an image processing application program.
A beautiful parallax background image. Originally, a 259k Jpeg file size was easily optimized to 88k using “Save for web…” in a Linux image processing application program.

The map is only half of the solution. According to WebPagetest.org, the images have a problem. If they were more aggressively optimized, WSU would whittle off another extra 441k. That’s a 22 percent reduction in page weight.

We wonder are these images sized for Retina displays. If so, is that wise and necessary? Only visitor web statistics (which we don’t have) would tell. No clue. But that may be another speed-saving compromise. Because of the WSU student population, we suspect at least a big chunk of the audience are on remote devices like tablets and smartphones.

We’d optimize even harder than WebPagetest suggests. We experimented with a few page images. We figure the aggregated savings could easily be 688k – about 34 percent reduction.

Is there a reason to not optimize images? Yes. Uncompromising perfectionism. Ouch.

Take the page’s 3.45M original weight. Now subtract a 692k map and then reduce the image weight by another 688k. The final weight is 2.05M. Finally, we can claim that WSU’s home page weight is average.

Average?

We challenge WSU not to be average. Can they compromise or reduce stakeholder expectations? It’ll require sacrifice and negotiations. And clear, concise communication goals. They owe it to their iOS and Android users. Those are mostly students, parents, and alumni. Not faculty desktops and laptops.

Self-imposed limitations require creativity. >

Peek-a-boo! On a horizontal iPhone.
Peek-a-boo! On a horizontal iPhone.

What others think of us:


"Bloat was out, lean and speedy sites on multiple platforms with easy editing was the new target. Steve hit the bullseye with our new WordPress sites … Give Steve a call if you're serious about a highly effective website for your business or organization." visitpalouse.com Washington, USA

by - Mike Milano